add map and google map api

package.json

@@ -10,6 +10,7 @@
  "format": "npx prettier --write ."
  },
  "dependencies": {
+ "@react-google-maps/api": "^2.19.2",
  "next": "14.0.2",
  "react": "^18",
  "react-dom": "^18"

src/app/page.tsx

@@ -1,9 +1,12 @@
 import styles from "./page.module.css";
 
+import Map from "../components/map";
+
 export default function Home() {
  return (
  <main className={styles.main}>
  <h1>ここごはん</h1>
+ <Map />
  </main>
  );
 }

src/components/Map.jsx

@@ -0,0 +1,30 @@
+'use client'
+import React from "react";
+import { GoogleMap, LoadScript } from "@react-google-maps/api";
+
+const containerStyle = {
+ width: "100%",
+ height: "86vh",
+};
+
+const center = {
+ lat: 34.7293466708865,
+ lng: 135.49939605607292,
+};
+
+const zoom = 10;
+
+const Map = () => {
+ return (
+ <LoadScript googleMapsApiKey={process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY}>
+ <GoogleMap
+ mapContainerStyle={containerStyle}
+ center={center}
+ zoom={zoom}
+ ></GoogleMap>
+ </LoadScript>
+ );
+};
+
+export default Map;
+