MarkerClusterer.renderer is not supporting multiple AdvancedMarkerElement, still use deprecated Marker

[polyakz]

I am using the: "@googlemaps/markerclusterer": "^2.5.3"

I have encountered the following issues:

I am trying to render AdvancedMarkerElement within the MarkerClusterer initialization phase, but I don't want to use the Marker class because this has become deprecated.

const config = {
    map: this.map,
    markers: this.markers,
    algorithm: new SuperClusterAlgorithm({radius: 16, zoom: 8}),
    renderer: {
        render:  ({ count, position }) =>
            new AdvancedMarkerElement({
                title: String(count),
                position: position,
                content: customContent
            })
    }
}

new MarkerClusterer(config);

The issue is within the AdvancedMarkerElement.content, as it is written in the property's comment:

The DOM Element backing the visual of an AdvancedMarkerElement. Note: AdvancedMarkerElement does not clone the passed-in DOM element. Once the DOM element is passed to an AdvancedMarkerElement, passing the same DOM element to another AdvancedMarkerElement will move the DOM element and cause the previous AdvancedMarkerElement to look empty.

This leads to a rendering issue, where I can only render one custom AdvancedMarkerElement. I also don't want to use the old Marker, but there are no alternatives at the moment, so I have to use a deprecated method.

Please consider supporting multiple AdvancedMarkerElement (some way) within the MarkerClusterer or comment me a workaround!

Thank you!

[AskaHD]

Hello, i've just seen your issue and thanks to it i was able to find a workaround : you have to generate your customContent each time you generate a marker.

In my example, INSIDE my marker generating loop, i have

// inside for each loop
const icon = document.createElement('img')
icon.src = document.location.origin + '/assets/img/icons/map-marker-28x38.png'
// ...
marker = new google.maps.marker.AdvancedMarkerElement({
  position: latLng,
  content: icon,
  title: el.city + ' : ' + title,
  gmpClickable: true
})