[feat] added google maps to home page

package.json

@@ -14,8 +14,8 @@
     "pre-commit": "(pnpm run tsc || true) && (pnpm run lint || true) && pnpm run prettier"
   },
   "dependencies": {
-    "@googlemaps/js-api-loader": "^1.16.8",
     "@googlemaps/markerclusterer": "^2.5.3",
+    "@react-google-maps/api": "^2.19.3",
     "next": "^14.2.13",
     "react": "^18",
     "react-dom": "^18"

src/app/components/map.tsx

@@ -1 +1,45 @@
-import { Loader } from '@googlemaps/js-api-loader';
+'use client';
+
+import { useCallback, useState } from 'react';
+import { GoogleMap, useJsApiLoader } from '@react-google-maps/api';
+
+const containerStyle = {
+  width: '700px',
+  height: '700px',
+};
+
+const center = {
+  lat: 40.7128,
+  lng: -74.006,
+};
+
+const zoom = 7;
+
+export default function Map() {
+  const { isLoaded } = useJsApiLoader({
+    id: 'google-map-script',
+    googleMapsApiKey: process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY as string,
+  });
+
+  const [map, setMap] = useState<google.maps.Map | null>(null);
+
+  const onLoad = useCallback((map: google.maps.Map) => {
+    map.setCenter(center);
+    map.setZoom(zoom);
+    setMap(map);
+  }, []);
+
+  const onUnmount = useCallback(() => {
+    setMap(null);
+  }, []);
+
+  return isLoaded ? (
+    <GoogleMap
+      mapContainerStyle={containerStyle}
+      onLoad={onLoad}
+      onUnmount={onUnmount}
+    ></GoogleMap>
+  ) : (
+    <></>
+  );
+}

src/app/page.tsx

@@ -1,12 +1,12 @@
 import { CSSProperties } from 'react';
 import Image from 'next/image';
 import BPLogo from '@/assets/images/bp-logo.png';
+import Map from './components/map';
 
 export default function Home() {
   return (
     <main style={mainStyles}>
-      <Image style={imageStyles} src={BPLogo} alt="Blueprint Logo" />
-      <p>Open up app/page.tsx to get started!</p>
+      <Map />
     </main>
   );
 }