gitea_admin/krishnasales_mobile
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

lat and lng changed to render properly

Browse Source
This commit is contained in:
suryac 2026-08-06 17:20:51 +05:30
parent e78aa98677
commit 92e795c712
2 changed files with 38 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
src/components/dv/StoreDetail.tsx
View File

@ -6,6 +6,10 @@ import { Spinner } from '../reusable/Spinner';
import { EmptyState } from '../reusable/EmptyState'; import { EmptyState } from '../reusable/EmptyState';
import { ArrowLeft, Store, User, Truck, MapPin, TrendingUp, Phone, Navigation2, Edit3, Navigation, Mail, FileText, Hash } from 'lucide-react'; import { ArrowLeft, Store, User, Truck, MapPin, TrendingUp, Phone, Navigation2, Edit3, Navigation, Mail, FileText, Hash } from 'lucide-react';
import { Button } from '../buttons/Button'; 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 { export interface StoreDetailProps {
instanceId: string | number; instanceId: string | number;
@ -19,6 +23,14 @@ export function StoreDetail({ instanceId, onBack, onEdit, refreshKey }: StoreDet
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null); 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(() => { useEffect(() => {
let live = true; let live = true;
async function run() { async function run() {
@ -123,8 +135,8 @@ export function StoreDetail({ instanceId, onBack, onEdit, refreshKey }: StoreDet
try { locObj = JSON.parse(locObj); } catch (e) { } try { locObj = JSON.parse(locObj); } catch (e) { }
} }
if (locObj && typeof locObj === 'object') { if (locObj && typeof locObj === 'object') {
lat = (locObj as any).latitude; lat = (locObj as any).latitude || (locObj as any).lat;
lng = (locObj as any).longitude; 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]"> <div className="bg-slate-100 flex-1 relative min-h-[250px]">
{lat && lng ? ( {lat && lng ? (
<> <>
<iframe {!isLoaded ? (
title="Store Location Map" <div className="absolute inset-0 flex items-center justify-center bg-slate-50/50">
width="100%" <Spinner label="Loading map..." />
height="100%" </div>
style={{ border: 0, position: 'absolute', inset: 0 }} ) : (
loading="lazy" <GoogleMap
allowFullScreen mapContainerStyle={{ width: '100%', height: '100%', minHeight: '250px' }}
src={`https://maps.google.com/maps?q=${lat},${lng}&hl=en&z=15&output=embed`} center={{ lat, lng }}
></iframe> zoom={15}
options={{
streetViewControl: false,
mapTypeControl: false,
fullscreenControl: false,
mapId: "DEMO_MAP_ID"
}}
>
<CustomAdvancedMarker position={{ lat, lng }} />
</GoogleMap>
)}
<div <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" 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')} onClick={() => window.open(`https://maps.google.com/maps?q=${lat},${lng}`, '_blank')}