无法在 google maps markerclusterer 中应用自定义图标进行聚类，因为无法提供 position 数据

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.