Ionic Native Map. Is posible to style the map?


#1

Hi all,
I’m using Ionic Native Map (https://ionicframework.com/docs/native/google-maps/) based on (https://github.com/mapsplugin/cordova-plugin-googlemaps)

I’m wonder is possible to style the map with json from https://snazzymaps.com/?

Expected:

snazzy-image

I’ve setup via GoogleMapOptions with Styles but it hasn’t worked

mapStyles: Array<any>;

// Fetch map styles 
this.fetchMapStyles = () => {
  this.http.get("assets/app.data/maps/styles.json").map((response) => {
    return response.json();
  }).subscribe((mapStyles) => {
    this.mapStyles = mapStyles;
  });
}

this.newMap = (id, locationModel: LocationModel): Observable<GoogleMap> => {
  let loading = this.loadingController.create({
    content: "Creating map and analytics location"
  });
  loading.present();
  return new Observable<any>((observe) => {
    let element = document.getElementById(id);
    let myPosition = new LatLng(locationModel.latitude, locationModel.longitude);
    console.info("Map styles", this.mapStyles, typeof this.mapStyles);
    let mapOptions: GoogleMapOptions = {
      camera: {
        target: myPosition,
        tilt: 30
      },
      styles: this.mapStyles
    };
    let map: GoogleMap = GoogleMaps.create(element, mapOptions);
    window["mapTest"] = map;
    map.one(GoogleMapsEvent.MAP_READY).then(() => {
      loading.dismiss().then(() => {
        observe.next(map);
      })
    })
  })
}

[{
        "featureType": "all",
        "elementType": "labels.text.fill",
        "stylers": [{
                "color": "#7c93a3"
            },
            {
                "lightness": "-10"
            }
        ]
    },
    {
        "featureType": "administrative.country",
        "elementType": "geometry",
        "stylers": [{
            "visibility": "on"
        }]
    },
    {
        "featureType": "administrative.country",
        "elementType": "geometry.stroke",
        "stylers": [{
            "color": "#a0a4a5"
        }]
    },
    {
        "featureType": "administrative.province",
        "elementType": "geometry.stroke",
        "stylers": [{
            "color": "#62838e"
        }]
    },
    {
        "featureType": "landscape",
        "elementType": "geometry.fill",
        "stylers": [{
            "color": "#dde3e3"
        }]
    },
    {
        "featureType": "landscape.man_made",
        "elementType": "geometry.stroke",
        "stylers": [{
                "color": "#3f4a51"
            },
            {
                "weight": "0.30"
            }
        ]
    },
    {
        "featureType": "poi",
        "elementType": "all",
        "stylers": [{
            "visibility": "simplified"
        }]
    },
    {
        "featureType": "poi.attraction",
        "elementType": "all",
        "stylers": [{
            "visibility": "on"
        }]
    },
    {
        "featureType": "poi.business",
        "elementType": "all",
        "stylers": [{
            "visibility": "off"
        }]
    },
    {
        "featureType": "poi.government",
        "elementType": "all",
        "stylers": [{
            "visibility": "off"
        }]
    },
    {
        "featureType": "poi.park",
        "elementType": "all",
        "stylers": [{
            "visibility": "on"
        }]
    },
    {
        "featureType": "poi.place_of_worship",
        "elementType": "all",
        "stylers": [{
            "visibility": "off"
        }]
    },
    {
        "featureType": "poi.school",
        "elementType": "all",
        "stylers": [{
            "visibility": "off"
        }]
    },
    {
        "featureType": "poi.sports_complex",
        "elementType": "all",
        "stylers": [{
            "visibility": "off"
        }]
    },
    {
        "featureType": "road",
        "elementType": "all",
        "stylers": [{
                "saturation": "-100"
            },
            {
                "visibility": "on"
            }
        ]
    },
    {
        "featureType": "road",
        "elementType": "geometry.stroke",
        "stylers": [{
            "visibility": "on"
        }]
    },
    {
        "featureType": "road.highway",
        "elementType": "geometry.fill",
        "stylers": [{
            "color": "#bbcacf"
        }]
    },
    {
        "featureType": "road.highway",
        "elementType": "geometry.stroke",
        "stylers": [{
                "lightness": "0"
            },
            {
                "color": "#bbcacf"
            },
            {
                "weight": "0.50"
            }
        ]
    },
    {
        "featureType": "road.highway",
        "elementType": "labels",
        "stylers": [{
            "visibility": "on"
        }]
    },
    {
        "featureType": "road.highway",
        "elementType": "labels.text",
        "stylers": [{
            "visibility": "on"
        }]
    },
    {
        "featureType": "road.highway.controlled_access",
        "elementType": "geometry.fill",
        "stylers": [{
            "color": "#ffffff"
        }]
    },
    {
        "featureType": "road.highway.controlled_access",
        "elementType": "geometry.stroke",
        "stylers": [{
            "color": "#a9b4b8"
        }]
    },
    {
        "featureType": "road.arterial",
        "elementType": "labels.icon",
        "stylers": [{
                "invert_lightness": true
            },
            {
                "saturation": "-7"
            },
            {
                "lightness": "3"
            },
            {
                "gamma": "1.80"
            },
            {
                "weight": "0.01"
            }
        ]
    },
    {
        "featureType": "transit",
        "elementType": "all",
        "stylers": [{
            "visibility": "off"
        }]
    },
    {
        "featureType": "water",
        "elementType": "geometry.fill",
        "stylers": [{
            "color": "#a3c7df"
        }]
    }
]

Thanks in advance.

cli packages: (/usr/local/lib/node_modules)

    @ionic/cli-utils  : 1.13.0
    ionic (Ionic CLI) : 3.13.0

global packages:

    cordova (Cordova CLI) : not installed

local packages:

    @ionic/app-scripts : 3.1.2
    Cordova Platforms  : none
    Ionic Framework    : ionic-angular 3.9.2

System:

    ios-deploy : 1.9.2 
    Node       : v8.9.1
    npm        : 5.5.1 
    OS         : macOS High Sierra
    Xcode      : Xcode 9.1 Build version 9B55 

Misc:

    backend : pro

com.googlemaps.ios 2.5.0 "Google Maps SDK for iOS"
cordova-android-support-gradle-release 1.1.5 "cordova-android-support-gradle-release"
cordova-plugin-add-swift-support 1.7.0 "AddSwiftSupport"
cordova-plugin-android-permissions 1.0.0 "Permissions"
cordova-plugin-browsertab 0.2.0 "cordova-plugin-browsertab"
cordova-plugin-buildinfo 2.0.1 "BuildInfo"
cordova-plugin-compat 1.2.0 "Compat"
cordova-plugin-datepicker 0.9.3 "DatePicker"
cordova-plugin-device 1.1.4 "Device"
cordova-plugin-facebook4 1.7.4 "Facebook Connect"
cordova-plugin-geolocation 3.0.0 "Geolocation"
cordova-plugin-googlemaps 2.1.2-beta-20171115-1911 "cordova-plugin-googlemaps"
cordova-plugin-googleplus 5.1.1 "Google SignIn"
cordova-plugin-ionic-webview 1.1.15 "cordova-plugin-ionic-webview"
cordova-plugin-nativegeocoder 2.0.4 "NativeGeocoder"
cordova-plugin-nativestorage 2.2.2 "NativeStorage"
cordova-plugin-splashscreen 4.0.3 "Splashscreen"
cordova-plugin-statusbar 2.3.0 "StatusBar"
cordova-plugin-whitelist 1.3.1 "Whitelist"
cordova-plugin-x-toast 2.6.0 "Toast"
cordova.plugins.diagnostic 3.7.2 "Diagnostic"
ionic-plugin-keyboard 2.2.1 "Keyboard"

#2

I already did it. I forgot to change the zoom of the map. I set zoom to 18 and it works.

Kindly close this topic for me.

Thanks everyone.