Centered map when click on marker

calblueprint · Oct 26, 2024 · 356189e · 356189e
1 parent 221d6ec
commit 356189e
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 5 deletions.
diff --git a/api/maps/AddMarkers.tsx b/api/maps/AddMarkers.tsx
@@ -1,4 +1,5 @@
 import { useState } from 'react';
+import { useMap } from '@vis.gl/react-google-maps';
 import ProjectModal from '@/components/ProjectModal';
 import { Project } from '../../types/schema';
 import { MarkerInfoWindow } from './MarkerInfoWindow';
@@ -11,9 +12,14 @@ export default function AddMarker({
   const [selectedProjectId, setSelectedProjectId] = useState<number | null>(
     null,
   ); // track currently open modal
+  const map = useMap();
 
-  const handleMarkerClick = (projectId: number) => {
+  const handleMarkerClick = (
+    projectId: number,
+    position: { lat: number; lng: number },
+  ) => {
     setSelectedProjectId(prevId => (prevId === projectId ? null : projectId)); // close modal if same, open if different
+    map && map.panTo(position); // change center of map to selected marker
   };
 
   const closeModal = () => {

diff --git a/api/maps/MarkerInfoWindow.tsx b/api/maps/MarkerInfoWindow.tsx
@@ -16,7 +16,10 @@ export const MarkerInfoWindow = ({
   projectId: number;
   projectName: string;
   projectDev: string;
-  onMarkerClick: (projectId: number) => void;
+  onMarkerClick: (
+    projectId: number,
+    position: { lat: number; lng: number },
+  ) => void;
 }) => {
   const [markerRef, marker] = useAdvancedMarkerRef();
   const [infoWindowShown, setInfoWindowShown] = useState(false);
@@ -37,7 +40,7 @@ export const MarkerInfoWindow = ({
         position={position}
         onMouseEnter={handleMarkerEnter}
         onMouseLeave={handleClose}
-        onClick={() => onMarkerClick(projectId)}
+        onClick={() => onMarkerClick(projectId, position)}
       />
 
       {infoWindowShown && (

diff --git a/components/Map/map.tsx b/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,7 @@ export default function Map(props: { projects: Project[] | null }) {
         disableDefaultUI={true}
         mapId={mapId}
       >
-        {addMarkers({ projects: props.projects })}
+        <AddMarkers projects={props.projects} />
       </GoogleMap>
     </APIProvider>
   );