Google Map Set Styles Dynamically Of Map Object

I would like to know if I can change the styles property of map object dynamically later. I am looking for method of setStyles of map, but didn't find one which is work for me. js

Solution 1:

Use .setOptions:

map.setOptions({styles: [{
    featureType: "administrative.locality",
    elementType: "labels",
    stylers: [
      { visibility: "on" }
    ]
}]});

updated fiddle

code snippet:

functioninitMap() {
  // Styles a map in night mode.var map = new google.maps.Map(document.getElementById('map'), {
    center: {
      lat: 40.674,
      lng: -73.945
    },
    zoom: 12,
    styles: [{
      featureType: "road",
      elementType: "labels",
      stylers: [{
        visibility: "off"
      }]
    }, {
      featureType: "administrative.locality",
      elementType: "labels",
      stylers: [{
        visibility: "off"
      }]
    }]
  });

  map.setOptions({
    styles: [{
      featureType: "road",
      elementType: "labels",
      stylers: [{
        visibility: "off"
      }]
    }, {
      featureType: "administrative.locality",
      elementType: "labels",
      stylers: [{
        visibility: "off"
      }]
    }]
  });
  var toggle = true;
  google.maps.event.addDomListener(document.getElementById('btn'), "click", function() {
    if (toggle) {
      map.setOptions({
        styles: [{
          featureType: "administrative.locality",
          elementType: "labels",
          stylers: [{
            visibility: "off"
          }]
        }]
      });
    } else {
      map.setOptions({
        styles: [{
          featureType: "administrative.locality",
          elementType: "labels",
          stylers: [{
            visibility: "on"
          }]
        }]
      });
    }
    toggle = !toggle;
  });
}

/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<inputtype="button"id="btn"value="toggle" /><divid="map"></div><!-- Replace the value of the key parameter with your own API key. --><scriptasyncdefersrc="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>