[feat] added clustering

api/maps/AddMarkers.tsx

@@ -1,4 +1,6 @@
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
+import { MarkerClusterer } from '@googlemaps/markerclusterer';
+import { useMap } from '@vis.gl/react-google-maps';
 import ProjectModal from '@/components/ProjectModal';
 import { Project } from '../../types/schema';
 import { MarkerInfoWindow } from './MarkerInfoWindow';
@@ -20,6 +22,14 @@ export default function AddMarker({
     setSelectedProjectId(null); // close modal
   };
 
+  const map = useMap();
+
+  const clusterer = useMemo(() => {
+    if (!map) return null;
+
+    return new MarkerClusterer({ map });
+  }, [map]);
+
   return (
     <>
       {projects?.map((project: Project) => {
@@ -34,6 +44,7 @@ export default function AddMarker({
             projectDev={project.developer}
             projectId={project.id}
             onMarkerClick={handleMarkerClick}
+            clusterer={clusterer}
           />
         );
       })}

api/maps/MarkerInfoWindow.tsx

@@ -1,4 +1,5 @@
-import { useCallback, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
+import { MarkerClusterer } from '@googlemaps/markerclusterer';
 import {
   AdvancedMarker,
   InfoWindow,
@@ -11,33 +12,44 @@ export const MarkerInfoWindow = ({
   projectName,
   projectDev,
   onMarkerClick,
+  clusterer,
 }: {
   position: { lat: number; lng: number };
   projectId: number;
   projectName: string;
   projectDev: string;
   onMarkerClick: (projectId: number) => void;
+  clusterer: MarkerClusterer | null;
 }) => {
   const [markerRef, marker] = useAdvancedMarkerRef();
   const [infoWindowShown, setInfoWindowShown] = useState(false);
 
-  // clicking the marker will toggle the infowindow
-  const handleMarkerEnter = useCallback(
-    () => setInfoWindowShown(isShown => !isShown),
-    [],
-  );
+  // hovering over the marker will toggle the infowindow
+  const handleMarkerEnter = useCallback(() => {
+    setInfoWindowShown(isShown => !isShown);
+  }, []);
 
   // if the maps api closes the infowindow, we have to synchronize our state
   const handleClose = useCallback(() => setInfoWindowShown(false), []);
 
+  const handleMarkerClick = () => {
+    onMarkerClick(projectId);
+  };
+
+  useEffect(() => {
+    if (marker && clusterer) {
+      clusterer.addMarker(marker);
+    }
+  });
+
   return (
     <>
       <AdvancedMarker
         ref={markerRef}
         position={position}
         onMouseEnter={handleMarkerEnter}
         onMouseLeave={handleClose}
-        onClick={() => onMarkerClick(projectId)}
+        onClick={handleMarkerClick}
       />
 
       {infoWindowShown && (

components/Map/map.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { APIProvider, Map as GoogleMap } from '@vis.gl/react-google-maps';
-import addMarkers from '../../api/maps/AddMarkers';
+import AddMarkers from '../../api/maps/AddMarkers';
 import { Project } from '../../types/schema';
 import './styles.css';
 
@@ -28,7 +28,8 @@ export default function Map(props: { projects: Project[] | null }) {
         disableDefaultUI={true}
         mapId={mapId}
       >
-        {addMarkers({ projects: props.projects })}
+        <AddMarkers projects={props.projects} />
+        {/* // add clustered markers here */}
       </GoogleMap>
     </APIProvider>
   );