how to change the particular marker color in angular google maps

Question

I have 5 markers displaying on the map, I want to change only one marker color, I am using angular google maps how can I do that.

I have used the [iconUrl] to change color of the markers, but it is changing all the colors but I want to change only one color of the marker

HTML:

          <agm-map [latitude]="lat" [longitude]="lng" [fitBounds]="true" >
            <agm-marker [iconUrl]="iconUrl" *ngFor="let data of map_dev"   [latitude]="data.latitude" [longitude]="data.longitude"
                     [agmFitBounds]="true" (markerClick)="markerdata(data)" >
            </agm-marker>
          </agm-map>

Answer 1

You can specify the iconUrl inside your map_dev array. For example, I set the iconUrl of the 2nd marker to ../image.png

map_dev = [
  { lat: -33.883782, lng: 151.133711, alpha: 1 },
  {
    lat: -33.889698,
    lng: 150.816382,
    alpha: 1,
    iconUrl:
      "../image.png"
  }
];

Then you can reference the iconUrl inside the <agm-marker> by using data.iconUrl

<agm-marker
    *ngFor="let data of map_dev"
    [iconUrl]="data.iconUrl"
    [latitude]="data.lat"
    [longitude]="data.lng"
  >

I made a codesandbox implementation so that you can see this all in action. Note that you need to add your own API key.

I hope this helps!