title: How to specify custom cluster marker for a Google map
body: <p>I have a Google map with markers placed, with clustering.</p>
  <p>I'm able to easily change the marker icon with code like this:</p>
  <pre><code>marker = new google.maps.Marker({
      position: {
          lat: location_data.lat,
          lng: location_data.lng
      },
      map: map,
      icon: img_url + 'map-marker.svg',
  });
  </code></pre>
  <p>However, I'm stuck on changing the cluster icon. This code works well to do the actual clustering:</p>
  <pre><code>const marker_clusterer = new markerClusterer.MarkerClusterer({
      map: map,
      markers: markers
  });
  </code></pre>
  <p>I've found code out there suggesting this:</p>
  <pre><code>const marker_clusterer = new markerClusterer.MarkerClusterer({
      map: map,
      markers: markers,
      renderer: {
          imagePath: img_url + 'map-cluster'
      }
  });
  </code></pre>
  <p>Where <code>map-cluster</code> is the prefix for a bunch of files e.g. <code>map-cluster1.svg</code>. This gives me the error: 'Uncaught TypeError: e.renderer.render is not a function'.</p>
  <p>I've also tried this:</p>
  <pre><code>const marker_clusterer = new markerClusterer.MarkerClusterer({
      map: map,
      markers: markers,
      renderer: {
          styles: [{
              url: img_url + 'map-cluster1.svg',
          }]
      }
  });
  </code></pre>
  <p>I get the same error again for this.</p>
  <p>There are other code examples which don't seem to bear any relation to the code I'm already working with, heaps of custom objects (e.g. <a href="https://gabrielwadi.medium.com/custom-cluster-marker-for-google-maps-how-to-8a7b858e2879" rel="nofollow noreferrer">https://gabrielwadi.medium.com/custom-cluster-marker-for-google-maps-how-to-8a7b858e2879</a>). The API docs just point to this kind of unhelpful page: <a href="https://googlemaps.github.io/js-markerclusterer/interfaces/MarkerClustererOptions.html#renderer" rel="nofollow noreferrer">https://googlemaps.github.io/js-markerclusterer/interfaces/MarkerClustererOptions.html#renderer</a> I guess I'm not specifying the custom 'renderer' properly, but all the code samples I've found are either simple and don't work (above), or too complex for me to know where to begin.</p>
  <p>Does anyone have any pointers? I'm referencing <a href="https://maps.googleapis.com/maps/api/js" rel="nofollow noreferrer">https://maps.googleapis.com/maps/api/js</a> as my main API script, and <a href="https://unpkg.com/@googlemaps/markerclusterer/dist/index.min.js" rel="nofollow noreferrer">https://unpkg.com/@googlemaps/markerclusterer/dist/index.min.js</a> for clustering.</p>