Google Map MarkerClusterer style

147 Views Asked by At

Im using this library https://www.npmjs.com/package/@googlemaps/markerclusterer for large amounts of markers using this code:

// create map               
var map = new google.maps.Map($el[0], args);
// add a markers reference
map.markers = [];
markers = map.markers;
var markerCluster = new markerClusterer.MarkerClusterer({map, markers});

And its working fine. But i need to change style for the Marker Clusterer or better use an svg. Cant find any example online.

1

There are 1 best solutions below

1
matt On

Solved like this:

var renderer = {
            render: ({ count, position }) =>
                new google.maps.Marker({
                    
                    label: {text: String(count), color: "white", fontSize: "12px"},
                    position,
                    icon: "/_assets/img/marker.svg",
                    // adjust zIndex to be above other markers
                    zIndex: Number(google.maps.Marker.MAX_ZINDEX) + count,
                }),
        };
        
        

        var markerCluster = new markerClusterer.MarkerClusterer({map, markers, renderer});