CODEWITHSUNDEEP
javascriptangulargoogle-mapsangular-google-mapsagm
user12150264
user12150264

Reputation:

How to change content inside of info window for different markers?

I am working with angular using the AGM (angular google maps) library. I can't figure out how to have the info window content be different for each marker. I want each marker to have its own information to pop up. Here is my component.html :

<div class ="content">
    <h2>Popular Locations around InComm</h2>
<agm-map>
    [latitude]="latitude"
    [longitude]="longitude"
    [zoom]="zoom" >

<agm-marker *ngFor="let location of locations"
[latitude]= "location.latitude"
[longitude] ="location.longitude"
[label]= "location.label"
(markerClick)="clickedMarker(infowindow)"
>

<agm-info-window #infowindow>
    <strong>InfoWindow content</strong>
  </agm-info-window>

</agm-marker>

</agm-map>
</div>

And here is my component.ts :


previous;
clickedMarker(infowindow) {
  if (this.previous) {
      this.previous.close();
  }
  this.previous = infowindow;
}

markerDragEnd(m: location, $event: MouseEvent) {
  console.log('dragEnd', m, $event);
}

Any help will be apperciated, thanks !

Upvotes: 0

Views: 508

Answers (1)

alt255
alt255

Reputation: 3576

Replace <strong>InfoWindow content</strong> with the content you want to be replace. for example If you want to display label simply add {{location.label}}

<agm-info-window #infowindow>
    <strong>{{location.label}}</strong>
  </agm-info-window>

</agm-marker>

Upvotes: 1

Related Questions