map search

frontend/src/components/GoogleMapWithRadius.tsx

@@ -31,8 +31,9 @@ const GoogleMapWithRadius: React.FC<GoogleMapWithRadiusProps> = ({
   // Destructure mapOptions to create stable references
   const { zoom = 12 } = mapOptions;
 
-  // Get API key from environment
+  // Get API key and Map ID from environment
   const apiKey = process.env.REACT_APP_GOOGLE_MAPS_PUBLIC_API_KEY;
+  const mapId = process.env.REACT_APP_GOOGLE_MAPS_MAP_ID;
 
   // Refs for map container and instances
   const mapRef = useRef<HTMLDivElement>(null);
@@ -60,17 +61,21 @@ const GoogleMapWithRadius: React.FC<GoogleMapWithRadiusProps> = ({
 
         if (!mapRef.current) return;
 
-        // Create map
-        const map = new google.maps.Map(mapRef.current, {
+        // Create map configuration
+        const mapConfig: google.maps.MapOptions = {
+          mapId: mapId,
           center: mapCenter,
           zoom: zoom,
+          maxZoom: 15, // Prevent users from zooming too close
           zoomControl: true,
           mapTypeControl: false,
           scaleControl: true,
           streetViewControl: false,
           rotateControl: false,
           fullscreenControl: false,
-        });
+        };
+
+        const map = new google.maps.Map(mapRef.current, mapConfig);
 
         mapInstanceRef.current = map;
 
@@ -101,7 +106,7 @@ const GoogleMapWithRadius: React.FC<GoogleMapWithRadiusProps> = ({
       }
       mapInstanceRef.current = null;
     };
-  }, [apiKey, mapCenter, zoom]);
+  }, [apiKey, mapId, mapCenter, zoom]);
 
   // Update map center and circle when coordinates change
   useEffect(() => {