javascript - google map set styles dynamically of map object -

hey know if can change styles property of map object dynamically later. looking method of setstyles of map, didn't find 1 work me. adding code in jsfiddler: the code

function initmap() {    // styles 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" }          ]        }      ]    });  }

/* set map height explicitly define size of div   * element contains map. */  #map {    height: 100%;  }  /* optional: makes sample page fill window. */  html, body {    height: 100%;    margin: 0;    padding: 0;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div id="map"></div>  <!-- replace value of key parameter own api key. -->  <script async defer  src="https://maps.googleapis.com/maps/api/js?key=aizasyckuodz5y7hmm0yrccqocvlwzdm6m8s5qk&callback=initmap">  </script>

use .setoptions:

map.setoptions({styles: [{     featuretype: "administrative.locality",     elementtype: "labels",     stylers: [       { visibility: "on" }     ] }]}); 

updated fiddle

code snippet:

function initmap() {    // styles 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;    });  }

/* set map height explicitly define size of div   * element contains map. */    #map {    height: 100%;  }  /* optional: makes sample page fill window. */    html,  body {    height: 100%;    margin: 0;    padding: 0;  }

<input type="button" id="btn" value="toggle" />  <div id="map"></div>  <!-- replace value of key parameter own api key. -->  <script async defer src="https://maps.googleapis.com/maps/api/js?callback=initmap">  </script>