Updated Google maps API key

backend/app/config/settings.py

@@ -1,7 +1,7 @@
 # backend/app/config/settings.py
 from __future__ import annotations
 from pathlib import Path
-from pydantic import Field
+from pydantic import Field, AliasChoices
 from pydantic_settings import BaseSettings, SettingsConfigDict
 import os, tempfile
 
@@ -41,7 +41,6 @@ def _default_data_dir() -> Path:
         w = _try_writable(p)
         if w:
             return w
-    # As a last resort, raise a clear error
     raise RuntimeError(f"No writable DATA_DIR found. Tried: {candidates!r}")
 
 def _default_uploads_dir() -> Path:
@@ -63,6 +62,16 @@ class Settings(BaseSettings):
     OPENAI_MODEL_AGENT: str = "gpt-4o"
     OPENAI_MODEL_CLASSIFIER: str = "gpt-4o-mini"
 
+    # ✅ Google Maps (read from multiple env names for safety)
+    google_maps_api_key: str | None = Field(
+        default=None,
+        validation_alias=AliasChoices("VITE_GOOGLE_MAPS_API_KEY", "GOOGLE_MAPS_API_KEY"),
+    )
+    google_maps_map_id: str | None = Field(
+        default=None,
+        validation_alias=AliasChoices("VITE_GOOGLE_MAPS_MAP_ID", "VITE_GOOGLE_MAPS_MAP_IDY", "GOOGLE_MAPS_MAP_ID"),
+    )
+
     # Paths
     DATA_DIR: Path = Field(default_factory=_default_data_dir)
     REPORTS_DB: Path | None = None
@@ -75,7 +84,7 @@ class Settings(BaseSettings):
     DEFAULT_LIMIT: int = 10
     MAX_AGE_HOURS: int = 48
 
-    # Optional extras you had in .env
+    # Optional extras
     firms_map_key: str | None = None
     gdacs_rss_url: str | None = "https://www.gdacs.org/xml/rss.xml"
     nvidia_api_key: str | None = None

backend/app/routers/config.py

@@ -1,3 +1,4 @@
+# backend/app/routers/config.py
 from fastapi import APIRouter
 from ..config.settings import settings
 
@@ -6,5 +7,7 @@ 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}
+    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

@@ -1,10 +1,6 @@
-import {
-  APIProvider,
-  Map,
-  AdvancedMarker,
-  // useMap,
-} from "@vis.gl/react-google-maps";
-// import { useEffect } from "react";
+// web/src/components/map/MapCanvas.tsx
+import { APIProvider, Map, AdvancedMarker } from "@vis.gl/react-google-maps";
+import { useEffect, useState } from "react";
 import SearchControl from "./controls/SearchControl";
 import MyLocationControl from "./controls/MyLocationControl";
 import SingleSelect from "./controls/SingleSelect";
@@ -18,16 +14,10 @@ import FirmsLayer from "./overlays/FirmsLayer";
 import TractsLayer from "./overlays/TractsLayer";
 import LegendControl from "./controls/LegendControl";
 
-// function PanOnSelect({ ll }: { ll: [number, number] | null }) {
-//   const map = useMap();
-//   useEffect(() => {
-//     if (!map || !ll) return;
-//     map.panTo({ lat: ll[0], lng: ll[1] });
-//     const z = map.getZoom?.() ?? 0;
-//     if (z < 14) map.setZoom(14); // tweak 14–16 as you like
-//   }, [map, ll]);
-//   return null;
-// }
+type RuntimeCfg = {
+  VITE_GOOGLE_MAPS_API_KEY?: string;
+  VITE_GOOGLE_MAPS_MAP_ID?: string;
+};
 
 export default function MapCanvas({
   selectedLL,
@@ -48,20 +38,32 @@ 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));
+  }, []);
+
+  const apiKey = cfg?.VITE_GOOGLE_MAPS_API_KEY || GMAPS_KEY;
+  const mapId = cfg?.VITE_GOOGLE_MAPS_MAP_ID || MAP_ID || undefined;
+
+  if (err) return <div>Map config error: {err}</div>;
+  if (!apiKey) return <div>Loading map…</div>;
+
   return (
-    <APIProvider
-      apiKey={GMAPS_KEY}
-      libraries={["places", "marker", "geometry"]}
-    >
+    <APIProvider apiKey={apiKey} libraries={["places", "marker", "geometry"]}>
       <Map
         className="map"
-        mapId={MAP_ID}
+        mapId={mapId}
         defaultCenter={{ lat: 39, lng: -98 }}
         defaultZoom={4}
         gestureHandling="greedy"
         disableDefaultUI={false}
       >
-        {/* <PanOnSelect ll={selectedLL} /> */}
         <SearchControl onPlace={setSelected} />
         <MyLocationControl onLocated={setSelected} />
         <SingleSelect onPick={setSelected} />
@@ -81,6 +83,7 @@ export default function MapCanvas({
           firms={firms}
           minZoom={9}
         />
+
         {selectedLL && (
           <EmojiMarker
             position={{ lat: selectedLL[0], lng: selectedLL[1] }}
@@ -152,7 +155,7 @@ export default function MapCanvas({
           );
         })}
 
-        {/* User reports (keep your AdvancedMarker + ReportIcon) */}
+        {/* User reports */}
         {reports.features.map((f, i) => {
           if (f.geometry?.type !== "Point") return null;
           const [lng, lat] = f.geometry.coordinates as [number, number];