Added Map api key

backend/app/config/settings.py

@@ -53,6 +53,10 @@ class Settings(BaseSettings):
     firms_map_key: str | None = None
     gdacs_rss_url: str | None = "https://www.gdacs.org/xml/rss.xml"
     nvidia_api_key: str | None = None
+    
+    google_maps_api_key: str | None = Field(default=None, alias="VITE_GOOGLE_MAPS_API_KEY")
+    google_maps_map_id: str | None = Field(default=None, alias="VITE_GOOGLE_MAPS_MAP_IDY")
+    
 
     def ensure_dirs(self) -> None:
         if self.REPORTS_DB is None:

backend/app/main.py

@@ -16,13 +16,14 @@ app.add_middleware(
 app.mount("/uploads", StaticFiles(directory=str(settings.UPLOADS_DIR)), name="uploads")
 
 # Routers
-from .routers import chat, reports, feeds, uploads  # noqa
+from .routers import chat, reports, feeds, uploads, config  # noqa
 from .routers.feeds import updates as updates_router
 app.include_router(chat.router)
 app.include_router(reports.router)
 app.include_router(feeds.router)
 app.include_router(updates_router)  
 app.include_router(uploads.router)
+app.include_router(config.router) 
 
 if settings.FRONTEND_DIST.exists():
     app.mount("/", StaticFiles(directory=str(settings.FRONTEND_DIST), html=True), name="spa")

backend/app/routers/config.py

@@ -0,0 +1,10 @@
+from fastapi import APIRouter
+from ..config.settings import settings
+
+router = APIRouter(prefix="/config", tags=["config"])
+
+@router.get("/runtime")
+def runtime_config():
+    # Only the fields you need in the client
+    return {"VITE_GOOGLE_MAPS_API_KEY": settings.google_maps_api_key,
+            "VITE_GOOGLE_MAPS_MAP_ID": settings.google_maps_map_id}

web/src/components/map/MapCanvas.tsx

@@ -4,7 +4,7 @@ import {
   AdvancedMarker,
   useMap,
 } from "@vis.gl/react-google-maps";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import SearchControl from "./controls/SearchControl";
 import MyLocationControl from "./controls/MyLocationControl";
 import SingleSelect from "./controls/SingleSelect";
@@ -27,6 +27,11 @@ function PanOnSelect({ ll }: { ll: [number, number] | null }) {
   return null;
 }
 
+type RuntimeCfg = {
+  VITE_GOOGLE_MAPS_API_KEY?: string;
+  VITE_GOOGLE_MAPS_MAP_ID?: string;
+};
+
 export default function MapCanvas({
   selectedLL,
   selectedMeta,
@@ -46,11 +51,26 @@ export default function MapCanvas({
   firms: FC | null;
   reports: FC;
 }) {
+  const [cfg, setCfg] = useState<RuntimeCfg | null>(null);
+  const [err, setErr] = useState<string | null>(null);
+
+  useEffect(() => {
+    fetch("/config/runtime", { cache: "no-store" })
+      .then((r) => (r.ok ? r.json() : Promise.reject(new Error(r.statusText))))
+      .then(setCfg)
+      .catch((e) => setErr(e.message));
+  }, []);
+
+  if (err) return <div>Map config error: {err}</div>;
+  if (!cfg?.VITE_GOOGLE_MAPS_API_KEY) return <div>Loading map…</div>;
   return (
-    <APIProvider apiKey={GMAPS_KEY} libraries={["places", "marker"]}>
+    <APIProvider
+      apiKey={cfg.VITE_GOOGLE_MAPS_API_KEY || GMAPS_KEY}
+      libraries={["places", "marker"]}
+    >
       <Map
         className="map"
-        mapId={MAP_ID}
+        mapId={cfg.VITE_GOOGLE_MAPS_MAP_ID || MAP_ID || undefined}
         defaultCenter={{ lat: 39, lng: -98 }}
         defaultZoom={4}
         gestureHandling="greedy"