I am struggling to understand the documentation for this utility. It seems that to customize cluster icons, I need to convert the cluster icon to a marker using the MarkerClusterer's renderer property and then apply icon styles as if it were a normal marker. However, creating a new marker requires a position property which I do not have access to. While I can access individual marker positions, the whole point of using marker clustering is to calculate a midpoint for the cluster.
How can I render the cluster in the correct position without knowing the position? I have access to a _position property in the stats object, but this results in an error:
Cannot read properties of undefined (reading 'addListener')I am confused and unsure of what to do next, as there are not many reliable examples available. I believe I am following the example provided in their GitHub repository.
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)}
}
});
});
}
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",
},
});
}