fix icon

apps/edr-freight-web/backoffice/src/pages/fleet/TrackingPage.tsx

@@ -60,6 +60,15 @@ const StatBox = ({ label, value }: { label: string; value: string }) => (
 
 type LatLng = { lat: number; lng: number };
 
+/** Flip a flag once the map (and thus the Maps JS classes) is loaded. */
+function ReadyProbe({ onReady }: { onReady: () => void }) {
+  const map = useMap();
+  useEffect(() => {
+    if (map) onReady();
+  }, [map, onReady]);
+  return null;
+}
+
 /** Fit the map to the current markers (or center on a single one). */
 function FitBounds({ points }: { points: LatLng[] }) {
   const map = useMap();
@@ -81,7 +90,7 @@ function FitBounds({ points }: { points: LatLng[] }) {
 function useAddress(lat: number, lng: number): string | null {
   const [addr, setAddr] = useState<string | null>(null);
   useEffect(() => {
-    if (typeof google === "undefined") return;
+    if (typeof google === "undefined" || !google.maps?.Geocoder) return;
     setAddr(null);
     let cancelled = false;
     new google.maps.Geocoder().geocode({ location: { lat, lng } }, (res, status) => {
@@ -144,6 +153,7 @@ export function TrackingPage() {
   const qc = useQueryClient();
   const [selectedId, setSelectedId] = useState<string | null>(null);
   const [hoverId, setHoverId] = useState<string | null>(null);
+  const [mapsReady, setMapsReady] = useState(false);
   const [modalOpen, setModalOpen] = useState(false);
   const [editDevice, setEditDevice] = useState<GpsDevice | null>(null);
   const [form, setForm] = useState({ imei: "", name: "", vehicleId: "" });
@@ -203,7 +213,8 @@ export function TrackingPage() {
 
   // Teardrop pin colored by state with a white truck glyph inside.
   const markerIcon = (d: GpsDevice, selectedFlag: boolean): google.maps.Icon | undefined => {
-    if (typeof google === "undefined") return undefined;
+    // Maps API loads async — Size/Point classes may not exist yet at first render.
+    if (typeof google === "undefined" || !google.maps?.Size || !mapsReady) return undefined;
     const color = selectedFlag ? freightBrand.primary : d.online ? "#2f80ed" : "#95a5a6";
     const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="40" height="48" viewBox="0 0 40 48">
       <path d="M20 2C10 2 2 10 2 20c0 12 18 26 18 26s18-14 18-26C38 10 30 2 20 2Z" fill="${color}" stroke="#ffffff" stroke-width="1.5"/>
@@ -304,6 +315,7 @@ export function TrackingPage() {
                     disableDefaultUI={false}
                     style={{ width: "100%", height: "100%" }}
                   >
+                    <ReadyProbe onReady={() => setMapsReady(true)} />
                     {positioned.map(({ d, lat, lng }) => (
                       <Marker
                         key={d.id}