[feat] Add Google Maps to home page

app/components/map.tsx

@@ -0,0 +1,46 @@
+'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,
+  });
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  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>
+  ) : (
+    <></>
+  );
+}

app/page.tsx

@@ -1,14 +1,10 @@
-'use client';
-
-import React, { CSSProperties } from 'react';
-import Image from 'next/image';
-import BPLogo from '@/assets/images/bp-logo.png';
+import { CSSProperties } from 'react';
+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>
   );
 }
@@ -23,9 +19,3 @@ const mainStyles: CSSProperties = {
   alignItems: 'center',
   justifyContent: 'center',
 };
-
-const imageStyles: CSSProperties = {
-  width: '80px',
-  height: '80px',
-  marginBottom: '0.5rem',
-};

package.json

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