Search code examples
reactjsgoogle-mapsreact-google-maps-api

Markers disappear when I add `clusterer` to them. @react-google-maps/api

I'm trying to use MarkerClustererF from @react-google-maps/api to cluster markers.

My render looks like this:

<MarkerClustererF>
    {(cluster) => (
      <>
        {deliveryPendingPositions.map((position, index) => {
          return (
            <MarkerF position={position} key={index} clusterer={cluster} />
          );
        })}
      </>
    )}
</MarkerClustererF>

My deliveryPendingPositions has the following format:

[
    {
      lat: 46.545022,
      lng: 15.653008,
    },
    {
      lat: 46.547034,
      lng: 15.660935,
    }
]

My markers work normally if I don't add the clusterer props to them, but as soon as I add it my markers disappear and no clusterers appear.

Without clusterer:

enter image description here

With clusterer:

enter image description here

Could someone explain what I'm doing wrong? Why do my markers disappear and why can't I see any marker clusterers?

Solution

  • MarkerClustererF doesn't work well with Next.js in strict mode.

    Refer to this issue on GitHub.