I understand how to initialise a map with custom styles like the following:
var styles = [
{
featureType: "water",
stylers: [
{ visibility: "on" },
{ color: "#ffffff" }
]
}
];
var mapOptions = {
zoom: 13,
maxZoom: 15,
minZoom: 12,
center: new google.maps.LatLng(50.924229,-1.396841),
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
styles: styles
};
map = new google.maps.Map(document.getElementById('map'), mapOptions);
But is it possible to change to another style once the map has already been initialised? For example changing the colours of the map when certain events are triggered?
Yes, create a new style object and then change the style by setting the option: map.setOptions({styles: styles});
Yes. just use
map.setOptions(mapOptions);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With