troubles with google maps marker clustering

Question

On a React project we have a Google Maps API with interactible markers, but we failed to implement marker clustering on our project. The imports:

import GoogleMap from "google-maps-react-markers";
import { MarkerClusterer } from "@react-google-maps/api";
import Marker from "./marker";

The Google Map API code for our project:

<div className="map-container" ref={mapRef}>
        <GoogleMap
          apiKey=
          defaultCenter={{ lat: 20, lng: 20 }}
          defaultZoom={14}
          onGoogleApiLoaded={onGoogleApiLoaded}
          onChange={onMapChange}
        >
          {renderedMarkers}
        </GoogleMap>
</div>

The code for marker:

const renderedMarkers = filteredMarkersByTags.map(
    (
      { lat, lng, name, variant, email, description, image, date, tag, _id },
      index
    ) => {
      if (showMyEntries && email !== profile.email) {
        return null;
      }

      return (
        <Marker
          key={index}
          lat={lat}
          lng={lng}
          markerId={name}
          variant={variant}
          markerVariant={variant}
          markerDescription={description}
          markerEmail={email}
          markerDate={date}
          petImage={image}
          markerTags={tag}
          dbID={_id}
          onClick={onMarkerClick}
          className="marker"
        />
      );
    }
  );

when we zoom out, the markers still remain as individuals instead of clustering for a cleaner viewing experience, thanks in advance to aynone who can help

<MarkerClusterer 
   averageCenter enableRetinaIcons gridSize={60}>
   { renderedMarkers }
</MarkerClusterer>

We made an attempt to see whether the default clustering methods work or not, so tried this segment to see whether it would cluster the markers or not. Only output we've got is a "Script error" from this attempt.

Answer 1

The documentation of mentioned @react-google-maps/api library is not detailed enough. I found the example with marker clusterer and I think the renderedMarkers should be a function and look the following way:

(clusterer) => (
  <>
    {filteredMarkersByTags.map(
    ({ lat, lng, name, variant, email, description, image, date, tag, _id }, index) => {
      if (showMyEntries && email !== profile.email) {
        return null;
      }

      return (
        <Marker
          key={index}
          lat={lat}
          lng={lng}
          clusterer={clusterer}
          position={{lat: lat, lng: lng}}
          markerId={name}
          variant={variant}
          markerVariant={variant}
          markerDescription={description}
          markerEmail={email}
          markerDate={date}
          petImage={image}
          markerTags={tag}
          dbID={_id}
          onClick={onMarkerClick}
          className="marker"
        />
      );
    }
  )}
  </>
)

Pay attention to two new attributes clusterer and position (in the mentioned example Marker receives the position object instead of two separate parameters lat and lng).

If it doesn't help I would suggest using the official @googlemaps/markerclusterer library. Here is documentation