Google Maps Api v3, custom Cluster icon

Question

how can i change cluster icon? i wolud like to have same icon, with some other color than blue.

Answer 1

You need to use styles parameter when initializing MarkerClusterer object - the code below shows default styles so if you want to recolour one of the icons just change the relevant url to your image...

//set style options for marker clusters (these are the default styles)
mcOptions = {styles: [{
height: 53,
url: "http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/images/m1.png",
width: 53
},
{
height: 56,
url: "https://github.com/googlemaps/js-marker-clusterer/tree/gh-pages/images/m2.png",
width: 56
},
{
height: 66,
url: "https://github.com/googlemaps/js-marker-clusterer/tree/gh-pages/images/m3.png",
width: 66
},
{
height: 78,
url: "https://github.com/googlemaps/js-marker-clusterer/tree/gh-pages/images/m4.png",
width: 78
},
{
height: 90,
url: "https://github.com/googlemaps/js-marker-clusterer/tree/gh-pages/images/m5.png",
width: 90
}]}

//init clusterer with your options
var mc = new MarkerClusterer(map, markers, mcOptions);

Answer 2

Google changed his repo. Latest cluster repo is: https://github.com/googlemaps/js-marker-clusterer images : https://github.com/googlemaps/js-marker-clusterer/tree/gh-pages/images

You may also consider downloading source and give link from your local path. This way you will have more control of resources your application needs.

local_path "/pucblic/"
mcOptions = {styles: [{
height: 53,
url: local_path+"m1.png",
width: 53
},
{
height: 56,
url: local_path+"m2.png",
width: 56
},
{
height: 66,
url: local_path+"m3.png",
width: 66
},
{
height: 78,
url: local_path+"m4.png",
width: 78
},
{
height: 90,
url:  local_path+"m5.png",
width: 90
}]}

Answer 3

A shortcut is overriding the image path like this:

MarkerClusterer.prototype.MARKER_CLUSTER_IMAGE_PATH_ = 
    "https://raw.githubusercontent.com/googlemaps/v3-utility-library/master/markerclustererplus/images/m";

Answer 4

Here are the original photos

markerClusterOptions = {styles: [{
    height: 53,
    url: "https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m1.png",
    width: 53
    },
    {
    height: 56,
    url: "https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m2.png",
    width: 56
    },
    {
    height: 66,
    url: "https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m3.png",
    width: 66
    },
    {
    height: 78,
    url: "https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m4.png",
    width: 78
    },
    {
    height: 90,
    url: "https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m5.png,
    width: 90
    }]}
    markerCluster = new MarkerClusterer(map, markers,markerClusterOptions);

Answer 5

Here is the code, to create the custom icons for cluster

const algorithm = new SuperClusterAlgorithm({
        maxZoom: this.maxZoom,
        radius: 150,
        minZoom: 0,
        zoomOnClick:false
      });
const renderer = {
        render: function ({ count, position }) {
            return new google.maps.Marker({
                label: {text: count.toString(), color: 'white', fontSize: '12px'},
                position,
                icon: 'icon1.png',
                title: 'Zoom in to view resources in this area',
                // adjust zIndex to be above other markers
                zIndex: Number(google.maps.Marker.MAX_ZINDEX) + count,
            });
        }
    };
     
      this.markerCluster = new MarkerClusterer({
        map: this.map,
        markers: this.markers,
        algorithm: algorithm,
        renderer:renderer
      });