how to add multiple markers angular google maps?

Question

i used @agm/core module from npm install @agm/core

this is my code

<agm-map [latitude]="lat" [longitude]="lng" >
<agm-marker *ngFor="let data of rooms"[latitude]="data.lat_long[0].lat" [longitude]="data.lat_long[0].long"></agm-marker>
</agm-map>

and this component.ts

export class ResultComponent implements OnInit {
  lat: number ;
  lng: number ;
  rooms = ROOMS;

  constructor() { }

  ngOnInit() {
    this.rooms = ROOMS;
    this.lat =  -6.914744;
    this.lng = 107.609810;

  }

}

but that's only showing one markers how to add multiple markers using *ngFor ??

Solution 1

If you have lat and long defined in each item of your array

 <agm-map [latitude]="lat" [longitude]="long">
   <agm-marker  *ngFor="let data of rooms; let i = index" [latitude]="data.lat" [longitude]="data.long">
   </agm-marker>
 </agm-map>

Solution 2

chances are that all your markers are shown on the map correctly; but the map is centered on just one of them; try to zoom out and see for yourself.

starting rxjs@6, there is a way to center/zoom your map on the markers automatically AgmFitBounds:

<agm-map [latitude]="lat" [longitude]="lng" [fitBounds]="true">
  <agm-marker *ngFor="let data of rooms"
    [latitude]="data.lat_long[0].lat [longitude]="data.lat_long[0].long"
    [agmFitBounds]="true">
  </agm-marker>
</agm-map>

Comments

[Shaugi]

this is my dummy data structure ` { id_room : 1, name_room : 'Name1', rating_room : 3, price_room : 200000, lat_long : [{lat : -7.025253, long:107.519760}], latitude : 1122331123 , longitude : 123123123123, city : 'City 1', country : 'Country 1' }`

[rhavelka]

hmm... well everything you have looks right, so the only other thing I can think of is to confirm you have multiple elements in your this.room. Because you should have something like this [{ id_room : 2, name_room : 'Name2', price_room : 200000, lat_long : [{lat : -7.025253, long:107.519760}]}, { id_room : 2, name_room : 'Name2', price_room : 2000, lat_long : [{lat : -10, long:100}]}] where your lat_long are in fact different points.

[seawave_23]

Why agm-marker in a loop inside agm-marker? was that by purpose or did you mean agm-map in the parent element?

[Tenzolinho]

The best answer and the only one that works. Thank you!

[Admin]

While this code may solve the question, including an explanation of how and why this solves the problem would really help to improve the quality of your post, and probably result in more up-votes. Remember that you are answering the question for readers in the future, not just the person asking now. Please edit your answer to add explanations and give an indication of what limitations and assumptions apply.