I need to change the icon image file dynamically when the user clicked the Map Pin.

I use the Angular Google map component here.

I set the initial icon like so: (Note: I have removed all unwanted code here)

    const url = `assets/images/pngs/mapPins/${mapPinInformation?.category}_grey.png`;

    markerOptions = {
      icon: { url },
    } as google.maps.MarkerOptions;
  });

The above section is working fine. i.e. initial Icon image

When the user clicked the Map pin I use an Info window like so: (Note: no issues with Info window and it is working fine.)

@ViewChild(MapInfoWindow) infoWindow: MapInfoWindow;

openInfoCard(marker: MapMarker, mapPinInformation: MapPinInformationModel): void {
    this.infoWindow.open(marker);

      marker.icon = { // I have tried to changed it here. But it is not working?
      url: `assets/images/pngs/mapPins/${mapPinInformation?.category}_blue.png`,
         }; 
   
    }

This is how I call the open info window:

<google-map [options]="location?.googleMap?.mapOptions" height="100%" width="100%">
  <map-marker
    #marker="mapMarker"
    *ngFor="let mapPinAddressMarkerPosition of location?.googleMap?.mapPinAddressMarkerPositions"
    [position]="mapPinAddressMarkerPosition?.markerPosition"
    [options]="location?.googleMap?.markerOptions"
    (mapClick)="openInfoCard(marker, mapPinAddressMarkerPosition?.mapPinInformation)"
  >
  </map-marker>

  <map-info-window [position]="position">
   
    <app-location-details
        [mapPinInformation]="mapPinInformation"
    >
    </app-location-details>
  </map-info-window>
</google-map>

Do you know how to do this?

CodePudding user response：

How awesome Typescript and VS code IntelliSense are. Just tried with few dots and it works now.

openInfoCard(marker: MapMarker, mapPinInformation: MapPinInformationModel): void {
   
    marker.marker.setIcon({
      url: `assets/images/pngs/mapPins/${mapPinInformation?.category}_blue.png`,
      
    });

    this.infoWindow.open(marker);
  }