Cluster does not work

[RuckieOfficial]

I tried to make cluster based on example that is not working either. https://react-google-maps-api-docs.netlify.app/#markerclusterer

os: Linux node --version 16.10 react version 17 @react-google-maps/api version 2.8.1

Is it still maintained, or there is new solution?

[JustFly1984]

@RuckieOfficial Docs are broken due to unmaintained packages and hasn't been updated since long time.. We are in need to replace docs app. Please try gatsby example.

[RuckieOfficial]

@JustFly1984 Unfortunately there is not example with marker cluster, not even with marker. If you mean this example: https://react-google-maps-api-gatsby-demo.netlify.app/

[RuckieOfficial]

@JustFly1984 Ah finally realised from broken docs that I map my locations too soon. I had code like this:

    {data &&
      data?.map((result) => {
        return (
          <MarkerClusterer options={clusterOptions} key={result.id}>
            {(clusterer) => (
              <Marker
                position={{
                  lat: result.place.latitude,
                  lng: result.place.longitude,
                }}
                onLoad={(marker) => markerLoadHandler(marker, result)}
                onClick={(event) => markerClickHandler(event, result)}
                icon={{ url: CustomMarker }}
                clusterer={clusterer}
              />
            )}
          </MarkerClusterer>
        );
      })}

And it should be like this:

    {data && (
      <MarkerClusterer options={clusterOptions}>
        {(clusterer) =>
          data.map((location) => {
            return (
              <Marker
                key={location.id}
                position={{
                  lat: location.place.latitude,
                  lng: location.place.longitude,
                }}
                onLoad={(marker) => markerLoadHandler(marker, location)}
                onClick={(event) => markerClickHandler(event, location)}
                icon={{ url: CustomMarker }}
                clusterer={clusterer}
              />
            );
          })
        }
      </MarkerClusterer>
    )}

Thank you anyway 🔥