Added cooperative gesture handling for all 3D samples (#860)

oppenheimera · willum070 · web-flow · commit 86489b60e11f · 2025-10-21T12:27:23.000-07:00
Co-authored-by: William French &lt;wfrench@google.com&gt;
diff --git a/samples/3d-accessibility-features/index.ts b/samples/3d-accessibility-features/index.ts
@@ -12,7 +12,8 @@ async function initMap() {
 
   const map = new Map3DElement({
     center: { lat: 34.8405, lng : -111.7909, altitude: 1322.70 }, range: 13279.50, tilt: 67.44 ,heading: 0.01,
-    mode: 'SATELLITE'
+    mode: 'SATELLITE',
+    gestureHandling: "COOPERATIVE"
   });
 
   // Set LatLng and title text for the markers. The first marker (Boynton Pass)
diff --git a/samples/3d-camera-boundary/index.ts b/samples/3d-camera-boundary/index.ts
@@ -14,6 +14,7 @@ async function initMap() {
         tilt: 67.5,
         mode: 'HYBRID',
         bounds: {south: -48.30, west: 163.56, north: -32.86, east: -180},
+        gestureHandling: "COOPERATIVE"
     });
 
     document.body.append(map);
diff --git a/samples/3d-camera-to-around/index.ts b/samples/3d-camera-to-around/index.ts
@@ -10,7 +10,7 @@ async function init() {
     const { Map3DElement } = await google.maps.importLibrary("maps3d");
 
     const map = new Map3DElement(
-        { center: { lat: 37.79810773998413, lng : -122.41784275049939, altitude: 89.08476932205978 }, range: 6062.016931506805, tilt: 81.17100663963272, heading: -56.047035719765596, }
+        { center: { lat: 37.79810773998413, lng : -122.41784275049939, altitude: 89.08476932205978 }, range: 6062.016931506805, tilt: 81.17100663963272, heading: -56.047035719765596, gestureHandling: "COOPERATIVE" }
     );
 
     map.mode = "SATELLITE";
diff --git a/samples/3d-label-toggle/index.ts b/samples/3d-label-toggle/index.ts
@@ -11,7 +11,7 @@ async function init() {
     const { Map3DElement, MapMode } = await google.maps.importLibrary("maps3d");
 
     map = new Map3DElement(
-        { center: { lat: 37.79810773998413, lng: -122.41784275049939, altitude: 89.08476932205978 }, range: 6062.016931506805, tilt: 81.17100663963272, heading: -56.047035719765596, }
+        { center: { lat: 37.79810773998413, lng: -122.41784275049939, altitude: 89.08476932205978 }, range: 6062.016931506805, tilt: 81.17100663963272, heading: -56.047035719765596, gestureHandling: "COOPERATIVE" }
     );
 
     map.mode = MapMode.SATELLITE;
diff --git a/samples/3d-marker-click-event/index.ts b/samples/3d-marker-click-event/index.ts
@@ -18,6 +18,7 @@ async function initMap() {
     const map = new Map3DElement({
         ...originalCamera,
         mode: "SATELLITE",
+        gestureHandling: "COOPERATIVE"
     });
 
     // Create the interactive marker and set the attributes.
diff --git a/samples/3d-marker-collision-behavior/index.ts b/samples/3d-marker-collision-behavior/index.ts
@@ -16,6 +16,7 @@ async function init() {
         center: { lat: 47.6094, lng: -122.3390, altitude: 0 },
         range: 1000,
         mode: MapMode.HYBRID,
+        gestureHandling: "COOPERATIVE"
     });
 
     for (const [lng, lat] of positions) {
diff --git a/samples/3d-marker-customization/index.ts b/samples/3d-marker-customization/index.ts
@@ -14,7 +14,8 @@ async function init() {
         center: { lat: 37.4176, lng: -122.02, altitude: 0 },
         tilt: 67.5,
         range: 7000,
-        mode: 'HYBRID'
+        mode: 'HYBRID',
+        gestureHandling: "COOPERATIVE"
     });
 
     map.mode = "SATELLITE";
diff --git a/samples/3d-marker-graphics/index.ts b/samples/3d-marker-graphics/index.ts
@@ -14,8 +14,9 @@ async function init() {
     const map = new Map3DElement({
         center: { lat: 37.426, lng: -122.082, altitude: 18 },
         tilt: 67.5,
-        range: 4000, 
-        mode: 'SATELLITE'
+        range: 4000,
+        mode: 'SATELLITE',
+        gestureHandling: "COOPERATIVE"
     });
 
     // A marker with a with a URL pointing to a PNG.
diff --git a/samples/3d-marker-interactive/index.ts b/samples/3d-marker-interactive/index.ts
@@ -14,7 +14,8 @@ async function init() {
         center: { lat: 37.4690, lng: -122.1074, altitude: 0 },
         tilt: 67.5,
         range: 45000,
-        mode: 'HYBRID'
+        mode: 'HYBRID',
+        gestureHandling: "COOPERATIVE"
     });
 
     map.mode = "SATELLITE";
diff --git a/samples/3d-model-interactive/index.ts b/samples/3d-model-interactive/index.ts
@@ -13,6 +13,7 @@ async function init() {
     const map = new Map3DElement({
         center: { lat: 39.1178, lng: -106.4452, altitude: 4395.4952 }, range: 1500, tilt: 74, heading: 0,
         mode: "HYBRID",
+        gestureHandling: "COOPERATIVE"
     });
 
     const model = new Model3DInteractiveElement({
diff --git a/samples/3d-model/index.ts b/samples/3d-model/index.ts
@@ -13,6 +13,7 @@ async function init() {
     const map = new Map3DElement({
         center: { lat: 39.1178, lng: -106.4452, altitude: 4395.4952 }, range: 1500, tilt: 74, heading: 0,
         mode: "HYBRID",
+        gestureHandling: "COOPERATIVE"
     });
 
     const model = new Model3DElement({
diff --git a/samples/3d-places-autocomplete/index.ts b/samples/3d-places-autocomplete/index.ts
@@ -17,7 +17,8 @@ async function init() {
         range: 0,
         heading: 0,
         roll: 0,
-        mode: 'HYBRID'
+        mode: 'HYBRID',
+        gestureHandling: "COOPERATIVE"
     });
 
     document.body.append(map);
diff --git a/samples/3d-places/index.ts b/samples/3d-places/index.ts
@@ -10,11 +10,12 @@ async function init() {
     const { Map3DElement } = await google.maps.importLibrary("maps3d");
     {  }
     map3DElement = new Map3DElement({
-        center: { lat: 51.532, lng : -0.124, altitude: 30 }, 
-        range: 1400, 
+        center: { lat: 51.532, lng : -0.124, altitude: 30 },
+        range: 1400,
         tilt: 64,
         heading: -5,
-        mode: 'HYBRID'
+        mode: 'HYBRID',
+        gestureHandling: "COOPERATIVE"
     });
 
     document.body.append(map3DElement);
diff --git a/samples/3d-polygon-click-event/index.ts b/samples/3d-polygon-click-event/index.ts
@@ -14,6 +14,7 @@ async function init() {
         heading: 340,
         tilt: 70,
         mode: MapMode.HYBRID,
+        gestureHandling: "COOPERATIVE"
     });
 
     document.body.append(map);
diff --git a/samples/3d-polygon-extruded-hole/index.ts b/samples/3d-polygon-extruded-hole/index.ts
@@ -14,6 +14,7 @@ async function init() {
         heading: 340,
         tilt: 70,
         mode: MapMode.HYBRID,
+        gestureHandling: "COOPERATIVE"
     });
 
     const polygonOptions = {
diff --git a/samples/3d-polygon/index.ts b/samples/3d-polygon/index.ts
@@ -14,6 +14,7 @@ async function init() {
         heading: 340,
         tilt: 70,
         mode: MapMode.HYBRID,
+        gestureHandling: "COOPERATIVE"
     });
 
     const polygonOptions = {
diff --git a/samples/3d-polyline-click-event/index.ts b/samples/3d-polyline-click-event/index.ts
@@ -13,6 +13,7 @@ async function init() {
      map = new Map3DElement({
         center: { lat: 37.7927, lng : -122.4020, altitude: 65.93 }, range: 3362.87, tilt: 64.01 ,heading: 25.00,
         mode: MapMode.SATELLITE,
+        gestureHandling: "COOPERATIVE"
     });
 
     document.body.append(map);
diff --git a/samples/3d-polyline-extruded/index.ts b/samples/3d-polyline-extruded/index.ts
@@ -13,6 +13,7 @@ async function init() {
     map = new Map3DElement({
         center: { lat: 37.7927, lng: -122.4020, altitude: 65.93 }, range: 3362.87, tilt: 64.01, heading: 25.00,
         mode: MapMode.SATELLITE,
+        gestureHandling: "COOPERATIVE"
     });
 
     document.body.append(map);
diff --git a/samples/3d-polyline/index.ts b/samples/3d-polyline/index.ts
@@ -13,6 +13,7 @@ async function init() {
      map = new Map3DElement({
         center: { lat: 37.7927, lng : -122.4020, altitude: 65.93 }, range: 3362.87, tilt: 64.01 ,heading: 25.00,
         mode: MapMode.SATELLITE,
+        gestureHandling: "COOPERATIVE"
     });
 
     document.body.append(map);
diff --git a/samples/3d-popover-location/index.ts b/samples/3d-popover-location/index.ts
@@ -12,6 +12,7 @@ const { AltitudeMode, Map3DElement, MapMode, PopoverElement } = await google.map
 const map = new Map3DElement({
     center: { lat: 37.8204, lng : -122.4783, altitude: 0.407 }, range: 4000, tilt: 74 ,heading: 38,
     mode: MapMode.HYBRID,
+    gestureHandling: "COOPERATIVE"
 });
 
 const popover = new PopoverElement({
diff --git a/samples/3d-popover-marker/index.ts b/samples/3d-popover-marker/index.ts
@@ -12,6 +12,7 @@ async function init() {
     const map = new Map3DElement({
         center: { lat: 37.8204, lng: -122.4783, altitude: 0.407 }, range: 4000, tilt: 74, heading: 38,
         mode: MapMode.HYBRID,
+        gestureHandling: "COOPERATIVE"
     });
 
     // Popovers can only be added to interactive Markers
diff --git a/samples/3d-simple-map/index.ts b/samples/3d-simple-map/index.ts
@@ -12,7 +12,8 @@ async function initMap() {
     const map = new Map3DElement({
         center: { lat: 37.7704, lng: -122.3985, altitude: 500 },
         tilt: 67.5,
-        mode: 'HYBRID'
+        mode: 'HYBRID',
+        gestureHandling: "COOPERATIVE"
     });
 
     document.body.append(map);
diff --git a/samples/3d-simple-marker/index.ts b/samples/3d-simple-marker/index.ts
@@ -13,7 +13,8 @@ async function init() {
         center: { lat: 37.4239163, lng: -122.0947209, altitude: 0 },
         tilt: 67.5,
         range: 1000,
-        mode: 'SATELLITE'
+        mode: 'SATELLITE',
+        gestureHandling: "COOPERATIVE"
     });
     
     const marker = new Marker3DElement({
