update map

Websites/jefes-nextjs/app/page.tsx

@@ -5,9 +5,7 @@ import { EmblaCarousel } from "./carousel";
 import Reserve from "./components/NavBar/reserveButton";
 import MenuButton from "./menuButton";
 import "./home.css";
-import GoogleReviews from "./components/Reviews/google_reviews";
+import GoogleMap from "@/components/Maps/MapComponent";
-import MapComponent from "@/components/Maps/MapComponent";
-
 
 export default function Home() {
   return (
@@ -286,7 +284,7 @@ export default function Home() {
         </div>
         <div className="w-full h-[80svh] bg-blue-300">
           {/* <GoogleReviews /> */}
-          <MapComponent />
+          <GoogleMap />
         </div>
         {/* <div className="flex flex-col w-full h-[180vh]">
           <EmblaCarousel />

Websites/jefes-nextjs/components/Maps/MapComponent.tsx

@@ -1,50 +1,21 @@
 "use client";
-import React from 'react'
+import React from "react";
-import { GoogleMap, useJsApiLoader } from '@react-google-maps/api';
 
-const containerStyle = {
+const GoogleMap = () => {
-  width: '400px',
+  return (
-  height: '400px'
+    // basic bootstrap classes. you can change with yours.
+    <div className="col-md-12">
+      <div className="emdeb-responsive">
+        <iframe
+          width="600"
+          height="450"
+          style={{border: "0"}}
+          loading="lazy"
+          src="https://www.google.com/maps/embed/v1/place?q=place_id:ChIJQ-7Uc0BitocRQZASTWUyN04&key=AIzaSyBS4qOnpT4llaFa_UKMpeWike3lzDvFZ1U"
+        ></iframe>
+      </div>
+    </div>
+  );
 };
 
-const center = {
+export default GoogleMap;
-  lat: 36.10787615076762,
-  lng: -95.70694833561868,
-};
-
-
-function MyComponent() {
-  const { isLoaded } = useJsApiLoader({
-    id: 'google-map-script',
-    googleMapsApiKey: "AIzaSyClfOGrkQNRjDFzvnTk-W7Oeh-yyDNCXN0"
-  })
-
-  const [map, setMap] = React.useState(null)
-
-  const onLoad = React.useCallback(function callback(map:any) {
-    // This is just an example of getting and using the map instance!!! don't just blindly copy!
-    const bounds = new window.google.maps.LatLngBounds(center);
-    map.fitBounds(bounds);
-
-    setMap(map)
-  }, [])
-
-  const onUnmount = React.useCallback(function callback(map:any) {
-    setMap(null)
-  }, [])
-
-  return isLoaded ? (
-      <GoogleMap
-        mapContainerStyle={containerStyle}
-        center={center}
-        zoom={10}
-        onLoad={onLoad}
-        onUnmount={onUnmount}
-      >
-        { /* Child components, such as markers, info windows, etc. */ }
-        <></>
-      </GoogleMap>
-  ) : <></>
-}
-
-export default React.memo(MyComponent)