Creating multiple markers with Angular Google Maps from an API

Question

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

<div class="card ">
  <agm-map [latitude]="39.9" [longitude]="-0.16">
    <agm-marker *ngFor="let machine of gps_lats; index as i" [latitude]="gps_lats[i]" [longitude]="gps_longs[i]">
    </agm-marker>
  </agm-map>
</div>

hi @David plz provide json res of machinesLocation service — Krishna Rathore
– Krishna Rathore, Commented Jul 3, 2018 at 8:39

Krishna Rathore · Accepted Answer · 2018-07-03 10:17:58Z

2

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>

edited Jul 3, 2018 at 10:17

answered Jul 3, 2018 at 8:50

Krishna Rathore

9,7375 gold badges28 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

DavidMM Over a year ago

Thanks a lot Krishna, this totally works. I had to fix a bit of the code as I'm using Angular 6 (just small things as fetching the data with res['data'] instead of res.data)', but now it works.

a-k-h · Accepted Answer · 2018-09-26 11:42:49Z

I'm using Angular 6

Up helped me a lot but there are still some things to fix. You can use for() as Krishna or .forEach() as I do, both should work.

  public markers: [] = [];

  lat: number = 51.247680;
  lng: number = 22.561402780001;
  zoom: number = 15;


this.httpService.getBusstops().subscribe( 
      // "key" is not even needed here, it's just leftover of(from?) my previous idea 
      res => { res['response'].forEach((stop, key) => {

         this.markers.push({

            lat: parseFloat(stop['latitude']), // In api I have one "step" less than OP so I'm not doing 'res['response'].stop'
            lng: parseFloat(stop['longitude']),
            label: stop['name']

         }) 

        })} console.log(this.markers);    

      )

Next, in html

<agm-map [(latitude)]="lat" [(longitude)]="lng" [(zoom)]="zoom" [disableDefaultUI]="true" [zoomControl]="true" [(fitBounds)]='viewport'>

    <agm-marker *ngFor="let marker of markers" [latitude]="marker['lat']" [longitude]="marker['lng']">
        <agm-info-window>
            <p>{{ marker.label }}</p>
        </agm-info-window>
    </agm-marker>

</agm-map>

It's important to put string indexes as x['y'].

I'm not sure what's the difference and wheather to use [latitude] or [(latitude)], I thought it has something to do with interfaces but even if I'm not using any, I see no difference.

Collectives™ on Stack Overflow

Creating multiple markers with Angular Google Maps from an API

2 Answers 2

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Related