[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.
 * Fixes iOS native unit tests on M1 devices.
 * Minor fixes for new analysis options.
 

packages/google_maps_flutter/google_maps_flutter/lib/google_maps_flutter.dart

@@ -26,6 +26,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.tiltControlsEnabled = true,
     this.myLocationEnabled = false,
     this.myLocationButtonEnabled = true,
     this.layoutDirection,
@@ -176,6 +178,12 @@ class GoogleMap extends StatefulWidget {
   /// True if the map view should respond to tilt gestures.
   final bool tiltGesturesEnabled;
 
+  /// True if the map should show tilt controls. Web only.
+  ///
+  /// Disabling this will cause map dragging to be interrupted if the
+  /// [GoogleMap] is rebuilt while dragging.
+  final bool tiltControlsEnabled;
+
   /// 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 +287,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();
@@ -527,14 +540,16 @@ class _GoogleMapState extends State<GoogleMap> {
 /// Configuration options for the GoogleMaps user interface.
 class _GoogleMapOptions {
   _GoogleMapOptions.fromWidget(GoogleMap map)
-      : compassEnabled = map.compassEnabled,
+      : webGestureHandling = map.webGestureHandling,
+        compassEnabled = map.compassEnabled,
         mapToolbarEnabled = map.mapToolbarEnabled,
         cameraTargetBounds = map.cameraTargetBounds,
         mapType = map.mapType,
         minMaxZoomPreference = map.minMaxZoomPreference,
         rotateGesturesEnabled = map.rotateGesturesEnabled,
         scrollGesturesEnabled = map.scrollGesturesEnabled,
         tiltGesturesEnabled = map.tiltGesturesEnabled,
+        tiltControlsEnabled = map.tiltControlsEnabled,
         trackCameraPosition = map.onCameraMove != null,
         zoomControlsEnabled = map.zoomControlsEnabled,
         zoomGesturesEnabled = map.zoomGesturesEnabled,
@@ -547,6 +562,8 @@ class _GoogleMapOptions {
         buildingsEnabled = map.buildingsEnabled,
         assert(!map.liteModeEnabled || Platform.isAndroid);
 
+  final WebGestureHandling? webGestureHandling;
+
   final bool compassEnabled;
 
   final bool mapToolbarEnabled;
@@ -563,6 +580,8 @@ class _GoogleMapOptions {
 
   final bool tiltGesturesEnabled;
 
+  final bool tiltControlsEnabled;
+
   final bool trackCameraPosition;
 
   final bool zoomControlsEnabled;
@@ -585,6 +604,7 @@ class _GoogleMapOptions {
 
   Map<String, dynamic> toMap() {
     return <String, dynamic>{
+      'webGestureHandling': webGestureHandling?.name,
       'compassEnabled': compassEnabled,
       'mapToolbarEnabled': mapToolbarEnabled,
       'cameraTargetBounds': cameraTargetBounds.toJson(),
@@ -593,6 +613,7 @@ class _GoogleMapOptions {
       'rotateGesturesEnabled': rotateGesturesEnabled,
       'scrollGesturesEnabled': scrollGesturesEnabled,
       'tiltGesturesEnabled': tiltGesturesEnabled,
+      'tiltControlsEnabled': tiltControlsEnabled,
       'zoomControlsEnabled': zoomControlsEnabled,
       'zoomGesturesEnabled': zoomGesturesEnabled,
       'liteModeEnabled': liteModeEnabled,

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.5
+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.1.2
+  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.2.0
+
+* Adds options for gesture handling and tilt controls on web.
+
 ## 2.1.7
 
 * Updates code for stricter analysis options.
@@ -10,7 +14,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/types.dart

@@ -31,3 +31,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.1.7
+version: 2.2.0
 
 environment:
   sdk: '>=2.12.0 <3.0.0'

packages/google_maps_flutter/google_maps_flutter_web/CHANGELOG.md

@@ -1,3 +1,7 @@
+## 0.3.4
+
+* Adds options for gesture handling and tilt controls.
+
 ## 0.3.3
 
 * Removes custom `analysis_options.yaml` (and fixes code to comply with newest rules).

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

@@ -145,8 +145,8 @@ void main() {
           expect(() {
             controller.updateCircles(
               CircleUpdates.from(
-                <Circle>{},
-                <Circle>{},
+                const <Circle>{},
+                const <Circle>{},
               ),
             );
           }, throwsAssertionError);
@@ -159,8 +159,8 @@ void main() {
           expect(() {
             controller.updatePolygons(
               PolygonUpdates.from(
-                <Polygon>{},
-                <Polygon>{},
+                const <Polygon>{},
+                const <Polygon>{},
               ),
             );
           }, throwsAssertionError);
@@ -173,8 +173,8 @@ void main() {
           expect(() {
             controller.updatePolylines(
               PolylineUpdates.from(
-                <Polyline>{},
-                <Polyline>{},
+                const <Polyline>{},
+                const <Polyline>{},
               ),
             );
           }, throwsAssertionError);
@@ -187,8 +187,8 @@ void main() {
           expect(() {
             controller.updateMarkers(
               MarkerUpdates.from(
-                <Marker>{},
-                <Marker>{},
+                const <Marker>{},
+                const <Marker>{},
               ),
             );
           }, throwsAssertionError);
@@ -388,6 +388,7 @@ void main() {
           controller = _createController(options: <String, dynamic>{
             'mapType': 2,
             'zoomControlsEnabled': true,
+            'tiltControlsEnabled': false,
           });
           controller.debugSetOverrides(
               createMap: (_, gmaps.MapOptions options) {
@@ -403,6 +404,8 @@ 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',
@@ -424,6 +427,23 @@ void main() {
                   'disabling scroll gestures disables all gesture handling');
         });
 
+        testWidgets('translates webGestureHandling option',
+            (WidgetTester tester) async {
+          controller = _createController(options: <String, String>{
+            'webGestureHandling': WebGestureHandling.greedy.name,
+          });
+          controller.debugSetOverrides(
+              createMap: (_, gmaps.MapOptions options) {
+            capturedOptions = options;
+            return map;
+          });
+
+          controller.init();
+
+          expect(capturedOptions, isNotNull);
+          expect(capturedOptions!.gestureHandling, 'greedy');
+        });
+
         testWidgets('disables gestureHandling with zoomGesturesEnabled false',
             (WidgetTester tester) async {
           controller = _createController(options: <String, dynamic>{

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

@@ -233,8 +233,8 @@ void main() {
       // Geometry
       testWidgets('updateMarkers', (WidgetTester tester) async {
         final MarkerUpdates expectedUpdates = MarkerUpdates.from(
-          <Marker>{},
-          <Marker>{},
+          const <Marker>{},
+          const <Marker>{},
         );
 
         await plugin.updateMarkers(expectedUpdates, mapId: mapId);
@@ -243,8 +243,8 @@ void main() {
       });
       testWidgets('updatePolygons', (WidgetTester tester) async {
         final PolygonUpdates expectedUpdates = PolygonUpdates.from(
-          <Polygon>{},
-          <Polygon>{},
+          const <Polygon>{},
+          const <Polygon>{},
         );
 
         await plugin.updatePolygons(expectedUpdates, mapId: mapId);
@@ -253,8 +253,8 @@ void main() {
       });
       testWidgets('updatePolylines', (WidgetTester tester) async {
         final PolylineUpdates expectedUpdates = PolylineUpdates.from(
-          <Polyline>{},
-          <Polyline>{},
+          const <Polyline>{},
+          const <Polyline>{},
         );
 
         await plugin.updatePolylines(expectedUpdates, mapId: mapId);
@@ -263,8 +263,8 @@ void main() {
       });
       testWidgets('updateCircles', (WidgetTester tester) async {
         final CircleUpdates expectedUpdates = CircleUpdates.from(
-          <Circle>{},
-          <Circle>{},
+          const <Circle>{},
+          const <Circle>{},
         );
 
         await plugin.updateCircles(expectedUpdates, mapId: mapId);

packages/google_maps_flutter/google_maps_flutter_web/lib/src/convert.dart

@@ -51,7 +51,7 @@ double _getCssOpacity(Color color) {
 // myLocationEnabled needs to be built through dart:html navigator.geolocation
 //   See: https://api.dart.dev/stable/2.8.4/dart-html/Geolocation-class.html
 // trafficEnabled is handled when creating the GMap object, since it needs to be added as a layer.
-// trackCameraPosition is just a boolan value that indicates if the map has an onCameraMove handler.
+// trackCameraPosition is just a boolean value that indicates if the map has an onCameraMove handler.
 // indoorViewEnabled seems to not have an equivalent in web
 // buildingsEnabled seems to not have an equivalent in web
 // padding seems to behave differently in web than mobile. You can't move UI elements in web.
@@ -83,11 +83,18 @@ gmaps.MapOptions _rawOptionsToGmapsOptions(Map<String, Object?> rawOptions) {
     options.styles = rawOptions['styles'] as List<gmaps.MapTypeStyle?>?;
   }
 
-  if (rawOptions['scrollGesturesEnabled'] == false ||
+  if (rawOptions['webGestureHandling'] != null) {
+    options.gestureHandling = rawOptions['webGestureHandling'] as String?;
+  } else if (rawOptions['scrollGesturesEnabled'] == false ||
       rawOptions['zoomGesturesEnabled'] == false) {
-    options.gestureHandling = 'none';
+    options.gestureHandling = WebGestureHandling.none.name;
   } else {
-    options.gestureHandling = 'auto';
+    options.gestureHandling = WebGestureHandling.auto.name;
+  }
+
+  if (rawOptions['tiltControlsEnabled'] == false) {
+    options.rotateControl = false;
+    options.tilt = 0;
   }
 
   // These don't have any rawOptions entry, but they seem to be off in the native maps.

packages/google_maps_flutter/google_maps_flutter_web/pubspec.yaml

@@ -2,7 +2,7 @@ name: google_maps_flutter_web
 description: Web platform implementation of google_maps_flutter
 repository: https://github.com/flutter/plugins/tree/main/packages/google_maps_flutter/google_maps_flutter_web
 issue_tracker: https://github.com/flutter/flutter/issues?q=is%3Aissue+is%3Aopen+label%3A%22p%3A+maps%22
-version: 0.3.3
+version: 0.3.4
 
 environment:
   sdk: ">=2.12.0 <3.0.0"
@@ -22,7 +22,8 @@ dependencies:
   flutter_web_plugins:
     sdk: flutter
   google_maps: ^6.1.0
-  google_maps_flutter_platform_interface: ^2.1.2
+  google_maps_flutter_platform_interface:
+    path: ../google_maps_flutter_platform_interface
   sanitize_html: ^2.0.0
   stream_transform: ^2.0.0