Creating multiple markers with Angular Google Maps from an API

I'm trying to create multiple markers in a Google Map with the AGM package. While I can create multiple markers hardcoding the latitude and longitude if I try to create them with data fetched from an API I can't make it work.

If I do a ngFor in a 'p' tag to show the latitude and longitude, it shows the data correctly but for some reason, it can't create the agm-markers. This is my code:

component.ts

gps_lats: Array<number>;
gps_longs: Array<number>;

constructor(private _api: ApiService) { }

ngOnInit() {
this._api.machinesLocation().subscribe(res => {
this.gps_lats = Object.values(res['data']).map(({ lat }) => lat);
this.gps_longs = Object.values(res['data']).map(({ long }) => long);
});
}


component.html

machinesLocation

1 Answer
1

You can try with this solution

I have create a demo on Stackblitz

Component.ts

markers: Arary<any>=;
ngOnInit() {
this._api.machinesLocation().subscribe((res: any) => {
for(let data in res.data){
this.markers.push({
lat: parseInt(res.data[data].lat),
long: parseInt(res.data[data].long)
})
}
}
}


Component.html

<agm-marker
*ngFor="let m of markers;"
[latitude]="m.lat"
[longitude]="m.long">
</agm-marker>


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.