Markers clusterization, mobile version of map

src/components/ui/MapMarker.tsx

@@ -1,18 +1,39 @@
-import { AdvancedMarker, Pin } from "@vis.gl/react-google-maps";
+import { AdvancedMarker, Pin, useMap } from "@vis.gl/react-google-maps";
+import type { Marker } from "@googlemaps/markerclusterer";
+import IGMapPoi from "../../types/IGMapPoi";
 
 interface IGMapMarker {
-  key: string;
-  location: google.maps.LatLngLiteral;
+  markerKey: number;
+  poi: IGMapPoi;
+  setMarkerRef: (marker: Marker | null, key: string) => void | undefined;
   children: React.ReactNode;
 }
 
-export default function MapMarker({ key, location, children }: IGMapMarker) {
+export default function MapMarker({
+  markerKey,
+  poi,
+  setMarkerRef,
+  children,
+}: IGMapMarker) {
+  const map = useMap();
+
   return (
-    <AdvancedMarker key={key} position={location}>
+    <AdvancedMarker
+      onClick={() => {
+        map?.panTo(poi.location);
+        map?.setZoom(15);
+      }}
+      key={markerKey}
+      position={poi.location}
+      ref={(marker) =>
+        !poi.ignoreClusterization && setMarkerRef(marker, markerKey.toString())
+      }
+    >
       <Pin
         background={"transparent"}
         glyphColor={"transparent"}
         borderColor={"transparent"}
+        scale={poi.clickableAreaScale || 1}
       >
         {children}
       </Pin>