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

Hi the colors are defined by the images which came with the cluster.js file

Your images will range from m1.png to m5.png:

Just copy the images and make them all the color which you want

Answer 2

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('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-100 -100 200 200"><defs><g id="a" transform="rotate(45)"><path d="M0 47A47 47 0 0 0 47 0L62 0A62 62 0 0 1 0 62Z" fill-opacity="0.7"/><path d="M0 67A67 67 0 0 0 67 0L81 0A81 81 0 0 1 0 81Z" fill-opacity="0.5"/><path d="M0 86A86 86 0 0 0 86 0L100 0A100 100 0 0 1 0 100Z" fill-opacity="0.3"/></g></defs><g fill="' + color + '"><circle r="42"/><use xlink:href="#a"/><g transform="rotate(120)"><use xlink:href="#a"/></g><g transform="rotate(240)"><use xlink:href="#a"/></g></g></svg>');

        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:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-100 -100 200 200">
    <defs>
        <g id="a" transform="rotate(45)">
            <path d="M0 47A47 47 0 0 0 47 0L62 0A62 62 0 0 1 0 62Z" fill-opacity="0.7"/>
            <path d="M0 67A67 67 0 0 0 67 0L81 0A81 81 0 0 1 0 81Z" fill-opacity="0.5"/>
            <path d="M0 86A86 86 0 0 0 86 0L100 0A100 100 0 0 1 0 100Z" fill-opacity="0.3"/>
        </g>
    </defs>
    <g fill="#004b7a ">
        <circle r="42"/>
        <g>
            <use xlink:href="#a"/>
        </g>
        <g transform="rotate(120)">
            <use xlink:href="#a"/>
        </g>
        <g transform="rotate(240)">
            <use xlink:href="#a"/>
        </g>
    </g>
</svg>