Getting Google Map MarkerClusterer Plus Icons In One Color

Question

Can some one please let me know how to set MarkerClusterer plus to show all Clusters in One color? as you can see the MarkerClusterer automatically changes the color of the

Answer 1

I had similar problem. Solution: develop a function with color parameter which generates inline svg icon. It's not so difficult to reverse engineer it with basic shapes:

 var getGoogleClusterInlineSvg = function (color) {
        var encoded = window.btoa('');

        return ('data:image/svg+xml;base64,' + encoded);
    };

var cluster_styles = [
        {
            width: 40,
            height: 40,
            url: getGoogleClusterInlineSvg('blue'),
            textColor: 'white',
            textSize: 12
        },
        {
            width: 50,
            height: 50,
            url: getGoogleClusterInlineSvg('violet'),
            textColor: 'white',
            textSize: 14
        },
        {
            width: 60,
            height: 60,
            url: getGoogleClusterInlineSvg('yellow'),
            textColor: 'white',
            textSize: 16
        }
        //up to 5
    ];

//...

 markerClusterer = new MarkerClusterer(map, markers, {
            //...
            styles: cluster_styles
        });

SVG source: