I managed to change the icon of currently clicked marker using the below code. I have multiple markers on page. Now the issue is , if i click the second marker, the icon of the previously clicked marker should be changed to its original one (inactive.png) and the icon of currently clicked marker should use (active.png).How can I achieve this? Please help.
In the below code if m.isClicked is true, then inactive.png is used, else active.png is used.
<agm-marker *ngFor="let m of mapArrayList" (markerClick)="clickedMarker(infowindow, m)"
[latitude]="m.geometry.location.lat()" [longitude]="m.geometry.location.lng()"
[iconUrl] ="
{
url: m.isClicked ? './assets/images/marker_inactive.png' : './assets/images/marker_active.png',
scaledSize: {
width: 40,
height: 60
}
}">
clickedMarker(infowindow, m) {
m.isClicked = false; // once the marker is clicked, the icon of marker changes from inactive.png to active.png
if (this.previous) {
// this is to close the previously opened infowindow.
this.previous.close();
}
this.previous = infowindow;
}