From 20e0e802ef7127ac4e56d72fd0a84a8ffd624443 Mon Sep 17 00:00:00 2001
From: alizenart <97767073+alizenart@users.noreply.github.com>
Date: Fri, 8 Nov 2024 14:44:42 -0600
Subject: [PATCH 1/2] cafe pins show on map

---
 src/MapComponent.jsx      | 73 +++++++++++++++++++++++++--------------
 src/pages/LandingPage.jsx |  9 +----
 2 files changed, 49 insertions(+), 33 deletions(-)

diff --git a/src/MapComponent.jsx b/src/MapComponent.jsx
index e946599..955ab37 100644
--- a/src/MapComponent.jsx
+++ b/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;
\ No newline at end of file
diff --git a/src/pages/LandingPage.jsx b/src/pages/LandingPage.jsx
index 0ed5ef1..690386a 100644
--- a/src/pages/LandingPage.jsx
+++ b/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>
     );

From 56c02847e23839c6c9fe08ae3cfa09ab2c2b5da0 Mon Sep 17 00:00:00 2001
From: alizenart <97767073+alizenart@users.noreply.github.com>
Date: Fri, 8 Nov 2024 14:46:39 -0600
Subject: [PATCH 2/2] pin has button that links to cafe

---
 src/MapComponent.jsx | 24 ++++++++++++++++++++++--
 1 file changed, 22 insertions(+), 2 deletions(-)

diff --git a/src/MapComponent.jsx b/src/MapComponent.jsx
index 955ab37..73d2b9b 100644
--- a/src/MapComponent.jsx
+++ b/src/MapComponent.jsx
@@ -1,9 +1,11 @@
 import React, { useEffect, useRef, useState } from "react";
+import { useNavigate } from 'react-router-dom';
 
 const MapComponent = ({ cafes }) => {
   const mapRef = useRef(null);
   const defaultLocation = { lat: 42.0451, lng: -87.6877 };
   const [map, setMap] = useState(null);
+  const navigate = useNavigate();
 
   useEffect(() => {
     if (!mapRef.current) return;
@@ -42,12 +44,30 @@ const MapComponent = ({ cafes }) => {
             title: cafe.name,
           });
 
+          const infoWindowContent = `
+            <div>
+              <strong>${cafe.name}</strong>
+              <br/>
+              <button id="goto-${cafe.placeId}" style="margin-top: 10px;">Go to Cafe Page</button>
+            </div>
+          `;
+
           const infoWindow = new window.google.maps.InfoWindow({
-            content: `<div><strong>${cafe.name}</strong></div>`,
+            content: infoWindowContent,
           });
 
           marker.addListener("click", () => {
             infoWindow.open(map, marker);
+            
+            // We need to wait for the InfoWindow to be added to the DOM
+            setTimeout(() => {
+              const button = document.getElementById(`goto-${cafe.placeId}`);
+              if (button) {
+                button.addEventListener('click', () => {
+                  navigate(`/cafe/${cafe.placeId}`);
+                });
+              }
+            }, 0);
           });
 
           bounds.extend(position);
@@ -57,7 +77,7 @@ const MapComponent = ({ cafes }) => {
         }
       });
     });
-  }, [cafes, map]);
+  }, [cafes, map, navigate]);
 
   return <div ref={mapRef} style={{ width: "100%", height: "100%" }} />;
 };