Setting the style to a map with Angular

When loading the map and setting the zoom, it seems the map is missing a lot of the details shown in the web version, as it is only showing any additional detail.

With the latest styling commit to the repo, I tried changing the styling and adding more detail to the map to match the default web version as closely as possible - however, I am getting the same output with no details.

This is what I currently have:

page.component.ts

 onMapReady = (args) => {
    var mapsModule = require("nativescript-google-maps-sdk");
    var style = require("./map-style.json");
    this.mapView = args.object;
    this.mapView.latitude = 8.5125665;
    this.mapView.longitude = -81.3038948;
    this.mapView.zoom = 20;

    //change map styling
    this.mapView.setStyle( style );
    //this.mapView.setStyle( JSON.stringify(style) ); //tried this as well
   //this.mapView.gMap.setStyle( JSON.stringify(style) ); //tried this as well

    var marker = new mapsModule.Marker();
    marker.position = mapsModule.Position.positionFromLatLng(28.3818941,-81.5768487);
    this.mapView.addMarker(marker);
  };

page.html

<GridLayout>
  <MapView (mapReady)="onMapReady($event)"></MapView>
</GridLayout>

map-style.json

[
  {
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#212121"
      }
    ]
  },
  {
    "elementType": "labels.icon",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#757575"
      }
    ]
  },
  {
    "elementType": "labels.text.stroke",
    "stylers": [
      {
        "color": "#212121"
      }
    ]
  },
  {
    "featureType": "administrative",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#757575"
      }
    ]
  },
  {
    "featureType": "administrative.country",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#9e9e9e"
      }
    ]
  },
  {
    "featureType": "administrative.land_parcel",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "administrative.locality",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#bdbdbd"
      }
    ]
  },
  {
    "featureType": "poi",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#757575"
      }
    ]
  },
  {
    "featureType": "poi.park",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#181818"
      }
    ]
  },
  {
    "featureType": "poi.park",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#616161"
      }
    ]
  },
  {
    "featureType": "poi.park",
    "elementType": "labels.text.stroke",
    "stylers": [
      {
        "color": "#1b1b1b"
      }
    ]
  },
  {
    "featureType": "road",
    "elementType": "geometry.fill",
    "stylers": [
      {
        "color": "#2c2c2c"
      }
    ]
  },
  {
    "featureType": "road",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#8a8a8a"
      }
    ]
  },
  {
    "featureType": "road.arterial",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#373737"
      }
    ]
  },
  {
    "featureType": "road.highway",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#3c3c3c"
      }
    ]
  },
  {
    "featureType": "road.highway.controlled_access",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#4e4e4e"
      }
    ]
  },
  {
    "featureType": "road.local",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#616161"
      }
    ]
  },
  {
    "featureType": "transit",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#757575"
      }
    ]
  },
  {
    "featureType": "water",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#000000"
      }
    ]
  },
  {
    "featureType": "water",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#3d3d3d"
      }
    ]
  }
]

[jericdeleon]

In Android, I was able to edit the styles:

mapstyle.ts:

export const mapStyle = [
  {
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#ebe3cd"
      }
    ]
  },
...
]

component.ts:

import { mapStyle } from "../../../shared/mapstyle";
declare var com:any; //Typescript workaround

...

    onMapReady = (event) => {
        this.map = <MapView>this.mapView.nativeElement;
        this.map.gMap.setMapStyle(new com.google.android.gms.maps.model.MapStyleOptions(JSON.stringify(mapStyle)));

Will try to post iOS version if I get it to work

[jericdeleon]

iOS version :

mapstyle.ts:

(same as above)

component.ts:

import { mapStyle } from "../shared/mapstyle";
import { MapView } from "nativescript-google-maps-sdk";
declare var GMSMapStyle: any; 
...
export class MapComponent implements OnInit {
...
    @ViewChild("MapView") mapView: ElementRef;
    map: MapView;
...
    onMapReady(event) {
        // Map init
        if (!this.map) {
            this.map = event.object;

            this.map.nativeView.mapStyle = GMSMapStyle.styleWithJSONStringError(JSON.stringify(mapStyle));
        }
    }