Google map cluster custom image

Question

I would like to change google map clustering with custom image. However, it does not change anything I provide. This initMap function is

https://developers.google.com/maps/documentation/javascript/marker-clustering

And I tried to change the cluster image with some random image from google. However, it does not render anything.

Cluster does not support custom cluster image ??

function initMap() {

        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 3,
          center: {lat: -28.024, lng: 140.887}
        });

        // Create an array of alphabetical characters used to label the markers.
        var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';

        // Add some markers to the map.
        // Note: The code uses the JavaScript Array.prototype.map() method to
        // create an array of markers based on a given "locations" array.
        // The map() method here has nothing to do with the Google Maps API.
        var markers = locations.map(function(location, i) {
          return new google.maps.Marker({
            position: location,
            label: labels[i % labels.length]
          });
        });

        // Add a marker clusterer to manage the markers.
        var markerCluster = new MarkerClusterer(map, markers,
            {imagePath: 'http://www.empowervate.org/wp-content/uploads/2015/11/circle.jpg'});
      }

Thanks for help @henrisycip

I was able to change cluster image by providing styles option which is like below. I am not sure why imagePath does not do anything ..

 styles={[
              {
                url: "/static/images/cluster/m1.png",
                height: 53,
                width: 53
              },
              {
                url: "/static/images/cluster/m2.png",
                height: 53,
                width: 53
              },
              {
                url: "/static/images/cluster/m3.png",
                height: 53,
                width: 53
              },
              {
                url: "/static/images/cluster/m4.png",
                height: 53,
                width: 53
              },
              {
                url: "/static/images/cluster/m5.png",
                height: 53,
                width: 53
              }
            ]}

Solution 1

There's a specific way those images are loaded and it's because of the markerclusterer.js library that's linked to the sample code.

It will look at the imagePath you provided but it will be iterated upon, looking for image1, image2, image3, etc. That's why the default path of https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m works because it will start looking for m1.png, m2.png, m3.png etc.

Here's the part of the library that says it's doing that:

'imagePath': (string) The base URL where the images representing
 *                  clusters will be found. The full URL will be:
 *                  {imagePath}[1-5].{imageExtension}
 *                  Default: '../images/m'.

Check your console and I'm sure you're getting something like this:

GET http://www.empowervate.org/wp-content/uploads/2015/11/circle.jpg1.png 404 (Not Found)

Everything you need to know is actually on the documentation. You'll see that there's an instruction to download a copy of markerclusterer.js, m1.png, m2.png, etc. and just change the paths to your own folder structure.

An example of your image path would be: imagePath: 'http://www.empowervate.org/wp-content/uploads/2015/11/circle' provided you have circle1.png, circle2.png, etc.

You can also check this previous question as well: Add custom image to Marker Cluster without overwriting markers

Solution 2

Simple solution can be appending image url with question mark.

imagePath: '<image_url>?'

Another solution can be setting custom styles like

  new MarkerClusterer(map, marker, {
    styles: [
      {
        url: '<image_url>'
      }
    ]
  })