API UPDATE

package.json

@@ -12,7 +12,7 @@
   "dependencies": {
     "@react-google-maps/api": "^2.18.1",
     "appwrite": "^11.0.0",
-    "dotenv": "^16.0.3",
+    "google-maps-react-markers": "^1.2.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^4.8.0",
@@ -25,6 +25,8 @@
     "@types/react-dom": "^18.0.11",
     "@vitejs/plugin-react-swc": "^3.0.0",
     "autoprefixer": "^10.4.14",
+    "dotenv": "^16.0.3",
+    "dotenv-webpack": "^8.0.1",
     "eslint": "^8.38.0",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",

src/components/Map.jsx

@@ -1,11 +1,11 @@
-import { GoogleMap, useJsApiLoader } from "@react-google-maps/api";
+import { GoogleMap, useJsApiLoader, Marker } from "@react-google-maps/api";
 import { useCallback, useState } from "react";
 
 function Map() {
 
     const { isLoaded } = useJsApiLoader({
       id: "google-map-script",
-      googleMapsApiKey: import.meta.env.REACT_APP_GOOGLE_MAP_API_KEY,
+      googleMapsApiKey: import.meta.env.VITE_REACT_APP_GOOGLE_MAP_API_KEY,
     });
     const [map, setMap] = useState(null)
 
@@ -28,8 +28,7 @@ function Map() {
         onLoad={onLoad}
         onUnmount={onUnmount}
       >
-        {/* Child components, such as markers, info windows, etc. */}
-        <></>
+
       </GoogleMap>
     ) : (
       <div>Loading...</div>

vite.config.js

@@ -1,5 +1,8 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react-swc'
+import dotenv from "dotenv";
+
+dotenv.config();
 
 // https://vitejs.dev/config/
 export default defineConfig({