Custom clustering algoritm

I'm having similar issues and hesitant to even offer this advice because using the (as you say) undocumented GoogleMarkerClusterer component seems to lack a lot of the useful props like onLoad that some other bug workarounds require from my searching so far, but if you want to use GoogleMarkerClusterer and send options like the one you asked about, you can do so like this:

import React from "react";
import { GridAlgorithm } from "@googlemaps/markerclusterer";
import { GoogleMarkerClusterer } from "@react-google-maps/api";

// ... define myRenderFunction if you want a custom renderer...

const CLUSTER_OPTIONS = {
  algorithm: new GridAlgorithm({ maxZoom: 15 }), // or what have you
  renderer: { render: myRenderFunction },  // define myRenderFunction if you want a custom renderer
};

const MyCustomClusterer = props => {
  const { children } = props;

  return (
    <GoogleMarkerClusterer options={CLUSTER_OPTIONS}>
      { (clusterer) => (children(clusterer)) }
    </GoogleMarkerClusterer>
  );
};

Usage:


<MyCustomClusterer>
  {
    (clusterer) => (
      items.map(item => (
        <MyCustomMarker
          key={`marker-${item.key}`}
          item={item}
          // Be sure to set this on the actual marker in MyCustomMarker...
          clusterer={clusterer} 
        />
      ))
    )
  }
</MyCustomClusterer>

JustFly1984 / react-google-maps-api

Custom clustering algoritm #2905