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.

jsfiddle

code snippet:

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

/* 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;
}

<script src=".1.1/jquery.min.js"></script>
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src=";callback=initMap">
</script>

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.

jsfiddle

code snippet:

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

/* 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;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis./maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>

• javascript
• css
• google-maps

1 Answer 1

Use .setOptions:

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

updated fiddle

code snippet:

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

<input type="button" id="btn" value="toggle" />
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis./maps/api/js?callback=initMap">
</script>