Fix map view on node details

web/src/components/dashboard/NodeDetail.tsx

@@ -13,7 +13,7 @@ interface NodeDetailProps {
   nodeId: number;
 }
 
-// Google Maps API is already loaded - this creates a map component
+// Google Maps component that uses the API loaded via script tag
 const GoogleMap: React.FC<{lat: number, lng: number, zoom?: number}> = ({lat, lng, zoom = 14}) => {
   const mapRef = useRef<HTMLDivElement>(null);
   const mapInstanceRef = useRef<google.maps.Map | null>(null);
@@ -104,7 +104,6 @@ const GoogleMap: React.FC<{lat: number, lng: number, zoom?: number}> = ({lat, ln
           radius: 300 // 300m accuracy as default
         });
       }
-
     }
   }, [lat, lng, zoom]);
 

web/src/lib/config.ts

@@ -5,20 +5,23 @@
 // Environment type
 export const IS_DEV = import.meta.env.DEV;
 export const IS_PROD = import.meta.env.PROD;
-export const APP_ENV = import.meta.env.VITE_APP_ENV || 'development';
+export const APP_ENV = import.meta.env.VITE_APP_ENV || "development";
 
 // Site configuration
-export const SITE_TITLE = import.meta.env.VITE_SITE_TITLE || 'ERSN Mesh';
+export const SITE_TITLE = import.meta.env.VITE_SITE_TITLE || "My Mesh";
+export const SITE_DESCRIPTION =
+  import.meta.env.VITE_SITE_DESCRIPTION ||
+  "Realtime Meshtastic activity via MQTT.";
 
 // API URL configuration
 const getApiBaseUrl = (): string => {
   // In production, use the same domain (empty string base URL)
   if (IS_PROD) {
-    return import.meta.env.VITE_API_BASE_URL || '';
+    return import.meta.env.VITE_API_BASE_URL || "";
   }
-  
+
   // In development, use the configured base URL with fallback
-  return import.meta.env.VITE_API_BASE_URL || 'http://localhost:8080';
+  return import.meta.env.VITE_API_BASE_URL || "http://localhost:8080";
 };
 
 export const API_BASE_URL = getApiBaseUrl();
@@ -26,4 +29,4 @@ export const API_BASE_URL = getApiBaseUrl();
 // API endpoints
 export const API_ENDPOINTS = {
   STREAM: `${API_BASE_URL}/api/stream`,
-};
+};

web/src/types/google-maps.d.ts

@@ -0,0 +1,68 @@
+// Type definitions for Google Maps JavaScript API
+declare namespace google {
+  namespace maps {
+    class Map {
+      constructor(
+        mapDiv: Element,
+        opts?: MapOptions
+      );
+    }
+
+    class Marker {
+      constructor(opts?: MarkerOptions);
+    }
+
+    class Circle {
+      constructor(opts?: CircleOptions);
+    }
+
+    interface MapOptions {
+      center?: { lat: number; lng: number };
+      zoom?: number;
+      mapTypeId?: string;
+      mapTypeControl?: boolean;
+      streetViewControl?: boolean;
+      fullscreenControl?: boolean;
+      zoomControl?: boolean;
+      styles?: Array<any>;
+    }
+
+    interface MarkerOptions {
+      position?: { lat: number; lng: number };
+      map?: Map;
+      title?: string;
+      icon?: any;
+    }
+
+    interface CircleOptions {
+      strokeColor?: string;
+      strokeOpacity?: number;
+      strokeWeight?: number;
+      fillColor?: string;
+      fillOpacity?: number;
+      map?: Map;
+      center?: { lat: number; lng: number };
+      radius?: number;
+    }
+
+    const MapTypeId: {
+      ROADMAP: string;
+      SATELLITE: string;
+      HYBRID: string;
+      TERRAIN: string;
+    };
+
+    const SymbolPath: {
+      CIRCLE: number;
+      FORWARD_CLOSED_ARROW: number;
+      FORWARD_OPEN_ARROW: number;
+      BACKWARD_CLOSED_ARROW: number;
+      BACKWARD_OPEN_ARROW: number;
+    };
+  }
+}
+
+// Extend the Window interface
+interface Window {
+  google: typeof google;
+}