Brk Brk - 23 days ago 5
CSS Question

google map set styles dynamically of map object

Hey 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.
I am adding the code in a jsfiddler:
The code



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.com/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.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>




Answer

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.com/maps/api/js?callback=initMap">
</script>