Performance degradation with large datasets

[patrykwojtasik]

Hi! After replacing @googlemaps/js-markerclustererplus we have noticed a massive slowdown when it comes to rendering and re-rendering marker clusters. This issue appears when there are more than 10k markers. With @googlemaps/js-markerclustererplus we were able to support up to 100k markers (I assume the older version calculated and rendered the markers within the viewport only).

Steps to reproduce

1. Run the defaults example with these adjustments:

const mapOptions = {
    center: { lat: 40.7128, lng: -73.85 },
    zoom: 5,
};
new Loader(LOADER_OPTIONS).load().then(() => {
    const element = document.getElementById("map");
    const map = new google.maps.Map(element, mapOptions);
    const markers = coords
        .map(points => new google.maps.Marker({
            position: {
                lat: +points[1],
                lng: +points[0],
            },
            map
    	}));
    const markerCluster = new MarkerClusterer({
        markers
    });
    markerCluster.setMap(map);
});

2. Setup large count of markers (e.g. 95k)
3. The map becomes more and more laggy with each zoom in.

MarkerClusterer gif (based on default example https://github.com/googlemaps/js-markerclusterer/blob/main/examples/defaults.ts):

NOTE: Using ScreenToGif which slows it down even more.

[amuramoto]

I believe this is because this newer @googlemaps/markerclusterer implements the clusters using google.maps.Marker instead of OverlayView which starts to see performance issues at ~400 markers. Are you getting the same results when the cluster size is increased?

[sander-lameco]

We are experiencing the same performance issue working with a dataset of 47000+ markers. Especially when zooming in the amount of clusters is making the page crash to the point the browser gives a notice the page is unresponsive.

If I try with a set of 100 markers it works pretty fluent.

[bdcoder2]

It is unfortunate that Marker objects were used as input to most clusterer solutions offered. A simple object containing a latitude, longitude and data key would cut down significantly on memory usage and would also boost performance.

Proof of Concept

[zsz-danzi]

now how to fix? I have the same problem

[kevgrig]

@zsz-danzi See https://github.com/googlemaps/js-markerclusterer/pull/640

[amuramoto]

Would any of you be able to try out 2.2.0-beta.2? It removes re-rendering of individual markers on zoom change, which should help performance. It's a first step. Also still looking at https://github.com/googlemaps/js-markerclusterer/pull/640

[zsz-danzi]

@kevgrig thanks https://github.com/googlemaps/js-markerclusterer/pull/640 can solve my problem. is so good.

[mwaddell]

@vicb noted in https://github.com/googlemaps/js-markerclusterer/pull/640#issuecomment-1589784026 that the cause of this performance degradation is actually the use of "legacy markers" and that using the newer "advanced markers" resolves this issue.

None of the markerclusterer documentation mentions advanced markers (yet) so I had never considered them, but they do fix the issue I was having without introducing the flicker that you see in #640 so it might be a better overall solution.