How to cluster Advanced Marker Element (google map) using Marker Clusterer?

Question

I have been trying to make AdvancedMarkerElement in google maps to working With MarkerCluster but it just doesnt work, I need to use AdvancedMarkerElement due to its high customization ability.

I needed an animated circle that pulsated, I did this with plain old google marker using inline svg and it worked initialy, but once the number of markers on the map exceed 200, they started to behave irregularly, sometimes they would load the svg and sometimes dont, there was no error in console log.

Then I read about AdvancedMarkerElement and got the requirements met partialy using an html Element and css I found on

https://codepen.io/peeke/pen/BjxXZa.

But now the advanced marker element it self doesnt cluster. I am using google map v3 and Marker Clusterer v3

This is my code for advanced marker element:

let markers=[]
async function initMap(){ 
const { Map } = await google.maps.importLibrary("maps");
    const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
    const myLatLng = { lat: 37.7749, lng: -122.4194 };

    const map = new Map(document.getElementById('map'), {
        zoom: 13,
        center: myLatLng,
        mapId: 'DEMO_MAP_ID'
    });

for (leti = 0; i <= 50; i++) {
        const randLat = myLatLng.lat + Math.random() * 0.1 - 0.05;
        const randLng = myLatLng.lng + Math.random() * 0.1 - 0.05;
        const latLng = new google.maps.LatLng(randLat, randLng);

        const marker = new AdvancedMarkerElement({
            position: latLng,
            map: map,
            content: buildContent()

        });

       markers.push(marker);
}
  const markerCluster = new markerClusterer.MarkerClusterer({map, markers});
}

function buildContent() {

    const content = document.createElement("div");

    content.className = 'custom-marker-elem';
    
    content.innerHtml = 'Hello World!'

    return content;
}

I hoped it would work like the google marker, but it should be an error in the console, the error was from the Marker Clusterer V3 Library.

t.getPosition() is not a function 

Answer 1

Download markerclusterer.js and edit it at: line 45 -> from:

    return bounds.extend(marker.getPosition());

to:

    return bounds.extend(marker.position);

line 52 -> from:

    return this.markers.filter((m) => m.getVisible()).length;

to:

    return this.markers.filter((m) => m.map);

lines 212,213 -> from:

    marker.getPosition().lng(),
    marker.getPosition().lat()

to:

    marker.position.j,
    marker.position.h

line 246 -> from:

    position: marker.getPosition()

to:

    position: marker.position

line 268 -> from:

    render({count, position}, stats) {

to:

    render(count, position, stats) {

line 405 -> from:

    cluster.marker = this.renderer.render(cluster, stats);

to:

    cluster.marker = this.renderer.render(cluster.markers.length, cluster.position, stats);