CODEWITHSUNDEEP
iosgoogle-mapsnativescriptangular2-nativescript
TheCodeFox
TheCodeFox

Reputation: 96

Style Google map on iOS with NativeScript

I'm currently using this plugin for Google Maps integration in my NativeScript app. They have a way to update the map styles for Android (shown here) but I can't find any code to update the map styles on iOS.

I also found this question someone asked earlier about it but it doesn't mention any iOS specifics.

I also found these docs referencing the iOS use of gMAP but I don't know how to use this information to get it working in my NativeScript app.

Has anyone successfully changed the color of the map on iOS?

Here's my current code: 

import { MapStyles } from "./map-style";
declare var com:any; //Typescript workaround

onMapReady(args): void {
    this.mapView = args.object;

    if (isAndroid) {
        this.mapView.gMap.setMapStyle(new com.google.android.gms.maps.model.MapStyleOptions(JSON.stringify(MapStyles)));
    }

    if (isIOS) {
        // style map for iOS
    }
}

Upvotes: 1

Views: 578

Answers (1)

Shawn
Shawn

Reputation: 393

I was able to set the style for both iOS and Android using the same code:

this.mapView.setStyle(<Style>JSON.parse(this.currentMapStyle));

Note: The Style class is imported from nativescript-google-maps-sdkand this.currentMapStyle is a string member that I generated using this: https://mapstyle.withgoogle.com/

EDIT
I am using Nativescript with Angular2 and version 1.4.3 of nativescript-google-maps-sdk. My onMapReady function looks like this: 

private onMapReady(args): void {
    this.mapView = args.object;
    let mapStyle = '[{"elementType":"geometry","stylers":[{"color":"#242f3e"}]},{"elementType":"labels.text.fill","stylers":[{"color":"#746855"}]},{"elementType":"labels.text.stroke","stylers":[{"color":"#242f3e"}]},{"featureType":"administrative.locality","elementType":"labels.text.fill","stylers":[{"color":"#d59563"}]},{"featureType":"poi","elementType":"labels.text.fill","stylers":[{"color":"#d59563"}]},{"featureType":"poi.park","elementType":"geometry","stylers":[{"color":"#263c3f"}]},{"featureType":"poi.park","elementType":"labels.text.fill","stylers":[{"color":"#6b9a76"}]},{"featureType":"road","elementType":"geometry","stylers":[{"color":"#38414e"}]},{"featureType":"road","elementType":"geometry.stroke","stylers":[{"color":"#212a37"}]},{"featureType":"road","elementType":"labels.text.fill","stylers":[{"color":"#9ca5b3"}]},{"featureType":"road.highway","elementType":"geometry","stylers":[{"color":"#746855"}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#1f2835"}]},{"featureType":"road.highway","elementType":"labels.text.fill","stylers":[{"color":"#f3d19c"}]},{"featureType":"transit","elementType":"geometry","stylers":[{"color":"#2f3948"}]},{"featureType":"transit.station","elementType":"labels.text.fill","stylers":[{"color":"#d59563"}]},{"featureType":"water","elementType":"geometry","stylers":[{"color":"#17263c"}]},{"featureType":"water","elementType":"labels.text.fill","stylers":[{"color":"#515c6d"}]},{"featureType":"water","elementType":"labels.text.stroke","stylers":[{"color":"#17263c"}]}]'

    this.mapView.setStyle(<Style>JSON.parse(mapStyle));
}

Upvotes: 2

Related Questions