I’m creating a web view page using the Google Maps API. I’ve completed the implementation, but I have a question regarding the marker cluster options that are not being updated.

this is CDN

<script src="https://unpkg.com/@googlemaps/markerclusterer@latest"></script>

this is my code

markers.push(marker);
                        
                        const clusterStyles = [
                              {
                                url: 'https://developers.google.com/maps/documentation/javascript/examples/clusterer/m3.png',
                                textColor: 'white',
                                textSize: 14,
                                width: 50,
                                height: 50,
                              },
                            ];

                            const clusterOptions = {
                              styles: clusterStyles,
                              gridSize: 50,
                              maxZoom: 15,
                              minimumClusterSize: 3,
                            };

                            const markerCluster = new markerClusterer.MarkerClusterer({ map, markers, clusterOptions });
                        google.maps.event.addListener(markers, 'clusterclick', onClusterClick);

i expected color change to marker cluster actually cotrolling cluster option

>Solution :

I successfully managed to customize the marker of a marker clusterer like this:

const yourCluster = new MarkerClusterer({
    map: yourMap,
    markers: yourMarkers, // yourMarkers.slice(0, 3) if you want to have multiple clusters on the same map
    renderer: {
        render: ({ markers, _position: position }) => {
            return new google.maps.Marker({
                position: {
                    lat: position.lat(),
                    lng: position.lng(),
                },
                label: {
                    text: String(markers.length),
                    color: "white",
                },
                icon: "/path/to/your/cluster-icon.png",
            });
        },
    },
});

Where:

const yourMap = new google.maps.Map(document.getElementById("your-google-maps-container"), {
    center: {
        lat: 46.1176208,
        lng: 14.8671412
    },
    zoom: 8.5,
    disableDefaultUI: true,
});