react-google-maps-api: MarkerClusterer is broken in latest update

Please provide an explanation of the issue

My old code throws an error after the last update

      <MarkerClusterer
        options={{
          imagePath: "https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m",
        }}
      >
        {(clusterer: Clusterer) =>
          warehouseData.map(warehouse => (
            <MemoMarker
              key={warehouse.Ref}
              position={{
                lat: Number(warehouse.Latitude),
                lng: Number(warehouse.Longitude),
              }}
              clusterer={clusterer}
              onClick={(): void => {
                onSelect(warehouse);
                setWarehouse(warehouse);
              }}
            />
          ))
        }
      </MarkerClusterer>

Not sure how to fix and can’t find anything related in the changelog

Your Environment

os: mac

node --version 16

react version 17

About this issue

Original URL
State: closed
Created 2 years ago
Reactions: 10
Comments: 15 (6 by maintainers)

Most upvoted comments

I hate to be the bearer of bad news, but this seems broken again in 2.12.1.

jantoine1 on Jul 23, 2022

Adding a fragment solved the typescript error for me. But hover or click event does not work anymore using the latest version v2.10.2. Had no problems with v2.8.1 @JustFly1984 .

fde312 on May 10, 2022

Since you can’t return JSX.Element[] from the clusterer function, try wrapping the output in a fragment, like:

<MarkerClusterer
    options={{
        imagePath: "https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m",
    }}
>
    {(clusterer: Clusterer) => (
        <>
            warehouseData.map(warehouse => (
                <MemoMarker
                    key={warehouse.Ref}
                    position={{
                        lat: Number(warehouse.Latitude),
                        lng: Number(warehouse.Longitude),
                    }}
                    clusterer={clusterer}
                    onClick={(): void => {
                        onSelect(warehouse);
                        setWarehouse(warehouse);
                    }}
                />
            ))
        </>
    )}
</MarkerClusterer>

addy on May 3, 2022