Performance issue with MarkerCluster with a large number of marker

I'm submitting a ... (check one with "x")

[ ] question
[x] any problem or bug report

OS: (check one with "x")

[x] Android
[x] iOS
[ ] Browser

cordova information: (run $> cordova plugin list)

cordova-admob-sdk 0.24.1 "AdMob SDK"
cordova-plugin-admob-free 0.27.0 "Cordova AdMob Plugin"
cordova-plugin-googlemaps 2.7.1 "cordova-plugin-googlemaps"
cordova-plugin-inapppurchase-fixed 1.1.0 "In App Purchase"
cordova-plugin-splashscreen 6.0.0 "Splashscreen"
cordova-plugin-statusbar 2.4.3 "StatusBar"
cordova-plugin-whitelist 1.3.4 "Whitelist"
cordova-promise-polyfill 0.0.2 "cordova-promise-polyfill"
nl.madebymark.share 0.1.1 "Share"

Current behavior: Hey! I have a (overview)map with 5000+ marker in a cluster. It's a map with surf spots. I also have a page for every single surf spot with a map with just one marker. When i open the overview map with the marker cluster and click on a marker to go to the single surf spot page, i have a 10 second delay before the map on the single page is loading. I think closing the map with the 5000+ marker needs to much time. If i do the workaround twice, the map on the spot page doesn't load any more.

Expected behavior: The map should load (faster). What's the best way to handle the amount of marker?

Screen capture or video record: [Android] YouTube on a Samsung Galaxy A50 with Android 10

Related code, data or error log (please format your code or data):

var mapDiv = document.getElementById("map");

map = plugin.google.maps.Map.getMap(mapDiv, {
mapType: plugin.google.maps.MapTypeId.ROADMAP,
camera: {target: myLocation, zoom: 7},
controls: {compass: false, myLocation: true, myLocationButton: false, indoorPicker: false,zoom: false},
gestures: {scroll: true, tilt: false, rotate: false, zoom: true}
});

plugin.google.maps.LocationService.getMyLocation({enableHighAccuracy: true}, function(location) {map.animateCamera({target: location.latLng, zoom: 7})});

var markerArray = [];
for (var j=0;j<spots.length;j++){
markerArray.push({position: {lat: spots[j].la, lng: spots[j].lo}, title: spots[j].n, icon: {url: markerIcon, size: {width:22,height:30}}, sid: spots[j].id});
}

map.on(plugin.google.maps.event.MAP_READY, function(){
markerCluster = map.addMarkerCluster({
boundsDraw: false,
markers: markerArray,
icons: [
{min: 2, max: 10, url: clusterIcon, size: {width:40,height:40}, label: {bold: true,fontSize: 14,color: "#ffffff"}},
{min: 10, max: 100, url: clusterIcon, size: {width:50,height:50}, label: {bold: true,fontSize: 15,color: "#ffffff"}},
{min: 100, url: clusterIcon, size: {width:60,height:60}, label: {bold: true,fontSize: 16,color: "#ffffff"}}
]
});
markerCluster.on(plugin.google.maps.event.MARKER_CLICK, function (position, marker) {
marker.on(plugin.google.maps.event.INFO_CLICK, function () {
mainView.router.navigate('/spot/'+marker.get("sid"),{reloadCurrent:true});
});
});
});

//when i leave the page i do map.remove()

mapsplugin / cordova-plugin-googlemaps

Performance issue with MarkerCluster with a large number of marker #2849