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] 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%" }} />;
 };