title: Showing only one marker when there should be multiple in Angular Google Map
body: <p>I am using Angular Google Map from <a href="https://angular-maps.com" rel="nofollow noreferrer">https://angular-maps.com</a> . I wanted to show multiple markers using ngFor directive on agm-marker element. Though DOM shows all of the markers are present, UI shows only the first one on the map.  </p>
  
  <p>Here is HTML part:</p>
  
  <pre><code>&lt;agm-map [latitude]="lat" [longitude]="long" [zoom] = 16&gt;
  &lt;agm-marker *ngFor="let m of latlongs; let i = index"
  [latitude]="m.lat"
  [longitude]="m.long"
  [markerDraggable]="m.draggable"&gt;&lt;/agm-marker&gt;
  
  &lt;/agm-map&gt; 
  </code></pre>
  
  <p>Typescript code is here:</p>
  
  <pre><code> this.service.getData().subscribe(data =&gt; {
    let json: any[] = []; 
    json["data"] = data.json().map(it =&gt; {
      it["category"] = "location";
      it["gallery"] = ["../assets/img/area.png"];
      return it;
    });
  
    for(let i = 0; i &lt; json["data"].length; i++){
      this.mapInfos.push({lat: +json["data"][i].lat, long: +json["data"][i].long});
    }
  
    this.latlongs = this.mapInfos;
  
  });
  </code></pre>
  
  <p>I am using angular 4 for my project</p>