Merge pull request #210 from SchoolyB/Development

Install map dependencies/build map page/embed map/add map styling/

Author: SchoolyB

client/package-lock.json

@@ -9,9 +9,11 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@react-google-maps/api": "^2.18.1",
     "@vercel/analytics": "^1.0.0",
     "axios": "^1.2.3",
     "dotenv": "^16.0.3",
+    "google-map-react": "^2.2.1",
     "ol": "^7.3.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

client/package.json

@@ -1,5 +1,5 @@
-import axios from "axios";
+import axios from 'axios'
 
 const baseURL = import.meta.env.VITE_API_URL
 
-export const api = axios.create({ baseURL});
+export const api = axios.create({ baseURL })

client/src/includes/api.ts

@@ -0,0 +1,26 @@
+import { GoogleMap, Marker, useLoadScript } from '@react-google-maps/api'
+import { useMemo } from 'react'
+const mapKey = import.meta.env.VITE_MAP_KEY
+
+const map = () => {
+	const { isLoaded } = useLoadScript({
+		googleMapsApiKey: `${mapKey}` || '',
+	})
+	const center = useMemo(() => ({ lat: 0, lng: 0 }), [])
+
+	return (
+		<div className="map">
+			{!isLoaded ? (
+				<h1>Loading...</h1>
+			) : (
+				<GoogleMap
+					mapContainerClassName="map-container"
+					center={center}
+					zoom={3.5}
+				></GoogleMap>
+			)}
+		</div>
+	)
+}
+
+export default map

client/src/pages/map.tsx

@@ -0,0 +1,9 @@
+.map {
+  height: 100vh;
+  width: 100vw;
+}
+
+.map-container {
+  height: 100%;
+  width: 100%;
+}