I have to display around 15.000 markers on a Google Map.
To avoid performance issues I implemented a clustered solution.
The framework that I'm using is angular12 with @angular/google-maps.
The cose is preatty simple:
<div class="map-wrapper">
<google-map
#googleMap="googleMap"
width="100%"
height="100%"
[center]="mapCenter"
[zoom]="mapZoom"
[options]="mapOptions"
(boundsChanged)="onZoomChange()"
>
<map-marker-clusterer
*ngIf="!loading"
(clusterClick)="onTransformersClusterMapClick($event)"
[options]="markerClustererOptions"
[imagePath]="transformersMarkerClustererImagePath">
<map-marker
#marker="mapMarker"
*ngFor="let marker of markerList; let i = index"
[title]="marker.title"
[position]="{lat: +marker.lat, lng: +marker.lng}"
(mapClick)="openInfoWindow(marker, i)"
[options]="markerOptions"
></map-marker>
</map-marker-clusterer>
</google-map>
</div>
However even on the first load with a big zoom out it takes minutes to show a single cluster of 15.000 markers. Can't tell you if I try to zoom as it almost freezes.
Trying instead a React App with google maps and supercluster package (didn't find a way to implement supercluster on angular) it takes less than a second to render a single cluster of 15.000 markers.
Is there something wrong with my angular google maps implementation, or is it just google maps api wrong?
Can I use supercluster on angular google maps?