lat and lng changed to render properly

src/components/dv/StoreDetail.tsx

@@ -6,6 +6,10 @@ import { Spinner } from '../reusable/Spinner';
 import { EmptyState } from '../reusable/EmptyState';
 import { ArrowLeft, Store, User, Truck, MapPin, TrendingUp, Phone, Navigation2, Edit3, Navigation, Mail, FileText, Hash } from 'lucide-react';
 import { Button } from '../buttons/Button';
+import { useJsApiLoader, GoogleMap } from '@react-google-maps/api';
+import { CustomAdvancedMarker } from '../maps/CustomAdvancedMarker';
+
+const libraries: ("marker")[] = ["marker"];
 
 export interface StoreDetailProps {
    instanceId: string | number;
@@ -19,6 +23,14 @@ export function StoreDetail({ instanceId, onBack, onEdit, refreshKey }: StoreDet
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState<string | null>(null);
 
+   const isLocalhost = typeof window !== 'undefined' && (window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1');
+
+   const { isLoaded } = useJsApiLoader({
+      id: 'google-map-script',
+      googleMapsApiKey: isLocalhost ? '' : (import.meta.env.VITE_GOOGLE_MAPS_API_KEY || ''),
+      libraries
+   });
+
    useEffect(() => {
       let live = true;
       async function run() {
@@ -123,8 +135,8 @@ export function StoreDetail({ instanceId, onBack, onEdit, refreshKey }: StoreDet
          try { locObj = JSON.parse(locObj); } catch (e) { }
       }
       if (locObj && typeof locObj === 'object') {
-         lat = (locObj as any).latitude;
-         lng = (locObj as any).longitude;
+         lat = (locObj as any).latitude || (locObj as any).lat;
+         lng = (locObj as any).longitude || (locObj as any).lng;
       }
    }
 
@@ -399,15 +411,25 @@ export function StoreDetail({ instanceId, onBack, onEdit, refreshKey }: StoreDet
                   <div className="bg-slate-100 flex-1 relative min-h-[250px]">
                      {lat && lng ? (
                         <>
-                           <iframe
-                              title="Store Location Map"
-                              width="100%"
-                              height="100%"
-                              style={{ border: 0, position: 'absolute', inset: 0 }}
-                              loading="lazy"
-                              allowFullScreen
-                              src={`https://maps.google.com/maps?q=${lat},${lng}&hl=en&z=15&output=embed`}
-                           ></iframe>
+                           {!isLoaded ? (
+                              <div className="absolute inset-0 flex items-center justify-center bg-slate-50/50">
+                                 <Spinner label="Loading map..." />
+                              </div>
+                           ) : (
+                              <GoogleMap
+                                 mapContainerStyle={{ width: '100%', height: '100%', minHeight: '250px' }}
+                                 center={{ lat, lng }}
+                                 zoom={15}
+                                 options={{
+                                    streetViewControl: false,
+                                    mapTypeControl: false,
+                                    fullscreenControl: false,
+                                    mapId: "DEMO_MAP_ID"
+                                 }}
+                              >
+                                 <CustomAdvancedMarker position={{ lat, lng }} />
+                              </GoogleMap>
+                           )}
                            <div
                               className="absolute bottom-3 right-3 w-8 h-8 bg-[var(--tiles-card-bg)]/90 backdrop-blur-sm rounded shadow flex items-center justify-center cursor-pointer hover:bg-[var(--tiles-card-bg)] transition-colors"
                               onClick={() => window.open(`https://maps.google.com/maps?q=${lat},${lng}`, '_blank')}

src/components/forms/fields/GeolocationInput.tsx

@@ -26,7 +26,7 @@ export function GeolocationInput({
 }) {
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
-  
+
   const [isMapModalOpen, setIsMapModalOpen] = useState(false);
   const [mapMarkerPos, setMapMarkerPos] = useState<{ lat: number; lng: number } | null>(null);
 
@@ -162,15 +162,15 @@ export function GeolocationInput({
       {required && !hasValidCoords && <input type="text" className="sr-only" required tabIndex={-1} />}
 
       {isMapModalOpen && (
-        <Modal 
-          open={isMapModalOpen} 
-          onClose={() => setIsMapModalOpen(false)} 
+        <Modal
+          open={isMapModalOpen}
+          onClose={() => setIsMapModalOpen(false)}
           title="Select Location on Map"
           width="lg"
         >
           <div className="flex flex-col gap-4">
             <p className="text-sm text-slate-600">Click on the map to place a pin at the desired store location.</p>
-            
+
             <div className="border border-slate-200 rounded-lg overflow-hidden relative min-h-[400px] bg-slate-100 flex items-center justify-center">
               {!isLoaded ? (
                 <span className="text-slate-500 font-medium flex items-center gap-2">