[google_maps_flutter_web] Options to disable tilt controls and configure gesture handling

packages/google_maps_flutter/google_maps_flutter/CHANGELOG.md

@@ -1,5 +1,6 @@
-## NEXT
+## 2.2.0
 
+* Adds options for gesture handling and tilt controls on web.
 * Ignores unnecessary import warnings in preparation for [upcoming Flutter changes](https://github.com/flutter/flutter/pull/106316).
 
 ## 2.1.8

packages/google_maps_flutter/google_maps_flutter/lib/google_maps_flutter.dart

@@ -28,6 +28,7 @@ export 'package:google_maps_flutter_platform_interface/google_maps_flutter_platf
         Cap,
         Circle,
         CircleId,
+        WebGestureHandling,
         InfoWindow,
         JointType,
         LatLng,

packages/google_maps_flutter/google_maps_flutter/lib/src/google_map.dart

@@ -89,6 +89,7 @@ class GoogleMap extends StatefulWidget {
     required this.initialCameraPosition,
     this.onMapCreated,
     this.gestureRecognizers = const <Factory<OneSequenceGestureRecognizer>>{},
+    this.webGestureHandling,
     this.compassEnabled = true,
     this.mapToolbarEnabled = true,
     this.cameraTargetBounds = CameraTargetBounds.unbounded,
@@ -100,6 +101,7 @@ class GoogleMap extends StatefulWidget {
     this.zoomGesturesEnabled = true,
     this.liteModeEnabled = false,
     this.tiltGesturesEnabled = true,
+    this.fortyFiveDegreeImageryEnabled = false,
     this.myLocationEnabled = false,
     this.myLocationButtonEnabled = true,
     this.layoutDirection,
@@ -176,6 +178,9 @@ class GoogleMap extends StatefulWidget {
   /// True if the map view should respond to tilt gestures.
   final bool tiltGesturesEnabled;
 
+  /// True if 45 degree imagery should be enabled. Web only.
+  final bool fortyFiveDegreeImageryEnabled;
+
   /// Padding to be set on map. See https://developers.google.com/maps/documentation/android-sdk/map#map_padding for more details.
   final EdgeInsets padding;
 
@@ -279,6 +284,11 @@ class GoogleMap extends StatefulWidget {
   /// were not claimed by any other gesture recognizer.
   final Set<Factory<OneSequenceGestureRecognizer>> gestureRecognizers;
 
+  /// This setting controls how the API handles gestures on the map. Web only.
+  ///
+  /// See [WebGestureHandling] for more details.
+  final WebGestureHandling? webGestureHandling;
+
   /// Creates a [State] for this [GoogleMap].
   @override
   State createState() => _GoogleMapState();
@@ -531,6 +541,7 @@ class _GoogleMapState extends State<GoogleMap> {
 MapConfiguration _configurationFromMapWidget(GoogleMap map) {
   assert(!map.liteModeEnabled || Platform.isAndroid);
   return MapConfiguration(
+    webGestureHandling: map.webGestureHandling,
     compassEnabled: map.compassEnabled,
     mapToolbarEnabled: map.mapToolbarEnabled,
     cameraTargetBounds: map.cameraTargetBounds,
@@ -539,6 +550,7 @@ MapConfiguration _configurationFromMapWidget(GoogleMap map) {
     rotateGesturesEnabled: map.rotateGesturesEnabled,
     scrollGesturesEnabled: map.scrollGesturesEnabled,
     tiltGesturesEnabled: map.tiltGesturesEnabled,
+    fortyFiveDegreeImageryEnabled: map.fortyFiveDegreeImageryEnabled,
     trackCameraPosition: map.onCameraMove != null,
     zoomControlsEnabled: map.zoomControlsEnabled,
     zoomGesturesEnabled: map.zoomGesturesEnabled,

packages/google_maps_flutter/google_maps_flutter/pubspec.yaml

@@ -2,7 +2,7 @@ name: google_maps_flutter
 description: A Flutter plugin for integrating Google Maps in iOS and Android applications.
 repository: https://github.com/flutter/plugins/tree/main/packages/google_maps_flutter/google_maps_flutter
 issue_tracker: https://github.com/flutter/flutter/issues?q=is%3Aissue+is%3Aopen+label%3A%22p%3A+maps%22
-version: 2.1.8
+version: 2.2.0
 
 environment:
   sdk: ">=2.14.0 <3.0.0"
@@ -21,7 +21,8 @@ dependencies:
   flutter:
     sdk: flutter
   flutter_plugin_android_lifecycle: ^2.0.1
-  google_maps_flutter_platform_interface: ^2.2.0
+  google_maps_flutter_platform_interface:
+    path: ../google_maps_flutter_platform_interface
 
 dev_dependencies:
   flutter_test:

packages/google_maps_flutter/google_maps_flutter_platform_interface/CHANGELOG.md

@@ -1,3 +1,7 @@
+## 2.3.0
+
+* Adds options for gesture handling and tilt controls on web.
+
 ## 2.2.0
 
 * Adds new versions of `buildView` and `updateOptions` that take a new option
@@ -19,7 +23,7 @@
 
 ## 2.1.5
 
-Removes dependency on `meta`.
+* Removes dependency on `meta`.
 
 ## 2.1.4
 

packages/google_maps_flutter/google_maps_flutter_platform_interface/lib/src/types/map_configuration.dart

@@ -3,8 +3,7 @@
 // found in the LICENSE file.
 
 import 'package:flutter/widgets.dart';
-
-import 'ui.dart';
+import 'package:google_maps_flutter_platform_interface/google_maps_flutter_platform_interface.dart';
 
 /// Configuration options for the GoogleMaps user interface.
 @immutable
@@ -15,6 +14,7 @@ class MapConfiguration {
   /// as either a full configuration selection, or an update to an existing
   /// configuration where only non-null values are updated.
   const MapConfiguration({
+    this.webGestureHandling,
     this.compassEnabled,
     this.mapToolbarEnabled,
     this.cameraTargetBounds,
@@ -23,6 +23,7 @@ class MapConfiguration {
     this.rotateGesturesEnabled,
     this.scrollGesturesEnabled,
     this.tiltGesturesEnabled,
+    this.fortyFiveDegreeImageryEnabled,
     this.trackCameraPosition,
     this.zoomControlsEnabled,
     this.zoomGesturesEnabled,
@@ -35,6 +36,11 @@ class MapConfiguration {
     this.buildingsEnabled,
   });
 
+  /// This setting controls how the API handles gestures on the map. Web only.
+  ///
+  /// See [WebGestureHandling] for more details.
+  final WebGestureHandling? webGestureHandling;
+
   /// True if the compass UI should be shown.
   final bool? compassEnabled;
 
@@ -47,25 +53,32 @@ class MapConfiguration {
   /// The type of the map.
   final MapType? mapType;
 
-  /// The prefered zoom range.
+  /// The preferred zoom range.
   final MinMaxZoomPreference? minMaxZoomPreference;
 
   /// True if rotate gestures should be enabled.
   final bool? rotateGesturesEnabled;
 
   /// True if scroll gestures should be enabled.
+  ///
+  /// Android/iOS only. For web, see [webGestureHandling].
   final bool? scrollGesturesEnabled;
 
   /// True if tilt gestures should be enabled.
   final bool? tiltGesturesEnabled;
 
+  /// True if 45 degree imagery should be enabled. Web only.
+  final bool? fortyFiveDegreeImageryEnabled;
+
   /// True if camera position changes should trigger notifications.
   final bool? trackCameraPosition;
 
   /// True if zoom controls should be displayed.
   final bool? zoomControlsEnabled;
 
   /// True if zoom gestures should be enabled.
+  ///
+  /// Android/iOS only. For web, see [webGestureHandling].
   final bool? zoomGesturesEnabled;
 
   /// True if the map should use Lite Mode, showing a limited-interactivity
@@ -94,6 +107,9 @@ class MapConfiguration {
   /// that are different from [other].
   MapConfiguration diffFrom(MapConfiguration other) {
     return MapConfiguration(
+      webGestureHandling: webGestureHandling != other.webGestureHandling
+          ? webGestureHandling
+          : null,
       compassEnabled:
           compassEnabled != other.compassEnabled ? compassEnabled : null,
       mapToolbarEnabled: mapToolbarEnabled != other.mapToolbarEnabled
@@ -117,6 +133,10 @@ class MapConfiguration {
       tiltGesturesEnabled: tiltGesturesEnabled != other.tiltGesturesEnabled
           ? tiltGesturesEnabled
           : null,
+      fortyFiveDegreeImageryEnabled:
+          fortyFiveDegreeImageryEnabled != other.fortyFiveDegreeImageryEnabled
+              ? fortyFiveDegreeImageryEnabled
+              : null,
       trackCameraPosition: trackCameraPosition != other.trackCameraPosition
           ? trackCameraPosition
           : null,
@@ -150,6 +170,7 @@ class MapConfiguration {
   /// replacing the previous values.
   MapConfiguration applyDiff(MapConfiguration diff) {
     return MapConfiguration(
+      webGestureHandling: diff.webGestureHandling ?? webGestureHandling,
       compassEnabled: diff.compassEnabled ?? compassEnabled,
       mapToolbarEnabled: diff.mapToolbarEnabled ?? mapToolbarEnabled,
       cameraTargetBounds: diff.cameraTargetBounds ?? cameraTargetBounds,
@@ -160,6 +181,8 @@ class MapConfiguration {
       scrollGesturesEnabled:
           diff.scrollGesturesEnabled ?? scrollGesturesEnabled,
       tiltGesturesEnabled: diff.tiltGesturesEnabled ?? tiltGesturesEnabled,
+      fortyFiveDegreeImageryEnabled:
+          diff.fortyFiveDegreeImageryEnabled ?? fortyFiveDegreeImageryEnabled,
       trackCameraPosition: diff.trackCameraPosition ?? trackCameraPosition,
       zoomControlsEnabled: diff.zoomControlsEnabled ?? zoomControlsEnabled,
       zoomGesturesEnabled: diff.zoomGesturesEnabled ?? zoomGesturesEnabled,
@@ -176,6 +199,7 @@ class MapConfiguration {
 
   /// True if no options are set.
   bool get isEmpty =>
+      webGestureHandling == null &&
       compassEnabled == null &&
       mapToolbarEnabled == null &&
       cameraTargetBounds == null &&
@@ -184,6 +208,7 @@ class MapConfiguration {
       rotateGesturesEnabled == null &&
       scrollGesturesEnabled == null &&
       tiltGesturesEnabled == null &&
+      fortyFiveDegreeImageryEnabled == null &&
       trackCameraPosition == null &&
       zoomControlsEnabled == null &&
       zoomGesturesEnabled == null &&
@@ -204,6 +229,7 @@ class MapConfiguration {
       return false;
     }
     return other is MapConfiguration &&
+        webGestureHandling == other.webGestureHandling &&
         compassEnabled == other.compassEnabled &&
         mapToolbarEnabled == other.mapToolbarEnabled &&
         cameraTargetBounds == other.cameraTargetBounds &&
@@ -212,6 +238,7 @@ class MapConfiguration {
         rotateGesturesEnabled == other.rotateGesturesEnabled &&
         scrollGesturesEnabled == other.scrollGesturesEnabled &&
         tiltGesturesEnabled == other.tiltGesturesEnabled &&
+        fortyFiveDegreeImageryEnabled == other.fortyFiveDegreeImageryEnabled &&
         trackCameraPosition == other.trackCameraPosition &&
         zoomControlsEnabled == other.zoomControlsEnabled &&
         zoomGesturesEnabled == other.zoomGesturesEnabled &&
@@ -226,6 +253,7 @@ class MapConfiguration {
 
   @override
   int get hashCode => Object.hash(
+        webGestureHandling,
         compassEnabled,
         mapToolbarEnabled,
         cameraTargetBounds,
@@ -234,6 +262,7 @@ class MapConfiguration {
         rotateGesturesEnabled,
         scrollGesturesEnabled,
         tiltGesturesEnabled,
+        fortyFiveDegreeImageryEnabled,
         trackCameraPosition,
         zoomControlsEnabled,
         zoomGesturesEnabled,

packages/google_maps_flutter/google_maps_flutter_platform_interface/lib/src/types/types.dart

@@ -34,3 +34,4 @@ export 'utils/marker.dart';
 export 'utils/polygon.dart';
 export 'utils/polyline.dart';
 export 'utils/tile_overlay.dart';
+export 'web_gesture_handling.dart';

packages/google_maps_flutter/google_maps_flutter_platform_interface/lib/src/types/web_gesture_handling.dart

@@ -0,0 +1,22 @@
+// Copyright 2013 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+/// This setting controls how the API handles gestures on the map
+enum WebGestureHandling {
+  /// Scroll events and one-finger touch gestures scroll the page, and do not
+  /// zoom or pan the map. Two-finger touch gestures pan and zoom the map.
+  /// Scroll events with a ctrl key or ⌘ key pressed zoom the map. In this mode
+  /// the map cooperates with the page.
+  cooperative,
+
+  /// All touch gestures and scroll events pan or zoom the map.
+  greedy,
+
+  /// The map cannot be panned or zoomed by user gestures.
+  none,
+
+  /// (default) Gesture handling is either cooperative or greedy, depending on
+  /// whether the page is scrollable or in an iframe.
+  auto,
+}

packages/google_maps_flutter/google_maps_flutter_platform_interface/pubspec.yaml

@@ -4,7 +4,7 @@ repository: https://github.com/flutter/plugins/tree/main/packages/google_maps_fl
 issue_tracker: https://github.com/flutter/flutter/issues?q=is%3Aissue+is%3Aopen+label%3A%22p%3A+maps%22
 # NOTE: We strongly prefer non-breaking changes, even at the expense of a
 # less-clean API. See https://flutter.dev/go/platform-interface-breaking-changes
-version: 2.2.0
+version: 2.3.0
 
 environment:
   sdk: '>=2.12.0 <3.0.0'

packages/google_maps_flutter/google_maps_flutter_web/CHANGELOG.md

@@ -1,3 +1,7 @@
+## 0.4.1
+
+* Adds options for gesture handling and tilt controls.
+
 ## 0.4.0+1
 
 * Updates `README.md` to describe a hit-testing issue when Flutter widgets are overlaid on top of the Map widget.

packages/google_maps_flutter/google_maps_flutter_web/example/integration_test/google_maps_controller_test.dart

@@ -384,10 +384,12 @@ void main() {
         });
         testWidgets('translates initial options', (WidgetTester tester) async {
           controller = _createController(
-              mapConfiguration: const MapConfiguration(
-            mapType: MapType.satellite,
-            zoomControlsEnabled: true,
-          ));
+            mapConfiguration: const MapConfiguration(
+              mapType: MapType.satellite,
+              zoomControlsEnabled: true,
+              fortyFiveDegreeImageryEnabled: false,
+            ),
+          );
           controller.debugSetOverrides(
               createMap: (_, gmaps.MapOptions options) {
             capturedOptions = options;
@@ -402,14 +404,17 @@ void main() {
           expect(capturedOptions!.gestureHandling, 'auto',
               reason:
                   'by default the map handles zoom/pan gestures internally');
+          expect(capturedOptions!.rotateControl, false);
+          expect(capturedOptions!.tilt, 0);
         });
 
-        testWidgets('disables gestureHandling with scrollGesturesEnabled false',
+        testWidgets('translates fortyFiveDegreeImageryEnabled option',
             (WidgetTester tester) async {
           controller = _createController(
-              mapConfiguration: const MapConfiguration(
-            scrollGesturesEnabled: false,
-          ));
+            mapConfiguration: const MapConfiguration(
+              fortyFiveDegreeImageryEnabled: true,
+            ),
+          );
           controller.debugSetOverrides(
               createMap: (_, gmaps.MapOptions options) {
             capturedOptions = options;
@@ -419,17 +424,17 @@ void main() {
           controller.init();
 
           expect(capturedOptions, isNotNull);
-          expect(capturedOptions!.gestureHandling, 'none',
-              reason:
-                  'disabling scroll gestures disables all gesture handling');
+          expect(capturedOptions!.rotateControl, true);
+          expect(capturedOptions!.tilt, isNull);
         });
 
-        testWidgets('disables gestureHandling with zoomGesturesEnabled false',
+        testWidgets('translates webGestureHandling option',
             (WidgetTester tester) async {
           controller = _createController(
-              mapConfiguration: const MapConfiguration(
-            zoomGesturesEnabled: false,
-          ));
+            mapConfiguration: const MapConfiguration(
+              webGestureHandling: WebGestureHandling.greedy,
+            ),
+          );
           controller.debugSetOverrides(
               createMap: (_, gmaps.MapOptions options) {
             capturedOptions = options;
@@ -439,9 +444,7 @@ void main() {
           controller.init();
 
           expect(capturedOptions, isNotNull);
-          expect(capturedOptions!.gestureHandling, 'none',
-              reason:
-                  'disabling scroll gestures disables all gesture handling');
+          expect(capturedOptions!.gestureHandling, 'greedy');
         });
 
         testWidgets('sets initial position when passed',