Search code examples
google-maps-api-3google-maps-styling

How can I change visibility on google maps v3?


I want to change the visibility of the map ( roads and other labels ) in accordance to level of zoom.

Is there any way I can do that?

For example: visibility=on while I the zoom is <=8 and off while zoom is > 8


Solution

  • google.maps.event.addListener(map, 'zoom_changed', function() {
      var zoomLevel = map.getZoom();
      if (zoomLevel <= 8) {
        turnVisOn();
      } else if (zoomLevel > 8) {
        turnVisOff();
      }
    });
    

    Then, in your turnVisX functions:

    var styleArray = [
      {
        featureType: "road",
        stylers: [
          { visibility: "off" } // or "on"
        ]
      }
    ];
    map.setOptions({styles: styleArray});