Error when styling map

[churro90]

Im declaring a custom style to my map as follows:

 var mapProp = {
      zoom: 14,
      center: myLatLng,      
      styles: [{"featureType":"landscape.natural","elementType":"geometry.fill","stylers":[{"visibility":"on"},{"color":"#e0efef"}]},{"featureType":"poi","elementType":"geometry.fill","stylers":[{"visibility":"on"},{"hue":"#1900ff"},{"color":"#c0e8e8"}]},{"featureType":"road","elementType":"geometry","stylers":[{"lightness":100},{"visibility":"simplified"}]},{"featureType":"road","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"transit.line","elementType":"geometry","stylers":[{"visibility":"on"},{"lightness":700}]},{"featureType":"water","elementType":"all","stylers":[{"color":"#7dcdcd"}]}]

    }

    this.map = new google.maps.Map(this.gmapElement.nativeElement, mapProp);

The map works correctly and displays the style but when compiling I'm getting the following error ERROR in src/app/component/home/home.component.ts(52,68): error TS2345: Argument of type '{ zoom: number; center: LatLng; styles: ({ "featureType": string; "elementType": string; "stylers...' is not assignable to parameter of type 'MapOptions'. Types of property 'styles' are incompatible. Type '({ "featureType": string; "elementType": string; "stylers": ({ "visibility": string; } | { "hue":...' is not assignable to type 'MapTypeStyle[]'. Type '{ "featureType": string; "elementType": string; "stylers": ({ "visibility": string; } | { "hue": ...' is not assignable to type 'MapTypeStyle'. Type '{ "featureType": string; "elementType": string; "stylers": ({ "visibility": string; } | { "hue": ...' is not assignable to type 'MapTypeStyle'. Types of property 'elementType' are incompatible. Type 'string' is not assignable to type '"all" | "geometry" | "geometry.fill" | "geometry.stroke" | "labels" | "labels.icon" | "labels.tex...

Any ideas as why this is happening?

[ultrasonicsoft]

Can you check that you are following correct styling as below? https://developers.google.com/maps/documentation/javascript/styling

[churro90]

It is correct. Im implementing the following map: https://snazzymaps.com/style/61/blue-essence

When I go to the error details i'm getting some undefined parameterers:

(local var) mapProp: { zoom: number; center: google.maps.LatLng; styles: ({ "featureType": string; "elementType": string; "stylers": ({ "visibility": string; "hue"?: undefined; "color"?: undefined; } | { "hue": string; "visibility"?: undefined; "color"?: undefined; } | { "color": string; "visibility"?: undefined; "hue"?: undefined; })[]; } | { "featureType": string; "elementType": string; "stylers": ({ "lightness": number; "visibility"?: undefined; } | { "visibility": string; "lightness"?: undefined; })[]; })[];

[ultrasonicsoft]

ok. I will see what is happening there..