feat(google-maps): Separate mapId for Google Maps Cloud IDs (#1943)

Co-authored-by: Joey Pender <joey@ionic.io>

google-maps/README.md

@@ -900,6 +900,9 @@ For iOS and Android only the config options declared on <a href="#googlemapconfi
 | **`androidLiteMode`**  | <code>boolean</code>                      | Enables image-based lite mode on Android.                                                                                                                 | <code>false</code> |       |
 | **`devicePixelRatio`** | <code>number</code>                       | Override pixel ratio for native map.                                                                                                                      |                    |       |
 | **`styles`**           | <code>MapTypeStyle[] \| null</code>       | Styles to apply to each of the default map types. Note that for satellite, hybrid and terrain modes, these styles will only apply to labels and geometry. |                    | 4.3.0 |
+| **`mapId`**            | <code>string</code>                       | A map id associated with a specific map style or feature. [Use Map IDs](https://developers.google.com/maps/documentation/get-map-id) Only for Web.        |                    | 5.4.0 |
+| **`androidMapId`**     | <code>string</code>                       | A map id associated with a specific map style or feature. [Use Map IDs](https://developers.google.com/maps/documentation/get-map-id) Only for Android.    |                    | 5.4.0 |
+| **`iOSMapId`**         | <code>string</code>                       | A map id associated with a specific map style or feature. [Use Map IDs](https://developers.google.com/maps/documentation/get-map-id) Only for iOS.        |                    | 5.4.0 |
 
 
 #### LatLng

google-maps/android/src/main/java/com/capacitorjs/plugins/googlemaps/CapacitorGoogleMapsPlugin.kt

@@ -11,6 +11,7 @@ import com.getcapacitor.annotation.CapacitorPlugin
 import com.getcapacitor.annotation.Permission
 import com.getcapacitor.annotation.PermissionCallback
 import com.google.android.gms.maps.MapsInitializer
+import com.google.android.gms.maps.OnMapsSdkInitializedCallback
 import com.google.android.gms.maps.model.LatLng
 import com.google.android.gms.maps.model.LatLngBounds
 import kotlinx.coroutines.CoroutineScope
@@ -29,7 +30,7 @@ import org.json.JSONObject
                         ),
                 ],
 )
-class CapacitorGoogleMapsPlugin : Plugin() {
+class CapacitorGoogleMapsPlugin : Plugin(), OnMapsSdkInitializedCallback {
     private var maps: HashMap<String, CapacitorGoogleMap> = HashMap()
     private var cachedTouchEvents: HashMap<String, MutableList<MotionEvent>> = HashMap()
     private val tag: String = "CAP-GOOGLE-MAPS"
@@ -43,7 +44,8 @@ class CapacitorGoogleMapsPlugin : Plugin() {
     override fun load() {
         super.load()
 
-        MapsInitializer.initialize(this.context, MapsInitializer.Renderer.LATEST, null)
+        MapsInitializer.initialize(this.context, MapsInitializer.Renderer.LATEST, this)
+
 
         this.bridge.webView.setOnTouchListener(
                 object : View.OnTouchListener {
@@ -90,6 +92,13 @@ class CapacitorGoogleMapsPlugin : Plugin() {
         )
     }
 
+    override fun onMapsSdkInitialized(renderer: MapsInitializer.Renderer) {
+        when (renderer) {
+            MapsInitializer.Renderer.LATEST -> Logger.debug("Capacitor Google Maps", "Latest Google Maps renderer enabled")
+            MapsInitializer.Renderer.LEGACY -> Logger.debug("Capacitor Google Maps", "Legacy Google Maps renderer enabled - Cloud based map styling and advanced drawing not available")
+        }
+    }
+
     override fun handleOnStart() {
         super.handleOnStart()
         maps.forEach { it.value.onStart() }

google-maps/android/src/main/java/com/capacitorjs/plugins/googlemaps/GoogleMapConfig.kt

@@ -16,6 +16,7 @@ class GoogleMapConfig(fromJSONObject: JSONObject) {
     var liteMode: Boolean = false
     var devicePixelRatio: Float = 1.00f
     var styles: String? = null
+    var mapId: String? = null
 
     init {
         if (!fromJSONObject.has("width")) {
@@ -81,8 +82,14 @@ class GoogleMapConfig(fromJSONObject: JSONObject) {
         center = LatLng(lat, lng)
 
         val cameraPosition = CameraPosition(center, zoom.toFloat(), 0.0F, 0.0F)
-        googleMapOptions = GoogleMapOptions().camera(cameraPosition).liteMode(liteMode)
 
         styles = fromJSONObject.getString("styles")
+
+        mapId = fromJSONObject.getString("androidMapId")
+
+        googleMapOptions = GoogleMapOptions().camera(cameraPosition).liteMode(liteMode)
+        if (mapId != null) {
+            googleMapOptions?.mapId(mapId!!)
+        }
     }
 }

google-maps/ios/Plugin/GoogleMapConfig.swift

@@ -9,6 +9,7 @@ public struct GoogleMapConfig: Codable {
     let center: LatLng
     let zoom: Double
     let styles: String?
+    var mapId: String?
 
     init(fromJSObject: JSObject) throws {
         guard let width = fromJSObject["width"] as? Double else {
@@ -50,5 +51,7 @@ public struct GoogleMapConfig: Codable {
         } else {
             self.styles = nil
         }
+
+        self.mapId = fromJSObject["iOSMapId"] as? String
     }
 }

google-maps/ios/Plugin/Map.swift

@@ -13,6 +13,7 @@ class GMViewController: UIViewController {
     var GMapView: GMSMapView!
     var cameraPosition: [String: Double]!
     var minimumClusterSize: Int?
+    var mapId: String?
 
     private var clusterManager: GMUClusterManager?
 
@@ -25,7 +26,13 @@ class GMViewController: UIViewController {
 
         let camera = GMSCameraPosition.camera(withLatitude: cameraPosition["latitude"] ?? 0, longitude: cameraPosition["longitude"] ?? 0, zoom: Float(cameraPosition["zoom"] ?? 12))
         let frame = CGRect(x: mapViewBounds["x"] ?? 0, y: mapViewBounds["y"] ?? 0, width: mapViewBounds["width"] ?? 0, height: mapViewBounds["height"] ?? 0)
-        self.GMapView = GMSMapView.map(withFrame: frame, camera: camera)
+        if let id = mapId {
+            let gmsId = GMSMapID(identifier: id)
+            self.GMapView = GMSMapView(frame: frame, mapID: gmsId, camera: camera)
+        } else {
+            self.GMapView = GMSMapView(frame: frame, camera: camera)
+        }
+
         self.view = GMapView
     }
 
@@ -85,6 +92,7 @@ public class Map {
         self.config = config
         self.delegate = delegate
         self.mapViewController = GMViewController()
+        self.mapViewController.mapId = config.mapId
 
         self.render()
     }

google-maps/src/definitions.ts

@@ -191,6 +191,36 @@ export interface GoogleMapConfig extends google.maps.MapOptions {
    * @since 4.3.0
    */
   styles?: google.maps.MapTypeStyle[] | null;
+  /**
+   * A map id associated with a specific map style or feature.
+   *
+   * [Use Map IDs](https://developers.google.com/maps/documentation/get-map-id)
+   *
+   * Only for Web.
+   *
+   * @since 5.4.0
+   */
+  mapId?: string;
+  /**
+   * A map id associated with a specific map style or feature.
+   *
+   * [Use Map IDs](https://developers.google.com/maps/documentation/get-map-id)
+   *
+   * Only for Android.
+   *
+   * @since 5.4.0
+   */
+  androidMapId?: string;
+  /**
+   * A map id associated with a specific map style or feature.
+   *
+   * [Use Map IDs](https://developers.google.com/maps/documentation/get-map-id)
+   *
+   * Only for iOS.
+   *
+   * @since 5.4.0
+   */
+  iOSMapId?: string;
 }
 
 /**

google-maps/src/web.ts

@@ -436,6 +436,7 @@ export class CapacitorGoogleMapsWeb
   async create(_args: CreateMapArgs): Promise<void> {
     console.log(`Create map: ${_args.id}`);
     await this.importGoogleLib(_args.apiKey, _args.region, _args.language);
+
     this.maps[_args.id] = {
       map: new window.google.maps.Map(_args.element, { ..._args.config }),
       element: _args.element,