Skip to content

[google_maps_flutter] Add cameraControl enable/disable & position on web #9089

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 7 commits into
base: main
Choose a base branch
from
Open

[google_maps_flutter] Add cameraControl enable/disable & position on web #9089

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
b4cc5f8
feat: camera control on web
4rthurmonteiro Apr 15, 2025
9281be8
chore: update map_configuration_test.dart
4rthurmonteiro Apr 15, 2025
25020bf
chore: add dependecy_overrides
4rthurmonteiro Apr 15, 2025
f2fe01d
Merge remote-tracking branch 'upstream/main' into feat/camera_control
4rthurmonteiro Apr 21, 2025
b2d1d89
chore(step-1): make-deps-path-based
4rthurmonteiro Apr 21, 2025
a5a5ff5
chore(changelog): merge with upstream
4rthurmonteiro Apr 21, 2025
14a12bf
Merge branch 'main' into feat/camera_control
4rthurmonteiro Apr 24, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions packages/google_maps_flutter/google_maps_flutter/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,10 @@

* Updates README to indicate that Andoid SDK <21 is no longer supported.

## 2.12.2

* Adds support for camera control button on web.

## 2.12.1

* Fixes typo in README.
Expand Down
70 changes: 70 additions & 0 deletions packages/google_maps_flutter/google_maps_flutter/example/lib/map_ui.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,8 @@ class MapUiBodyState extends State<MapUiBody> {
late GoogleMapController _controller;
bool _nightMode = false;
String _mapStyle = '';
bool _webCameraControlEnabled = true;
WebCameraControlPosition? _webCameraControlPosition;

@override
void initState() {
Expand All @@ -72,6 +74,67 @@ class MapUiBodyState extends State<MapUiBody> {
super.dispose();
}

Widget _webCameraControlToggler() {
return TextButton(
child: Text(
'${_webCameraControlEnabled ? 'disable' : 'enable'} web camera control'),
onPressed: () {
setState(() {
_webCameraControlEnabled = !_webCameraControlEnabled;
});
},
);
}

Widget _webCameraControlPositionToggler() {
return TextButton(
onPressed: () => showDialog<void>(
context: context,
builder: (BuildContext context) {
return AlertDialog(
title: const Text('Web camera control position'),
content: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
DropdownButton<WebCameraControlPosition>(
hint: const Text('Web camera control position'),
value: _webCameraControlPosition,
items: WebCameraControlPosition.values
.map(
(WebCameraControlPosition e) =>
DropdownMenuItem<WebCameraControlPosition>(
value: e,
child: Text(e.name),
),
)
.toList(),
onChanged: (WebCameraControlPosition? value) {
setState(
() {
_webCameraControlPosition = value;
},
);
},
),
TextButton(
onPressed: () {
Navigator.pop(context);
},
child: const Text(
'Ok',
),
)
],
),
);
},
),
child: const Text(
'change web camera control position',
),
);
}

Widget _compassToggler() {
return TextButton(
child: Text('${_compassEnabled ? 'disable' : 'enable'} compass'),
Expand Down Expand Up @@ -264,6 +327,8 @@ class MapUiBodyState extends State<MapUiBody> {
@override
Widget build(BuildContext context) {
final GoogleMap googleMap = GoogleMap(
webCameraControlEnabled: _webCameraControlEnabled,
webCameraControlPosition: _webCameraControlPosition,
onMapCreated: onMapCreated,
initialCameraPosition: _kInitialPosition,
compassEnabled: _compassEnabled,
Expand Down Expand Up @@ -324,6 +389,11 @@ class MapUiBodyState extends State<MapUiBody> {
_myLocationButtonToggler(),
_myTrafficToggler(),
_nightModeToggler(),
if (kIsWeb) ...<Widget>[
_webCameraControlToggler(),
if (_webCameraControlEnabled)
_webCameraControlPositionToggler(),
]
],
),
),
Expand Down
7 changes: 7 additions & 0 deletions packages/google_maps_flutter/google_maps_flutter/example/pubspec.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,13 @@ dependencies:
google_maps_flutter_android: ^2.16.0
google_maps_flutter_platform_interface: ^2.11.0


# FOR TESTING AND INITIAL REVIEW ONLY. DO NOT MERGE.
# See https://github.com/flutter/flutter/blob/master/docs/ecosystem/contributing/README.md#changing-federated-plugins
dependency_overrides:
google_maps_flutter_platform_interface: {path: ../../../../packages/google_maps_flutter/google_maps_flutter_platform_interface}
google_maps_flutter_web: {path: ../../../../packages/google_maps_flutter/google_maps_flutter_web}

dev_dependencies:
build_runner: ^2.1.10
espresso: ^0.4.0
Expand Down
1 change: 1 addition & 0 deletions packages/google_maps_flutter/google_maps_flutter/lib/google_maps_flutter.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,7 @@ export 'package:google_maps_flutter_platform_interface/google_maps_flutter_platf
TileOverlay,
TileOverlayId,
TileProvider,
WebCameraControlPosition,
WebGestureHandling,
WeightedLatLng;

Expand Down
14 changes: 14 additions & 0 deletions packages/google_maps_flutter/google_maps_flutter/lib/src/google_map.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,6 +95,8 @@ class GoogleMap extends StatefulWidget {
this.onMapCreated,
this.gestureRecognizers = const <Factory<OneSequenceGestureRecognizer>>{},
this.webGestureHandling,
this.webCameraControlPosition,
this.webCameraControlEnabled = true,
this.compassEnabled = true,
this.mapToolbarEnabled = true,
this.cameraTargetBounds = CameraTargetBounds.unbounded,
Expand Down Expand Up @@ -349,6 +351,16 @@ class GoogleMap extends StatefulWidget {
/// See [WebGestureHandling] for more details.
final WebGestureHandling? webGestureHandling;

/// This setting controls how the API handles cameraControl button position on the map. Web only.
///
/// See [WebCameraControlPosition] for more details.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The comment should describe what happens if this is null.

final WebCameraControlPosition? webCameraControlPosition;

/// This setting controls how the API handles cameraControl button on the map. Web only.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Have a more descriptive comment here. Something like "Enables or disables the Camera controls."

///
/// See https://developers.google.com/maps/documentation/javascript/controls for more details.
final bool webCameraControlEnabled;

/// Identifier that's associated with a specific cloud-based map style.
///
/// See https://developers.google.com/maps/documentation/get-map-id
Expand Down Expand Up @@ -652,6 +664,8 @@ class _GoogleMapState extends State<GoogleMap> {
/// Builds a [MapConfiguration] from the given [map].
MapConfiguration _configurationFromMapWidget(GoogleMap map) {
return MapConfiguration(
webCameraControlPosition: map.webCameraControlPosition,
webCameraControlEnabled: map.webCameraControlEnabled,
webGestureHandling: map.webGestureHandling,
compassEnabled: map.compassEnabled,
mapToolbarEnabled: map.mapToolbarEnabled,
Expand Down
8 changes: 7 additions & 1 deletion packages/google_maps_flutter/google_maps_flutter/pubspec.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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/packages/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.12.1
version: 2.12.2
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As indicated in the PR checklist, we follow semver, which requires changing the minor version when adding public API.


environment:
sdk: ^3.6.0
Expand All @@ -26,6 +26,12 @@ dependencies:
google_maps_flutter_platform_interface: ^2.11.0
google_maps_flutter_web: ^0.5.12

# FOR TESTING AND INITIAL REVIEW ONLY. DO NOT MERGE.
# See https://github.com/flutter/flutter/blob/master/docs/ecosystem/contributing/README.md#changing-federated-plugins
dependency_overrides:
google_maps_flutter_platform_interface: {path: ../../../packages/google_maps_flutter/google_maps_flutter_platform_interface}
google_maps_flutter_web: {path: ../../../packages/google_maps_flutter/google_maps_flutter_web}

dev_dependencies:
flutter_test:
sdk: flutter
Expand Down
4 changes: 4 additions & 0 deletions packages/google_maps_flutter/google_maps_flutter_android/example/pubspec.yaml
View file
Open in desktop
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

All of the google_maps_flutter_android and google_maps_flutter_ios changes can be reverted.

Original file line number Diff line number Diff line change
Expand Up @@ -33,3 +33,7 @@ flutter:
uses-material-design: true
assets:
- assets/
# FOR TESTING AND INITIAL REVIEW ONLY. DO NOT MERGE.
# See https://github.com/flutter/flutter/blob/master/docs/ecosystem/contributing/README.md#changing-federated-plugins
dependency_overrides:
google_maps_flutter_platform_interface: {path: ../../../../packages/google_maps_flutter/google_maps_flutter_platform_interface}
4 changes: 4 additions & 0 deletions packages/google_maps_flutter/google_maps_flutter_android/pubspec.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,3 +37,7 @@ topics:
- google-maps
- google-maps-flutter
- map
# FOR TESTING AND INITIAL REVIEW ONLY. DO NOT MERGE.
# See https://github.com/flutter/flutter/blob/master/docs/ecosystem/contributing/README.md#changing-federated-plugins
dependency_overrides:
google_maps_flutter_platform_interface: {path: ../../../packages/google_maps_flutter/google_maps_flutter_platform_interface}
4 changes: 4 additions & 0 deletions packages/google_maps_flutter/google_maps_flutter_ios/example/ios14/pubspec.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,3 +32,7 @@ flutter:
uses-material-design: true
assets:
- assets/
# FOR TESTING AND INITIAL REVIEW ONLY. DO NOT MERGE.
# See https://github.com/flutter/flutter/blob/master/docs/ecosystem/contributing/README.md#changing-federated-plugins
dependency_overrides:
google_maps_flutter_platform_interface: {path: ../../../../../packages/google_maps_flutter/google_maps_flutter_platform_interface}
4 changes: 4 additions & 0 deletions packages/google_maps_flutter/google_maps_flutter_ios/example/ios15/pubspec.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,3 +32,7 @@ flutter:
uses-material-design: true
assets:
- assets/
# FOR TESTING AND INITIAL REVIEW ONLY. DO NOT MERGE.
# See https://github.com/flutter/flutter/blob/master/docs/ecosystem/contributing/README.md#changing-federated-plugins
dependency_overrides:
google_maps_flutter_platform_interface: {path: ../../../../../packages/google_maps_flutter/google_maps_flutter_platform_interface}
4 changes: 4 additions & 0 deletions ...google_maps_flutter/google_maps_flutter_ios/example/shared/maps_example_dart/pubspec.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,3 +27,7 @@ dev_dependencies:

flutter:
uses-material-design: true
# FOR TESTING AND INITIAL REVIEW ONLY. DO NOT MERGE.
# See https://github.com/flutter/flutter/blob/master/docs/ecosystem/contributing/README.md#changing-federated-plugins
dependency_overrides:
google_maps_flutter_platform_interface: {path: ../../../../../../packages/google_maps_flutter/google_maps_flutter_platform_interface}
4 changes: 4 additions & 0 deletions packages/google_maps_flutter/google_maps_flutter_ios/pubspec.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,3 +35,7 @@ topics:
- google-maps
- google-maps-flutter
- map
# FOR TESTING AND INITIAL REVIEW ONLY. DO NOT MERGE.
# See https://github.com/flutter/flutter/blob/master/docs/ecosystem/contributing/README.md#changing-federated-plugins
dependency_overrides:
google_maps_flutter_platform_interface: {path: ../../../packages/google_maps_flutter/google_maps_flutter_platform_interface}
4 changes: 4 additions & 0 deletions packages/google_maps_flutter/google_maps_flutter_platform_interface/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
## 2.11.2

* Adds support to camera control button on web.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

"Adds support for disabling or moving the camera control button on web."


## 2.11.1

* Updates READMEs and API docs.
Expand Down
30 changes: 30 additions & 0 deletions ..._maps_flutter/google_maps_flutter_platform_interface/lib/src/types/map_configuration.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,8 @@ 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.webCameraControlPosition,
this.webCameraControlEnabled,
this.webGestureHandling,
this.compassEnabled,
this.mapToolbarEnabled,
Expand Down Expand Up @@ -44,6 +46,16 @@ class MapConfiguration {
/// See [WebGestureHandling] for more details.
final WebGestureHandling? webGestureHandling;

/// This setting controls how the API handles cameraControl button position on the map. Web only.
///
/// See [WebCameraControlPosition] for more details.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same comment here; the null behavior should be documented.

final WebCameraControlPosition? webCameraControlPosition;

/// This setting controls how the API handles cameraControl button on the map. Web only.
///
/// See https://developers.google.com/maps/documentation/javascript/controls for more details.
final bool? webCameraControlEnabled;

/// True if the compass UI should be shown.
final bool? compassEnabled;

Expand Down Expand Up @@ -123,6 +135,14 @@ class MapConfiguration {
/// that are different from [other].
MapConfiguration diffFrom(MapConfiguration other) {
return MapConfiguration(
webCameraControlPosition:
webCameraControlPosition != other.webCameraControlPosition
? webCameraControlPosition
: null,
webCameraControlEnabled:
webCameraControlEnabled != other.webCameraControlEnabled
? webCameraControlEnabled
: null,
webGestureHandling: webGestureHandling != other.webGestureHandling
? webGestureHandling
: null,
Expand Down Expand Up @@ -188,6 +208,10 @@ class MapConfiguration {
/// replacing the previous values.
MapConfiguration applyDiff(MapConfiguration diff) {
return MapConfiguration(
webCameraControlPosition:
diff.webCameraControlPosition ?? webCameraControlPosition,
webCameraControlEnabled:
diff.webCameraControlEnabled ?? webCameraControlEnabled,
webGestureHandling: diff.webGestureHandling ?? webGestureHandling,
compassEnabled: diff.compassEnabled ?? compassEnabled,
mapToolbarEnabled: diff.mapToolbarEnabled ?? mapToolbarEnabled,
Expand Down Expand Up @@ -219,6 +243,8 @@ class MapConfiguration {

/// True if no options are set.
bool get isEmpty =>
webCameraControlPosition == null &&
webCameraControlEnabled == null &&
webGestureHandling == null &&
compassEnabled == null &&
mapToolbarEnabled == null &&
Expand Down Expand Up @@ -251,6 +277,8 @@ class MapConfiguration {
return false;
}
return other is MapConfiguration &&
webCameraControlPosition == other.webCameraControlPosition &&
webCameraControlEnabled == other.webCameraControlEnabled &&
webGestureHandling == other.webGestureHandling &&
compassEnabled == other.compassEnabled &&
mapToolbarEnabled == other.mapToolbarEnabled &&
Expand Down Expand Up @@ -278,6 +306,8 @@ class MapConfiguration {
@override
int get hashCode => Object.hashAll(<Object?>[
webGestureHandling,
webCameraControlPosition,
webCameraControlEnabled,
compassEnabled,
mapToolbarEnabled,
cameraTargetBounds,
Expand Down
1 change: 1 addition & 0 deletions packages/google_maps_flutter/google_maps_flutter_platform_interface/lib/src/types/types.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,4 +44,5 @@ export 'utils/marker.dart';
export 'utils/polygon.dart';
export 'utils/polyline.dart';
export 'utils/tile_overlay.dart';
export 'web_camera_control_position.dart';
export 'web_gesture_handling.dart';
Loading