create GoogleMap and only handle camera change when map is active

Author: caspg

src/components/GoogleMap.tsx

@@ -0,0 +1,64 @@
+import {
+  Map as GoogleMapGL,
+  APIProvider,
+  MapCameraChangedEvent,
+} from "@vis.gl/react-google-maps";
+import { GoogleMapsSource, MapState } from "../types";
+import { useState } from "react";
+
+interface GoogleMapProps {
+  mapState: MapState;
+  source: GoogleMapsSource;
+  apiKey: string;
+  synchronized: boolean;
+  onMapChange: (state: Partial<MapState>) => void;
+  onViewStateChange: (state: Partial<MapState>) => void;
+}
+
+export function GoogleMap({
+  mapState: effectiveMapState,
+  source,
+  apiKey,
+  synchronized,
+  onMapChange,
+  onViewStateChange,
+}: GoogleMapProps) {
+  const [isActive, setIsActive] = useState(false);
+
+  const handleCameraChange = (event: MapCameraChangedEvent) => {
+    const newState: Partial<MapState> = {
+      center: [event.detail.center.lng, event.detail.center.lat],
+      zoom: event.detail.zoom,
+      bearing: event.detail.heading ?? effectiveMapState.bearing,
+      pitch: event.detail.tilt ?? effectiveMapState.pitch,
+    };
+
+    if (synchronized) {
+      onMapChange(newState);
+    } else {
+      onViewStateChange(newState);
+    }
+  };
+
+  return (
+    <APIProvider apiKey={apiKey}>
+      <div className="relative w-full h-full">
+        <GoogleMapGL
+          disableDefaultUI={true}
+          center={{
+            lat: effectiveMapState.center[1],
+            lng: effectiveMapState.center[0],
+          }}
+          zoom={effectiveMapState.zoom}
+          mapTypeId={source.mapType}
+          heading={effectiveMapState.bearing}
+          tilt={effectiveMapState.pitch}
+          gestureHandling="greedy"
+          onMouseover={() => setIsActive(true)}
+          onMouseout={() => setIsActive(false)}
+          onCameraChanged={isActive ? handleCameraChange : undefined}
+        />
+      </div>
+    </APIProvider>
+  );
+}

src/components/Map.tsx

@@ -5,7 +5,7 @@ import {
   Source,
   NavigationControl,
 } from "@vis.gl/react-maplibre";
-import { Map as GoogleMap, APIProvider } from "@vis.gl/react-google-maps";
+import { GoogleMap } from "./GoogleMap";
 import { SourceSpecification } from "maplibre-gl";
 
 import { MapState } from "../types";
@@ -95,36 +95,14 @@ export function Map({
     }
 
     return (
-      <APIProvider apiKey={state.apiKeys.googleMaps}>
-        <div className="relative w-full h-full">
-          <GoogleMap
-            disableDefaultUI={true}
-            center={{
-              lat: effectiveMapState.center[1],
-              lng: effectiveMapState.center[0],
-            }}
-            zoom={effectiveMapState.zoom}
-            mapTypeId={source.mapType}
-            heading={effectiveMapState.bearing}
-            tilt={effectiveMapState.pitch}
-            gestureHandling="greedy"
-            onCameraChanged={({ detail: { center, zoom, heading, tilt } }) => {
-              const newState: Partial<MapState> = {
-                center: [center.lng, center.lat],
-                zoom,
-                bearing: heading ?? effectiveMapState.bearing,
-                pitch: tilt ?? effectiveMapState.pitch,
-              };
-
-              if (synchronized) {
-                onMapChange(newState);
-              } else {
-                onViewStateChange(newState);
-              }
-            }}
-          />
-        </div>
-      </APIProvider>
+      <GoogleMap
+        mapState={effectiveMapState}
+        source={source}
+        apiKey={state.apiKeys.googleMaps}
+        synchronized={synchronized}
+        onMapChange={onMapChange}
+        onViewStateChange={onViewStateChange}
+      />
     );
   }