React googlemaps - issue with marker & marker clusterer

Question

So I am using https://www.npmjs.com/package/@react-google-maps/api and I wanted to add a marker clusterer into my app. I tried using the Marker and MarkerClusterer tags, which the library provides, but because I had to map over an array of about 9000 objects and create a marker for each one, it caused a stack error. ERROR MESS HERE. Code below (dealers is basically the database with 9000 objects):

<MarkerClusterer
  imagePath={"../pics/markerClustererImages/m"}
  gridSize={90}
  title={"Click to zoom"}
  maxZoom={13}
  minimumClusterSize={3}
  onLoad={() => {
    mapInstance.fitBounds(mapBounds);
  }}
>
  {(clusterer) =>
    dealers.map((dealer) => (
      <Marker
        key={dealer.id}
        position={{ lat: dealer.content.lat, lng: dealer.content.lng }}
        clusterer={clusterer}
        onLoad={(marker) => {
          mapBounds.extend({
            lat: marker.position.lat(),
            lng: marker.position.lng(),
          });
          marker.addListener("click", () => {
            mapInstance.panTo(marker.getPosition());
            props.handleMarkerOnClick(dealer);
          });
        }}
      />
    ))
  }
</MarkerClusterer>

This produced only sort of desired results. Result here. The visual side worked well but I needed to filter all of these markers dynamically (I've got an autocomplete search and country selection filter). Therefore I had the dealers database saved in a Redux store. But when I dispatched any changes to the dealers "state", it crashed. I tried to find different solutions but unfortunately, I found out that the library itself isn't exactly great at handling large amounts of Markers.

Which is why I decided I would try using the native Google API. (markersInfo is literally the same data as dealers in the example above, just renamed)

let markers = [];
markersInfo.map((dealer) => {
  let latLng = new window.google.maps.LatLng(
    dealer.content.lat,
    dealer.content.lng
  );
  let marker = new window.google.maps.Marker({
    position: latLng,
  });
  marker.addListener("click", () => {
    // handleMarkerOnClick(dealer);
    // map.setZoom(8);
    map.panTo(marker.getPosition());
  });
  markers.push(marker);
});
const markerCluster = new MarkerClusterer(map, markers, {
  imagePath:
    "https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m"
});

This failed on 2 different levels. First of all, I wasn't able to set the imagePath to locally saved images as google recommends and secondly, the clusters are broken. Visual as to how here: As you can see, the numbers aren't displayed in the center of the picture. The docs aren't very specific as to why or how this could occur. So I wanted to ask if anybody has any tips on how to solve this issue.

Answer 1

For the broken cluster icons (ClustererMarkerPlus version), you can style them by creating a MarkerClustererOptions and defining the styles, you can tweak the anchorText and anchorIcon to your linking and set the options to your cluster.

export class MyCustomClusterIconStyle implements ClusterIconStyle { 
  anchorText: [number, number] = [14, 0]; 
  anchorIcon?: [number, number]; 
  //...etc
}

Answer 2

I managed to solve it myself. I had to use the older version of markerclusterer (nonplusversion), which actually isn't recommended by Google docs themselves. The package which worked for me is linked below: https://www.npmjs.com/package/@google/markerclusterer Hopefully, someone might find this helpful one day.