feat: add support for mapID

Author: jokerttu

README.md

@@ -199,6 +199,32 @@ This parameter has only an effect on Android.
 
 ```
 
+#### Using Map IDs
+You can configure your map by providing a `mapId` parameter during map initialization. Map IDs are created in the [Google Cloud Console](https://console.cloud.google.com/google/maps-apis/studio/maps) and allow you to [enable various Google Maps Platform features](https://developers.google.com/maps/documentation/android-sdk/map-ids/mapid-over#features-available), such as cloud-based map styling.
+
+> [!NOTE]
+> The `mapId` can only be set once during map initialization and cannot be changed afterwards. Both `GoogleMapsMapView` and `GoogleMapsNavigationView` support the `mapId` parameter.
+
+For `GoogleMapsMapView`:
+
+```dart
+GoogleMapsMapView(
+  mapId: 'YOUR_MAP_ID', // Can only be set during initialization
+  ...
+)
+```
+
+For `GoogleMapsNavigationView`:
+
+```dart
+GoogleMapsNavigationView(
+  mapId: 'YOUR_MAP_ID', // Can only be set during initialization
+  ...
+)
+```
+
+For more information about map IDs and how to create them, see the [Google Maps Platform documentation](https://developers.google.com/maps/documentation/get-map-id).
+
 See the [example](./example) directory for a complete navigation sample app.
 
 ### Requesting and handling permissions

android/src/main/kotlin/com/google/maps/flutter/navigation/Convert.kt

@@ -82,6 +82,7 @@ object Convert {
     options.minZoomPreference?.let { googleMapOptions.minZoomPreference(it.toFloat()) }
     options.maxZoomPreference?.let { googleMapOptions.maxZoomPreference(it.toFloat()) }
     googleMapOptions.zoomControlsEnabled(options.zoomControlsEnabled)
+    options.mapId?.let { googleMapOptions.mapId(it) }
 
     return MapOptions(googleMapOptions, options.padding)
   }

android/src/main/kotlin/com/google/maps/flutter/navigation/messages.g.kt

@@ -594,6 +594,11 @@ data class MapOptionsDto(
   val cameraTargetBounds: LatLngBoundsDto? = null,
   /** Specifies the padding for the map. */
   val padding: MapPaddingDto? = null,
+  /**
+   * The map ID for advanced map options eg. cloud-based map styling. This value can only be set on
+   * map initialization and cannot be changed afterwards.
+   */
+  val mapId: String? = null,
 ) {
   companion object {
     fun fromList(pigeonVar_list: List<Any?>): MapOptionsDto {
@@ -611,6 +616,7 @@ data class MapOptionsDto(
       val zoomControlsEnabled = pigeonVar_list[11] as Boolean
       val cameraTargetBounds = pigeonVar_list[12] as LatLngBoundsDto?
       val padding = pigeonVar_list[13] as MapPaddingDto?
+      val mapId = pigeonVar_list[14] as String?
       return MapOptionsDto(
         cameraPosition,
         mapType,
@@ -626,6 +632,7 @@ data class MapOptionsDto(
         zoomControlsEnabled,
         cameraTargetBounds,
         padding,
+        mapId,
       )
     }
   }
@@ -646,6 +653,7 @@ data class MapOptionsDto(
       zoomControlsEnabled,
       cameraTargetBounds,
       padding,
+      mapId,
     )
   }
 

example/README.md

@@ -17,6 +17,11 @@ Run the app with the API key as a Dart define.
 flutter run --dart-define MAPS_API_KEY=YOUR_API_KEY
 ```
 
+You can also optionally provide a Map ID with another Dart define:
+```bash
+flutter run --dart-define MAPS_API_KEY=YOUR_API_KEY --dart-define MAP_ID=YOUR_MAP_ID
+```
+
 The example app demonstrates multiple ways to provide the Maps API key for platforms.
 
 ### Android specific API key

example/integration_test/t06_map_test.dart

@@ -26,6 +26,8 @@ import 'package:flutter/material.dart';
 
 import 'shared.dart';
 
+const String testMapId = 'DEMO_MAP_ID';
+
 void main() {
   final mapTypeVariants = getMapTypeVariants();
   patrol('Test map types', (PatrolIntegrationTester $) async {
@@ -123,6 +125,48 @@ void main() {
       expect(await controller.settings.isZoomControlsEnabled(), false);
       expect(await controller.settings.isMapToolbarEnabled(), false);
     }
+
+    // Test that view can be created with a mapID.
+    // Note: mapID cannot be fetched back from the map, so we only test
+    // that creation succeeds.
+    final ControllerCompleter<GoogleMapViewController>
+    controllerCompleterWithMapId =
+        ControllerCompleter<GoogleMapViewController>();
+
+    switch (mapTypeVariants.currentValue!) {
+      case TestMapType.mapView:
+        final Key key = GlobalKey();
+        await pumpMapView(
+          $,
+          GoogleMapsMapView(
+            key: key,
+            mapId: testMapId,
+            onViewCreated: (GoogleMapViewController viewController) {
+              controllerCompleterWithMapId.complete(viewController);
+            },
+          ),
+        );
+        break;
+      case TestMapType.navigationView:
+        final Key key = GlobalKey();
+        await pumpNavigationView(
+          $,
+          GoogleMapsNavigationView(
+            key: key,
+            mapId: testMapId,
+            onViewCreated: (GoogleNavigationViewController viewController) {
+              controllerCompleterWithMapId.complete(viewController);
+            },
+          ),
+        );
+        break;
+    }
+
+    final GoogleMapViewController controllerWithMapId =
+        await controllerCompleterWithMapId.future;
+
+    // Verify the controller was created successfully
+    expect(controllerWithMapId, isNotNull);
   }, variant: mapTypeVariants);
 
   patrol('Test map UI settings', (PatrolIntegrationTester $) async {

example/ios/RunnerTests/ConvertTests.swift

@@ -551,7 +551,8 @@ class ConvertTests: XCTestCase {
       zoomGesturesEnabled: false,
       scrollGesturesEnabledDuringRotateOrZoom: false,
       mapToolbarEnabled: false,
-      zoomControlsEnabled: false
+      zoomControlsEnabled: false,
+      mapId: "test-map-id"
     )
 
     let navigationViewOptions =
@@ -584,6 +585,7 @@ class ConvertTests: XCTestCase {
       mapOptions.scrollGesturesEnabledDuringRotateOrZoom,
       configuration.scrollGesturesEnabledDuringRotateOrZoom
     )
+    XCTAssertEqual(mapOptions.mapId, configuration.mapId)
   }
 
   func testConvertPath() {

example/lib/main.dart

@@ -22,6 +22,7 @@ import 'package:google_navigation_flutter/google_navigation_flutter.dart';
 import 'package:permission_handler/permission_handler.dart';
 import 'pages/circles.dart';
 import 'pages/pages.dart';
+import 'utils/utils.dart';
 import 'widgets/widgets.dart';
 
 /// The list of pages to show in the Google Maps Navigation demo.
@@ -106,40 +107,60 @@ class _NavigationDemoState extends State<NavigationBody> {
       body: SafeArea(
         top: false,
         minimum: const EdgeInsets.all(8.0),
-        child: ListView.builder(
-          itemCount: _allPages.length + 1,
-          itemBuilder: (_, int index) {
-            if (index == 0) {
-              return Card(
-                child: Container(
-                  padding: const EdgeInsets.symmetric(vertical: 4.0),
-                  alignment: Alignment.center,
-                  child: Column(
-                    children: <Widget>[
-                      Text(
-                        Platform.isIOS
-                            ? 'Location ${_locationPermitted ? 'granted' : 'denied'} • Notifications ${_notificationsPermitted ? 'granted' : 'denied'}'
-                            : 'Location ${_locationPermitted ? 'granted' : 'denied'} ',
-                      ),
-                      Text('Navigation SDK version: $_navSDKVersion'),
-                    ],
-                  ),
+        child: Column(
+          children: <Widget>[
+            Card(
+              child: Container(
+                padding: const EdgeInsets.symmetric(vertical: 4.0),
+                alignment: Alignment.center,
+                child: Column(
+                  children: <Widget>[
+                    Text(
+                      Platform.isIOS
+                          ? 'Location ${_locationPermitted ? 'granted' : 'denied'} • Notifications ${_notificationsPermitted ? 'granted' : 'denied'}'
+                          : 'Location ${_locationPermitted ? 'granted' : 'denied'} ',
+                    ),
+                    Text('Navigation SDK version: $_navSDKVersion'),
+                    Text(
+                      'Current map ID: ${MapIdManager.instance.mapIdDisplay}',
+                    ),
+                  ],
                 ),
-              );
-            }
-            return ListTile(
-              leading: _allPages[index - 1].leading,
-              title: Text(_allPages[index - 1].title),
-              onTap: () => _pushPage(context, _allPages[index - 1]),
-            );
-          },
+              ),
+            ),
+            Expanded(
+              child: Scrollbar(
+                thumbVisibility: true,
+                child: ListView.builder(
+                  itemCount: _allPages.length,
+                  itemBuilder: (_, int index) {
+                    return ListTile(
+                      leading: _allPages[index].leading,
+                      title: Text(_allPages[index].title),
+                      onTap: () => _pushPage(context, _allPages[index]),
+                    );
+                  },
+                ),
+              ),
+            ),
+            Padding(
+              padding: const EdgeInsets.all(8.0),
+              child: ElevatedButton(
+                onPressed:
+                    () => showMapIdDialog(context, () => setState(() {})),
+                child: const Text('Set Map ID'),
+              ),
+            ),
+          ],
         ),
       ),
     );
   }
 }
 
 void main() {
+  MapIdManager.instance.initialize();
+
   final ElevatedButtonThemeData exampleButtonDefaultTheme =
       ElevatedButtonThemeData(
         style: ElevatedButton.styleFrom(minimumSize: const Size(160, 36)),

example/lib/pages/map.dart

@@ -113,6 +113,7 @@ class _MapPageState extends ExamplePageState<BasicMapPage> {
             onViewCreated: _onViewCreated,
             onMyLocationClicked: _onMyLocationClicked,
             onMyLocationButtonClicked: _onMyLocationButtonClicked,
+            mapId: MapIdManager.instance.mapId,
           ),
           Padding(
             padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 6),
@@ -165,17 +166,26 @@ class _MapPageState extends ExamplePageState<BasicMapPage> {
                   children: <Widget>[
                     ElevatedButton(
                       style: mapTypeStyle,
-                      onPressed: () => setMapStyleDefault(),
+                      onPressed:
+                          MapIdManager.instance.mapId != null
+                              ? null
+                              : () => setMapStyleDefault(),
                       child: const Text('Default style'),
                     ),
                     ElevatedButton(
                       style: mapTypeStyle,
-                      onPressed: () => setMapStyleNight(),
+                      onPressed:
+                          MapIdManager.instance.mapId != null
+                              ? null
+                              : () => setMapStyleNight(),
                       child: const Text('Night style'),
                     ),
                     ElevatedButton(
                       style: mapTypeStyle,
-                      onPressed: () => setMapStyleSepia(),
+                      onPressed:
+                          MapIdManager.instance.mapId != null
+                              ? null
+                              : () => setMapStyleSepia(),
                       child: const Text('Sepia style'),
                     ),
                   ],

example/lib/pages/multiple_views.dart

@@ -237,7 +237,10 @@ class _MultiplexState extends ExamplePageState<MultipleMapViewsPage> {
         children: <Widget>[
           SizedBox(
             height: 200,
-            child: GoogleMapsMapView(onViewCreated: _onViewCreated),
+            child: GoogleMapsMapView(
+              onViewCreated: _onViewCreated,
+              mapId: MapIdManager.instance.mapId,
+            ),
           ),
           const SizedBox(height: 20),
           SizedBox(
@@ -251,6 +254,7 @@ class _MultiplexState extends ExamplePageState<MultipleMapViewsPage> {
                         target: _userLocation!,
                         zoom: 15,
                       ),
+                      mapId: MapIdManager.instance.mapId,
                     )
                     : const Center(
                       child: Column(

example/lib/pages/navigation.dart

@@ -1193,6 +1193,7 @@ class _NavigationPageState extends ExamplePageState<NavigationPage> {
                                   ? NavigationUIEnabledPreference.automatic
                                   : NavigationUIEnabledPreference.disabled,
                           initialPadding: const EdgeInsets.all(0),
+                          mapId: MapIdManager.instance.mapId,
                         )
                         : const Center(
                           child: Column(