setting up google map api

mulundapm · Aug 10, 2024 · 5c32498 · 5c32498
1 parent 0f2314e
commit 5c32498
Show file tree

Hide file tree

Showing 6 changed files with 47 additions and 9 deletions.
diff --git a/.env b/.env
@@ -1,4 +1,6 @@
 REACT_APP_FB_KEY=AIzaSyBhRg3ufseNk278SWxFHnOmHqz-YLOu0-w
 REACT_APP_FB_MESSINGSENDER_ID=835331495725
 REACT_APP_FB_APP_ID=1:835331495725:web:f59e0506cf9b4903a125a4
-REACT_APP_FB_MEASUREMENT_ID=G-CVDGDQ79K4
+REACT_APP_FB_MEASUREMENT_ID=G-CVDGDQ79K4
+REACT_APP_MAPS_API_KEY=AIzaSyCSXXBBNENckpHT-hKgBMHG2yCJXdaL0As
+MAP_ID=c4771a5333638d97
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -10,6 +10,7 @@
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "@vis.gl/react-google-maps": "^1.1.0",
     "firebase": "^10.12.2",
     "firebaseui": "^6.1.0",
     "react": "^18.3.1",

diff --git a/src/App.css b/src/App.css
@@ -256,4 +256,5 @@ input{
     max-width: 100%;
     bottom: 0;
   }
-}
+}
+
diff --git a/src/Components/RestaurantDetails.jsx b/src/Components/RestaurantDetails.jsx
@@ -79,7 +79,7 @@ function RestaurantDetails() {
                 <Link to={thisRestaurant.website}><button className='primary-button'>Reserve a table</button></Link>
             </div>
             <Reviews reviews={thisRestaurant.reviews}/>
-            <RestaurantMap/>
+            <RestaurantMap address={thisRestaurant.address}/>
             </div>
     )
     }

diff --git a/src/Components/RestaurantMap.jsx b/src/Components/RestaurantMap.jsx
@@ -1,12 +1,25 @@
 import React from 'react'
-import map1 from '../Assets/mahayana-map.png'
+import { APIProvider, Map, AdvancedMarker, useMapsLibrary, useMap} from '@vis.gl/react-google-maps'
+import { useEffect, useState } from 'react'
 
-function RestaurantMap() {
+function Geocoding(){
+  const geocodingApiLoaded = useMapsLibrary("geocoding")
+  useEffect(()=>{
+
+  },[])
+}
+
+function RestaurantMap(address) {
+  const position = { lat: 53.54, lng: 10}
   return (
-    <div>
-        <img src={map1} alt="Restaurant map" className='restaurant-image center'/>
-        <p>yes this is an image, imagine it being a map for now</p>
-    </div>
+    <APIProvider apiKey={process.env.REACT_APP_MAPS_API_KEY}>
+      <div style={{height: "150px"}}>
+          <Map zoom={13} center={position} mapId={'process.env.MAP_ID'}></Map>
+          <AdvancedMarker position={position}>
+          <Geocoding></Geocoding>
+          </AdvancedMarker>
+      </div>
+    </APIProvider>
   )
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -256,4 +256,5 @@ input{ @@
         max-width: 100%;
         bottom: 0;
       }
-    }
+    }