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

.

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 

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 

• javascript
• google-maps
• google-maps-api-3
• markerclusterer
• google-maps-advanced-marker-element

• 5 github./googlemaps/js-markerclusterer/issues/508 – MrUpsidown Commented May 11, 2023 at 9:43
• [UPDATE] The github link that @MrUpsidown mented has now been closed. This means that the AdvancedMarker should be supported by now. – Yrll Commented Jun 1, 2023 at 8:14
• I have noticed there is a syntax error in your code in the for loop...it should be for (let i = 0; i <= 50; i++) {...} instead your code is for (leti = 0; i <= 50; i++) {...} notice you typed "leti" instead of "let i"...anyway I don't know if this can cause the error you get – Federico Tomasi Commented Aug 27, 2023 at 20:00
• That link at codepen doesn't work anymore too, – Josep Alacid Commented Jul 13, 2024 at 15:25

1 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);