I am trying to use Google Maps with custom styles and I am using @ionic-native/google-maps plugin to achieve this. I have managed to get the plugin loaded and now am trying to apply some custom styles like mentioned in this tutorial. It seems fairly basic but the styles simply do not apply even though I am literally copying and pasting the configuration from the documentation. Here is my home.ts:
import { Component } from '@angular/core'
import {
GoogleMaps,
GoogleMap,
GoogleMapsEvent,
Marker,
GoogleMapsAnimation,
MyLocation,
Environment
} from '@ionic-native/google-maps'
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
map: GoogleMap
constructor() {}
ionViewDidLoad() {
this.loadMap()
}
loadMap() {
Environment.setEnv({
API_KEY_FOR_BROWSER_RELEASE: 'API_KEY',
API_KEY_FOR_BROWSER_DEBUG: 'API_KEY'
})
// Create a map after the view is loaded.
// (platform is already ready in app.component.ts)
this.map = GoogleMaps.create('map_canvas', {
styles: [
{
elementType: 'geometry',
stylers: [
{
color: '#f5f5f5'
}
]
},
{
elementType: 'labels.icon',
stylers: [
{
visibility: 'off'
}
]
},
{
elementType: 'labels.text.fill',
stylers: [
{
color: '#616161'
}
]
},
{
elementType: 'labels.text.stroke',
stylers: [
{
color: '#f5f5f5'
}
]
},
{
featureType: 'administrative.land_parcel',
elementType: 'labels.text.fill',
stylers: [
{
color: '#bdbdbd'
}
]
},
{
featureType: 'poi',
elementType: 'geometry',
stylers: [
{
color: '#eeeeee'
}
]
},
{
featureType: 'poi',
elementType: 'labels.text.fill',
stylers: [
{
color: '#757575'
}
]
},
{
featureType: 'poi.park',
elementType: 'geometry',
stylers: [
{
color: '#e5e5e5'
}
]
},
{
featureType: 'poi.park',
elementType: 'labels.text.fill',
stylers: [
{
color: '#9e9e9e'
}
]
},
{
featureType: 'road',
elementType: 'geometry',
stylers: [
{
color: '#ffffff'
}
]
},
{
featureType: 'road.arterial',
elementType: 'labels.text.fill',
stylers: [
{
color: '#757575'
}
]
},
{
featureType: 'road.highway',
elementType: 'geometry',
stylers: [
{
color: '#dadada'
}
]
},
{
featureType: 'road.highway',
elementType: 'labels.text.fill',
stylers: [
{
color: '#616161'
}
]
},
{
featureType: 'road.local',
elementType: 'labels.text.fill',
stylers: [
{
color: '#9e9e9e'
}
]
},
{
featureType: 'transit.line',
elementType: 'geometry',
stylers: [
{
color: '#e5e5e5'
}
]
},
{
featureType: 'transit.station',
elementType: 'geometry',
stylers: [
{
color: '#eeeeee'
}
]
},
{
featureType: 'water',
elementType: 'geometry',
stylers: [
{
color: '#c9c9c9'
}
]
},
{
featureType: 'water',
elementType: 'labels.text.fill',
stylers: [
{
color: '#9e9e9e'
}
]
}
],
camera: {
target: {
lat: 43.0741704,
lng: -89.3809802
},
zoom: 18,
tilt: 30
}
})
}
}
I ran the command ionic cordova run browser
to preview it in the browser where the Map loads without the styling. Am I missing something obvious here?