You can now pass your own renderer to your MarkerClusterer Object which returns a google.maps.Marker like this:
const renderer = {
render({ count, position }) {
return new google.maps.Marker({
label: { text: String(count), color: "white", fontSize: "10px" },
position,
// adjust zIndex to be above other markers
zIndex: Number(google.maps.Marker.MAX_ZINDEX) + count,
});
}
}
// use this if you use NPM version
const markerCluster = new MarkerClusterer({ map, markers, renderer });
// Use this if you use the CDN version
// const markerCluster = new markerClusterer.MarkerClusterer({ markers, map , renderer});
Inside the render method, you can customize the cluster maker the same way you would customize normal marker. See https://developers.google.com/maps/documentation/javascript/custom-markers for more details. For example, if you just want to add a specific icon.png you could do it like this:
const icon = {
url: '/path/to/your/icon.png',
scaledSize: new google.maps.Size(50, 50),
};
const renderer = {
render({ count, position }) {
return new google.maps.Marker({
label: { text: String(count), color: "white", fontSize: "10px" },
position,
icon,
// adjust zIndex to be above other markers
zIndex: Number(google.maps.Marker.MAX_ZINDEX) + count,
});
}
}
You can also find some clustor marker render example at https://googlemaps.github.io/js-markerclusterer/public/renderers/
See https://developers.google.com/maps/documentation/javascript/marker-clustering for a full example how to setup MarkerCluster.
History Details:
The MarkerCluster library has been rewritten in 2021. One goal was to change the render process. The cluster icon itself is now a google.maps.Marker and can thus be styled just as normal marker. The mcOptions
in the constructor is gone.
The proposed design is to encapsulate the logic for clustering and rendering into interfaces that the developer can extend specifically algorithm and renderer. The algorithm computes the clusters and the renderer generates a google.maps.Marker to represent clusters instead of using a google.maps.OverlayView.