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 ??

JulienD · Accepted Answer · 2020-08-15 00:16:09Z

4

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>

edited Aug 15, 2020 at 0:16

JulienD

7,32310 gold badges57 silver badges88 bronze badges

answered Jan 9, 2018 at 12:52

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

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

1 Comment

seawave_23 Over a year ago

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

averasko · Accepted Answer · 2019-02-19 16:56:26Z

4

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>

answered Feb 19, 2019 at 16:56

averasko

9707 silver badges15 bronze badges

1 Comment

Tenzolinho Over a year ago

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

rhavelka · Accepted Answer · 2018-01-17 17:10:28Z

0

Why are you referencing data.lat_long[0] for your lat and long? It makes me wonder if you really want this:

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

or this

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

It all depends on how your ROOMS model is set up

answered Jan 17, 2018 at 17:10

rhavelka

2,4244 gold badges26 silver badges38 bronze badges

2 Comments

Shaugi Over a year ago

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 Over a year ago

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.

Tharindu Chamikara · Accepted Answer · 2020-07-07 10:55:24Z

0

component.html

<agm-map [latitude]='lat' [longitude]='lng'>
    <agm-marker *ngFor='let loc of mylocations' [latitude]='loc.lat' [longitude]='loc.lng'></agm-marker>
</agm-map>

component.ts

private mylocations = [
    { lat: 7.423568, lng: 80.462287 },
    { lat: 7.532321, lng: 81.021187 },
    { lat: 6.117010, lng: 80.126269 }
];

answered Jul 7, 2020 at 10:55

Tharindu Chamikara

1

1 Comment

user12867493 Over a year ago

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.

Collectives™ on Stack Overflow

how to add multiple markers angular google maps?

4 Answers 4

1 Comment

1 Comment

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related