cafe pins show on map

src/MapComponent.jsx

@@ -1,42 +1,65 @@
 import React, { useEffect, useRef, useState } from "react";
 
-const MapComponent = ( {cafes} ) => {
+const MapComponent = ({ cafes }) => {
   const mapRef = useRef(null);
-  const defaultLocation = { lat: 42.0451, lng: -87.6877 }; // Default to a location, e.g., Chicago
-
+  const defaultLocation = { lat: 42.0451, lng: -87.6877 };
+  const [map, setMap] = useState(null);
 
   useEffect(() => {
     if (!mapRef.current) return;
 
-    // Initialize map
-    const map = new window.google.maps.Map(mapRef.current, {
-      center: defaultLocation,
-      zoom: 14,
-      mapId: 'ae95546a5be3631',
-      disableDefaultUI: true,
-    });
+    const initMap = async () => {
+      const { Map } = await window.google.maps.importLibrary("maps");
+      const { AdvancedMarkerElement } = await window.google.maps.importLibrary("marker");
 
-    // Add markers for each cafe
-    cafes.forEach((cafe) => {
-      const marker = new window.google.maps.Marker({
-        position: { lat: cafe.lat, lng: cafe.lng },
-        map: map,
-        title: cafe.name,
+      const newMap = new Map(mapRef.current, {
+        center: defaultLocation,
+        zoom: 14,
+        mapId: 'ae95546a5be3631',
+        disableDefaultUI: true,
       });
 
-      // Info window with cafe name
-      const infoWindow = new window.google.maps.InfoWindow({
-        content: `<div><strong>${cafe.name}</strong></div>`,
-      });
+      setMap(newMap);
+    };
+
+    initMap();
+  }, []);
+
+  useEffect(() => {
+    if (!map || !cafes.length) return;
+
+    const bounds = new window.google.maps.LatLngBounds();
+    const geocoder = new window.google.maps.Geocoder();
+
+    cafes.forEach((cafe) => {
+      geocoder.geocode({ address: cafe.vicinity }, (results, status) => {
+        if (status === 'OK' && results[0]) {
+          const position = results[0].geometry.location;
+
+          const marker = new window.google.maps.marker.AdvancedMarkerElement({
+            map,
+            position,
+            title: cafe.name,
+          });
 
-      // Show info window on marker click
-      marker.addListener("click", () => {
-        infoWindow.open(map, marker);
+          const infoWindow = new window.google.maps.InfoWindow({
+            content: `<div><strong>${cafe.name}</strong></div>`,
+          });
+
+          marker.addListener("click", () => {
+            infoWindow.open(map, marker);
+          });
+
+          bounds.extend(position);
+          map.fitBounds(bounds);
+        } else {
+          console.error(`Geocoding failed for ${cafe.name}: ${status}`);
+        }
       });
     });
-  }, []);
+  }, [cafes, map]);
 
   return <div ref={mapRef} style={{ width: "100%", height: "100%" }} />;
 };
 
-export default MapComponent;
+export default MapComponent;

src/pages/LandingPage.jsx

@@ -36,18 +36,11 @@ const LandingPage = () => {
         console.log(cafes);
     }, [cafes]);
 
-    const cafesMap = [
-        { name: "Cafe Blue", lat: 42.046, lng: -87.688 },
-        { name: "Green Bean Cafe", lat: 42.048, lng: -87.684 },
-        { name: "Java Lounge", lat: 42.044, lng: -87.690 },
-    ];
-
     return (
         <div className="App">
             <Banner cafes={cafes} />
-            {/* Integrate MapComponent with hardcoded data */}
             <div style={{ height: '600px', width: '100%'}}>
-                <MapComponent cafes={cafesMap} />
+                <MapComponent cafes={cafes} />
             </div>
         </div>
     );