I want to change the cluster icon to click event

Using googlemapsAPI to view clusters.
I want to change the icon when I click on the cluster, but it doesn't change.
I am referring to the following.
https://googlemaps.github.io/v3-utility-library/classes/_google_markerclustererplus.markerclusterer.html#setimagepath
In clusterMarker.getImagePath(), /orange.svg has been retrieved.
clusterMarker.setImagePath("/red.svg"> The object has been changed to /red.svg but is not reflected in the icon on the map

Thank you for your cooperation.

//Single marker
singleMarkersList=markerList.map((marker,i)=>{
    const singleMarker = new google.maps.Marker({
    position: marker.position,
    info: marker.info,
    icon —createSingleMarker ("orange")
    })

    // Single marker click event grant
    singleMarker.addListener("click",(e)=>{
    togglearkerImage(singleMarker);
    showMarkerInfo ([singleMarker]);
    });

    return singleMarker
});

// cluster marker
clusterMarker = newMarkerCluster(map, singleMarkersList, {
    imageExtension: "svg",
    // Do not zoom when clicking on a cluster
    zoomOnClick: false,
    styles:[{
    url: "/orange.svg",
    }]
});

// Grant event when clicking cluster icon
google.maps.event.addListener(clusterMarker, "clusterclick", (cluster)=>{
    clusterMarker.setImagePath("/red.svg");
});

javascript google-maps

2022-09-30 19:57

1 Answers

Self-Solving Notes

// Cluster style definition
constclusterMarkerOptions={
    imageExtension: "svg",
    styles:[{
      url: "icon-red.svg",
    }, {
      url: "icon-orange.svg",
    },
}

    // single marker
singleMarkersList=markerList.map((marker,i)=>{
    const singleMarker = new google.maps.Marker({
    position: marker.position,
    })

    return singleMarker
});

    // cluster marker drawing
    clusterMarker = new MarkerCluster(map, singleMarkersList, clusterMarkerOptions);
    clusterMarker.setCalculator({
            text: "Cluster label text", 
            // icon-red.svg appears
            index:1
      });
  

 // Grant event when clicking cluster icon
    google.maps.event.addListener(clusterMarker, "clusterclick", ()=>{
      clusterMarker.setCalculator({
            text: "Cluster label text", 
            // icon-red.svg appears
            index:2
      });
    clusterMarker.redraw_();
    });

2022-09-30 19:57

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656