geocoding for restaurant addresses

.gitignore

@@ -1,7 +1,23 @@
 node_modules
 
-.env
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
 .env.local
 .env.development.local
 .env.test.local
-.env.production.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+.env
+
+# eslint cache
+.eslintcache

src/Components/RestaurantDetails.jsx

@@ -51,7 +51,6 @@ function RestaurantDetails() {
         }
     };
     fetchRestaurant();
-    console.log(thisRestaurant)
     }, [restaurantID]);
 
     if (loading) {
@@ -62,7 +61,10 @@ function RestaurantDetails() {
     return <div>Restaurant not found</div>;
     }
 
-    console.log(thisRestaurant)
+    if (!loading && thisRestaurant){
+        console.log(thisRestaurant)
+    }
+
     return (
     <div>
             <img src={thisRestaurant.interiorUrl} alt="Restaurant Image" className='restaurant-image center'/>

src/Components/RestaurantMap.jsx

@@ -1,22 +1,40 @@
 import React from 'react'
-import { APIProvider, Map, AdvancedMarker, useMapsLibrary, useMap} from '@vis.gl/react-google-maps'
+import { APIProvider, Map, AdvancedMarker, useMapsLibrary} from '@vis.gl/react-google-maps'
 import { useEffect, useState } from 'react'
 
-function Geocoding(){
+function Geocoding({address, setPosition}){
   const geocodingApiLoaded = useMapsLibrary("geocoding")
+  const [geocodingService, setGeocodingService] = useState()
+
+  useEffect(()=>{
+    if (!geocodingApiLoaded) return;
+    setGeocodingService(new window.google.maps.Geocoder())
+  },[geocodingApiLoaded])
+
   useEffect(()=>{
-
-  },[])
+    if (!geocodingService) return;
+    geocodingService.geocode({address}, (results, status) =>{
+      if (results && status === "OK"){
+        const location = results[0].geometry.location;
+        setPosition({ lat: location.lat(), lng: location.lng()})
+      }
+    })
+  }, [geocodingService, address])
+
+
+    if(!geocodingApiLoaded) return <div>no api loaded</div>
+    if(!geocodingService) return <div>no service</div>
 }
 
-function RestaurantMap(address) {
-  const position = { lat: 53.54, lng: 10}
+function RestaurantMap({address}) {
+  const [position, setPosition] = useState({ lat: 53.54, lng: 10 })
+
   return (
     <APIProvider apiKey={process.env.REACT_APP_MAPS_API_KEY}>
+      <Geocoding address={address} setPosition={setPosition}/>
       <div style={{height: "150px"}}>
           <Map zoom={13} center={position} mapId={'process.env.MAP_ID'}></Map>
           <AdvancedMarker position={position}>
-          <Geocoding></Geocoding>
           </AdvancedMarker>
       </div>
     </APIProvider>