title: Google map cluster custom image
body: <p>I would like to change google map clustering with custom image. However, it does not change anything I provide. This initMap function is </p>
  
  <blockquote>
    <p><a href="https://developers.google.com/maps/documentation/javascript/marker-clustering" rel="noreferrer">https://developers.google.com/maps/documentation/javascript/marker-clustering</a></p>
  </blockquote>
  
  <p>And I tried to change the cluster image with some random image from google. 
  However, it does not render anything.</p>
  
  <p>Cluster does not support custom cluster image  ?? </p>
  
  <pre><code>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'});
        }
  </code></pre>
  
  <p>Thanks for help @henrisycip</p>
  
  <p>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 .. </p>
  
  <pre><code> 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
                }
              ]}
  </code></pre>