fix: example for using cuterer with markers map

Author: Konrad Gorski

packages/react-google-maps-api/src/components/addons/GoogleMarkerClusterer.stories.tsx

@@ -50,15 +50,17 @@ const Template: ComponentStory<typeof GoogleMarkerClusterer> = (args) => {
   return (
     <GoogleMap mapContainerStyle={mapContainerStyle} zoom={3} center={center}>
       <GoogleMarkerClusterer {...args}>
-        {(clusterer) =>
-          locations.map((location) => (
-            <MarkerF
-              key={createKey(location)}
-              position={location}
-              clusterer={clusterer}
-            />
-          )) as any
-        }
+        {(clusterer) => (
+          <>
+            {locations.map((location) => (
+              <MarkerF
+                key={createKey(location)}
+                position={location}
+                clusterer={clusterer}
+              />
+            ))}
+          </>
+        )}
       </GoogleMarkerClusterer>
     </GoogleMap>
   )

packages/react-google-maps-api/src/components/addons/MarkerClusterer.md

@@ -49,13 +49,24 @@ function createKey(location) {
 const MapWithMarkerClusterer = () => {
   return (
     <ScriptLoaded>
-      <GoogleMap id='marker-example' mapContainerStyle={mapContainerStyle} zoom={3} center={center}>
+      <GoogleMap
+        id='marker-example'
+        mapContainerStyle={mapContainerStyle}
+        zoom={3}
+        center={center}
+      >
         <MarkerClusterer options={options}>
-          {(clusterer) =>
-            locations.map((location) => (
-              <MarkerF key={createKey(location)} position={location} clusterer={clusterer} />
-            ))
-          }
+          {(clusterer) => (
+            <>
+              {locations.map((location) => (
+                <MarkerF
+                  key={createKey(location)}
+                  position={location}
+                  clusterer={clusterer}
+                />
+              ))}
+            </>
+          )}
         </MarkerClusterer>
       </GoogleMap>
     </ScriptLoaded>

packages/react-google-maps-api/src/components/addons/MarkerClusterer.stories.tsx

@@ -2,7 +2,12 @@ import { ComponentStory, ComponentMeta } from '@storybook/react'
 import { GoogleMap, Marker } from '../..'
 import MarkerClusterer from './MarkerClusterer'
 
-import { ClustererOptions, ClusterIconInfo, ClusterIconStyle, MarkerExtended } from '@react-google-maps/marker-clusterer'
+import {
+  ClustererOptions,
+  ClusterIconInfo,
+  ClusterIconStyle,
+  MarkerExtended,
+} from '@react-google-maps/marker-clusterer'
 
 const mapContainerStyle = {
   height: '400px',
@@ -72,7 +77,11 @@ const largeClusterIconStyle: ClusterIconStyle = {
   textSize: 22,
 }
 
-const clusterIconStyles = [smallClusterIconStyle, mediumClusterIconStyle, largeClusterIconStyle]
+const clusterIconStyles = [
+  smallClusterIconStyle,
+  mediumClusterIconStyle,
+  largeClusterIconStyle,
+]
 
 const markerLengthToIndex = (length: number): number => {
   if (length >= 50) {
@@ -83,7 +92,9 @@ const markerLengthToIndex = (length: number): number => {
   return 1
 }
 
-const markerClustererCalculator = (markers: MarkerExtended[]): ClusterIconInfo => ({
+const markerClustererCalculator = (
+  markers: MarkerExtended[]
+): ClusterIconInfo => ({
   text: `${markers.length}`,
   index: markerLengthToIndex(markers.length),
   title: '',
@@ -105,11 +116,17 @@ const Template: ComponentStory<typeof MarkerClusterer> = (args) => {
   return (
     <GoogleMap mapContainerStyle={mapContainerStyle} zoom={3} center={center}>
       <MarkerClusterer {...args} options={markerClustererOptions}>
-        {(clusterer) =>
-          locations.map((location) => (
-            <Marker key={createKey(location)} position={location} clusterer={clusterer} />
-          )) as any
-        }
+        {(clusterer) => (
+          <>
+            {locations.map((location) => (
+              <Marker
+                key={createKey(location)}
+                position={location}
+                clusterer={clusterer}
+              />
+            ))}
+          </>
+        )}
       </MarkerClusterer>
     </GoogleMap>
   )

packages/react-google-maps-api/src/components/addons/MarkerClustererF.stories.tsx

@@ -1,8 +1,13 @@
 import { ComponentStory, ComponentMeta } from '@storybook/react'
 import { GoogleMap, Marker } from '../..'
-import { MarkerClustererF} from './MarkerClusterer'
+import { MarkerClustererF } from './MarkerClusterer'
 
-import { ClustererOptions, ClusterIconInfo, ClusterIconStyle, MarkerExtended } from '@react-google-maps/marker-clusterer'
+import {
+  ClustererOptions,
+  ClusterIconInfo,
+  ClusterIconStyle,
+  MarkerExtended,
+} from '@react-google-maps/marker-clusterer'
 
 const mapContainerStyle = {
   height: '400px',
@@ -72,7 +77,11 @@ const largeClusterIconStyle: ClusterIconStyle = {
   textSize: 22,
 }
 
-const clusterIconStyles = [smallClusterIconStyle, mediumClusterIconStyle, largeClusterIconStyle]
+const clusterIconStyles = [
+  smallClusterIconStyle,
+  mediumClusterIconStyle,
+  largeClusterIconStyle,
+]
 
 const markerLengthToIndex = (length: number): number => {
   if (length >= 50) {
@@ -83,7 +92,9 @@ const markerLengthToIndex = (length: number): number => {
   return 1
 }
 
-const markerClustererCalculator = (markers: MarkerExtended[]): ClusterIconInfo => ({
+const markerClustererCalculator = (
+  markers: MarkerExtended[]
+): ClusterIconInfo => ({
   text: `${markers.length}`,
   index: markerLengthToIndex(markers.length),
   title: '',
@@ -105,11 +116,17 @@ const Template: ComponentStory<typeof MarkerClustererF> = (args) => {
   return (
     <GoogleMap mapContainerStyle={mapContainerStyle} zoom={3} center={center}>
       <MarkerClustererF {...args} options={markerClustererOptions}>
-        {(clusterer) =>
-          locations.map((location) => (
-            <Marker key={createKey(location)} position={location} clusterer={clusterer} />
-          )) as any
-        }
+        {(clusterer) => (
+          <>
+            {locations.map((location) => (
+              <Marker
+                key={createKey(location)}
+                position={location}
+                clusterer={clusterer}
+              />
+            ))}
+          </>
+        )}
       </MarkerClustererF>
     </GoogleMap>
   )