The documentation for this utility make no sense to me. According to this and this, you can customise cluster icons by first converting the cluster icon to a marker via the MarkerClusterer's renderer property, and then apply icon styles as you would a normal marker. However, a new google.maps.Marker requires a position property to work - a ``property I don't have access to. I have access to the individual positions of individual marker locations, but the whole point of using the marker clustering functionality is that is calculates a mid-point for you.

How can I render the cluster in the correct position, if I don't know the position? I can access a _position property on the stats prop, but that throws an error:

Cannot read properties of undefined (reading 'addListener')

I'm really lost as to what to do here, because there don't seem to be many reliable examples out there. As far as I can tell, I'm following the example set out in their github.

private createClusteredMarkerMap() {
  new this._GoogleMaps.load((google) => {
    let map = new google.maps.Map(this._map, mapOptions);
    const markers = this._locations.map(({ lat, long }) => {
      // loop and extract lat/lng
    });

    new markerClusterer.MarkerClusterer({
      map,
      markers,
      renderer: {
        render: (clusters, stats) => {this.testRenderer(clusters, stats)} // trying to edit the icons here
      }
    });
  });
}

private testRenderer(clusters, stats) {
  const svg = // create svg here
  return new google.maps.Marker({
// position is required here but I don't have that value
    icon: {
      url: `data:image/svg+xml;base64,${svg}`,
      scaledSize: new google.maps.Size(45, 45),
    },
    label: {
      text: String(stats.count),
      color: "rgba(255,255,255,0.9)",
      fontSize: "12px",
    },
  });
}