Capacitor google maps doesn't has styles as attribute

[zrelli]

Feature Request

Plugin

Description

Config object should has styles property to change map theme (dark mode , silver mode , light ....)

Platform(s)

Web,Android,Ios

Preferred Solution

We could add it as to config object and as component property named 'styles' and accept an array of map styles.

Alternatives

Additional Context

[fryiee]

This is quite an important feature, not just because of changing map theme, but also because the style object is used for toggling visibility of different features. Without this, the current plugin doesn't have options to modify which features are visible.

[muuvmuuv]

Anyone that wants styling in native Google Maps, just use some package manager that supports patching and use this:

Patch

diff --git a/dist/typings/definitions.d.ts b/dist/typings/definitions.d.ts
index a380b1edc9c83d5dc947861f40735986350d7c58..3056e34f4ae911b313224b2fb10b8a31908004eb 100644
--- a/dist/typings/definitions.d.ts
+++ b/dist/typings/definitions.d.ts
@@ -65,6 +65,10 @@ export interface GoogleMapConfig {
      * Override pixel ratio for native map.
      */
     devicePixelRatio?: number;
+    /**
+     * Map styles.
+     */
+    mapStyle?: string
 }
 /**
  * Configuration properties for a Google Map Camera
diff --git a/dist/typings/ts_old/definitions.d.ts b/dist/typings/ts_old/definitions.d.ts
index 00663cacca4f4bce06c7f4b92a535de90a731d34..86c477b86d6d2413d637b02dd50459af2ac6e639 100644
--- a/dist/typings/ts_old/definitions.d.ts
+++ b/dist/typings/ts_old/definitions.d.ts
@@ -65,6 +65,10 @@ export interface GoogleMapConfig {
      * Override pixel ratio for native map.
      */
     devicePixelRatio?: number;
+    /**
+     * Map styles.
+     */
+    mapStyle?: string
 }
 /**
  * Configuration properties for a Google Map Camera
diff --git a/ios/Plugin/GoogleMapConfig.swift b/ios/Plugin/GoogleMapConfig.swift
index 8ffe054c92d540f729923bfa160c5d4951ef99db..6bcb3dc829ad3506af0d2b04190f6c6800340cf9 100644
--- a/ios/Plugin/GoogleMapConfig.swift
+++ b/ios/Plugin/GoogleMapConfig.swift
@@ -8,6 +8,7 @@ public struct GoogleMapConfig: Codable {
     let y: Double
     let center: LatLng
     let zoom: Double
+    let mapStyle: String
 
     init(fromJSObject: JSObject) throws {
         guard let width = fromJSObject["width"] as? Double else {
@@ -37,6 +38,8 @@ public struct GoogleMapConfig: Codable {
         guard let lat = latLngObj["lat"] as? Double, let lng = latLngObj["lng"] as? Double else {
             throw GoogleMapErrors.invalidArguments("LatLng object is missing the required 'lat' and/or 'lng' property")
         }
+        
+        let mapStyle = fromJSObject["mapStyle"] as? String ?? ""
 
         self.width = round(width)
         self.height = round(height)
@@ -44,5 +47,6 @@ public struct GoogleMapConfig: Codable {
         self.y = y
         self.zoom = zoom
         self.center = LatLng(lat: lat, lng: lng)
+        self.mapStyle = mapStyle
     }
 }
diff --git a/ios/Plugin/Map.swift b/ios/Plugin/Map.swift
index 36eca54639111325f0da95fd96cfe51122b1eae5..5e40dcf80ab5e80055f67841d9e5c390f2b088ea 100644
--- a/ios/Plugin/Map.swift
+++ b/ios/Plugin/Map.swift
@@ -12,7 +12,7 @@ class GMViewController: UIViewController {
     var mapViewBounds: [String: Double]!
     var GMapView: GMSMapView!
     var cameraPosition: [String: Double]!
-
+    
     private var clusterManager: GMUClusterManager?
 
     var clusteringEnabled: Bool {
@@ -115,6 +115,14 @@ public class Map {
                     target.addSubview(self.mapViewController.view)
                     self.mapViewController.GMapView.delegate = self.delegate
                 }
+                
+                if !self.config.mapStyle.isEmpty {
+                    do {
+                        self.mapViewController.GMapView.mapStyle = try GMSMapStyle(jsonString: self.config.mapStyle)
+                    } catch {
+                        // IGNORE
+                    }
+                }
 
                 self.delegate.notifyListeners("onMapReady", data: [
                     "mapId": self.id

And then use "mapStyle" in "config" of GoogleMap.create:

try {
  this.#map = await GoogleMap.create({
    id: this.name,
    element: this.mapRef.nativeElement,
    apiKey: environment.googleApiKey,
    forceCreate: true,
    config: {
      center: { lat, lng },
      zoom: this.zoom,
      mapStyle:
        '[{"featureType":"water","elementType":"geometry","stylers":[{"color":"#e9e9e9"},{"lightness":17}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"color":"#f5f5f5"},{"lightness":20}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#ffffff"},{"lightness":17}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#ffffff"},{"lightness":29},{"weight":0.2}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#ffffff"},{"lightness":18}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#ffffff"},{"lightness":16}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#f5f5f5"},{"lightness":21}]},{"featureType":"poi.park","elementType":"geometry","stylers":[{"color":"#dedede"},{"lightness":21}]},{"elementType":"labels.text.stroke","stylers":[{"visibility":"on"},{"color":"#ffffff"},{"lightness":16}]},{"elementType":"labels.text.fill","stylers":[{"saturation":36},{"color":"#333333"},{"lightness":40}]},{"elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"transit","elementType":"geometry","stylers":[{"color":"#f2f2f2"},{"lightness":19}]},{"featureType":"administrative","elementType":"geometry.fill","stylers":[{"color":"#fefefe"},{"lightness":20}]},{"featureType":"administrative","elementType":"geometry.stroke","stylers":[{"color":"#fefefe"},{"lightness":17},{"weight":1.2}]}]',
    },
  })
} catch (error) {
  this.log.error(StackGlobal.Map, 'Could not create map', error)
  return
}

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of the plugin, please create a new issue and ensure the template is fully filled out.