Lag with huge amount of markers

[RaskaTheFurry]

We are trying to kinda limit test this component, so we have a huge cluster of markers in one area ( about 4500 ). The loading is of course slow, but that is expected. What is the problem is, that when trying to move the map, its very laggy, almost unusable. Marker clusters help, when viewing from further distance, but it adds to load time quite some and it lags a lot when at certain zoom, even when the markers are out of viewport.
My optimizations are of course, making the marker options into Optimized:true, then when dragging the map, the markers dont load ( via v-if ).
Is there any other way, the map could be optimized further? Maybe the freezing can be removed by drawing the markers asynchronously if possible?

Again, its just some limit testing of the map, how much we can go until its unusable and we would like to optimize it as much as we can so we can have as many markers as possible.

[HusamElbashir]

Hi @RaskaTheFurry

We have a dependency on @googlemaps/markerclusterer and it seems they introduced some changes to their default clustering algorithm that cause perf issues with a large number of markers:
googlemaps/js-markerclusterer#136
Perhaps you can use the old implementation to define your own algorithm and pass that in through options. Or if you use yarn or pnpm you can use the resolutions field in package.json to pin @googlemaps/markerclusterer to an older version.

Edit: You can also try switching to GridAlgorithm (import it from @googlemaps/markerclusterer and pass it in through options). Seems to perform better than the default algo.

[bdcoder2]

There is also the following option: https://github.com/bdcoder2/grid_clusterer

[vladyslav-mikhieiev]

Here the example

import {GridAlgorithm} from "@googlemaps/markerclusterer"

Cluster options:
const clusterOptions = { algorithm: new GridAlgorithm({gridSize: 50}) }

Vue
<MarkerCluster :options="clusterOptions">your markers</MarkerCluster>

Typescript docs: MarkerClustererOptions