Show point details on marker click

Clicking a point on the job map opens an InfoWindow with its full
telemetry readout (utility, fix, recorded time, depth, frequency,
current, signal, gain, locate mode, phase, compass, distortion, GPS
accuracy/satellites/HDOP, altitude, coordinates) — only the fields the
point actually has, since instruments vary in what they report.
Clicking empty map area dismisses it.

MapPoint gained altitude/hAccuracy/vAccuracy/satellites/hdop/phaseDeg,
which the backend already returned but the frontend type omitted.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

web/components/map/google/GoogleJobMap.tsx

@@ -1,7 +1,7 @@
 /// <reference types="google.maps" />
-import { APIProvider, Map as GoogleMap, useMap } from '@vis.gl/react-google-maps';
-import { useEffect, useRef } from 'react';
-import { JobMapProps, MapPoint, pointSummary, UTILITY_COLORS } from '../types';
+import { APIProvider, InfoWindow, Map as GoogleMap, useMap } from '@vis.gl/react-google-maps';
+import { useEffect, useRef, useState } from 'react';
+import { JobMapProps, MapPoint, pointDetailRows, UTILITY_COLORS } from '../types';
 
 const API_KEY = process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY || '';
 
@@ -19,10 +19,20 @@ function orderKey(p: MapPoint): number {
 // Draws points as colored circles plus one polyline per utility run.
 // Imperative overlays (google.maps.Marker/Polyline) are used because
 // @vis.gl/react-google-maps has no polyline component.
-function PointsLayer({ points, fitBounds }: { points: MapPoint[]; fitBounds: boolean }) {
+function PointsLayer({
+  points,
+  fitBounds,
+  onSelect,
+}: {
+  points: MapPoint[];
+  fitBounds: boolean;
+  onSelect: (point: MapPoint) => void;
+}) {
   const map = useMap();
   const overlaysRef = useRef<{ setMap: (m: google.maps.Map | null) => void }[]>([]);
   const fittedCountRef = useRef(0);
+  const onSelectRef = useRef(onSelect);
+  onSelectRef.current = onSelect;
 
   useEffect(() => {
     if (!map) {
@@ -59,6 +69,7 @@ function PointsLayer({ points, fitBounds }: { points: MapPoint[]; fitBounds: boo
         const marker = new google.maps.Marker({
           position: { lat: p.lat, lng: p.lng },
           map,
+          cursor: 'pointer',
           icon: {
             path: google.maps.SymbolPath.CIRCLE,
             scale: 5,
@@ -67,8 +78,8 @@ function PointsLayer({ points, fitBounds }: { points: MapPoint[]; fitBounds: boo
             strokeColor: '#ffffff',
             strokeWeight: 1.5,
           },
-          title: `${pointSummary(p)}\n${new Date(p.recordedAt).toLocaleString()}`,
         });
+        marker.addListener('click', () => onSelectRef.current(p));
         overlaysRef.current.push(marker);
       }
     }
@@ -84,7 +95,28 @@ function PointsLayer({ points, fitBounds }: { points: MapPoint[]; fitBounds: boo
   return null;
 }
 
+function PointDetails({ point, onClose }: { point: MapPoint; onClose: () => void }) {
+  return (
+    <InfoWindow position={{ lat: point.lat, lng: point.lng }} onCloseClick={onClose}>
+      <div style={{ fontFamily: 'sans-serif', minWidth: 200 }}>
+        <table style={{ borderCollapse: 'collapse' }}>
+          <tbody>
+            {pointDetailRows(point).map(([label, value]) => (
+              <tr key={label}>
+                <td style={{ color: '#666', paddingRight: '0.75rem', whiteSpace: 'nowrap' }}>{label}</td>
+                <td style={{ fontWeight: 600 }}>{value}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </InfoWindow>
+  );
+}
+
 export default function GoogleJobMap({ points, fitBounds = true, heightPx = 480 }: JobMapProps) {
+  const [selected, setSelected] = useState<MapPoint | null>(null);
+
   if (!API_KEY) {
     return (
       <div
@@ -103,6 +135,10 @@ export default function GoogleJobMap({ points, fitBounds = true, heightPx = 480
     );
   }
 
+  // A point can be re-fetched (new object identity) between renders; keep the
+  // InfoWindow anchored to the latest copy of the same point by id.
+  const selectedCurrent = selected ? (points.find((p) => p.id === selected.id) ?? selected) : null;
+
   return (
     <div style={{ height: heightPx, borderRadius: 8, overflow: 'hidden' }}>
       <APIProvider apiKey={API_KEY}>
@@ -111,8 +147,10 @@ export default function GoogleJobMap({ points, fitBounds = true, heightPx = 480
           defaultZoom={points[0] ? 18 : DEFAULT_ZOOM}
           mapTypeId="hybrid"
           gestureHandling="greedy"
+          onClick={() => setSelected(null)}
         >
-          <PointsLayer points={points} fitBounds={fitBounds} />
+          <PointsLayer points={points} fitBounds={fitBounds} onSelect={setSelected} />
+          {selectedCurrent && <PointDetails point={selectedCurrent} onClose={() => setSelected(null)} />}
         </GoogleMap>
       </APIProvider>
     </div>