Unable to apply custom icons for clustering in google maps markerclusterer because unable to provide position data

Question

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",
    },
  });
}

Answer 1

const renderer = {
  render({ count, position }) {
    return new google.maps.Marker({
      label: { text: String(count), color: "white", fontSize: "12px" },
      position,
      icon: "url to the file",
      // adjust zIndex to be above other markers
      zIndex: Number(google.maps.Marker.MAX_ZINDEX) + count,
    })
  }
}

// pass your function to the markerCluster constructor
const cluster = new MarkerClusterer({map, markers, renderer})

Answer 2

Missing a return statement on the render method. High fives all round.