Google-Maps v3: How to change the map style based on zoom level?

Question

I am using the new Google Maps v3 STYLED MAP.

I want to change how the map is Styled based on the zoom level.

I have the following pseudo-code, how do change my map-style based on the zoom level?

var myOptions = { 
        zoom:      zoom, 
        center:    latlng, 
        disableDefaultUI: true, 
        navigationControl: true, 
        scrollwheel: false, 
        navigationControlOptions: {style: 
google.maps.NavigationControlStyle.SMALL,position: 
google.maps.ControlPosition.TOP_RIGHT}, 
        mapTypeId: google.maps.MapTypeId.ROADMAP 
}; 

var mapStyleZoomedOut = [{      featureType: "landscape", 
                                                    elementType: "all", 
                                                    stylers: [{ visibility: "off" }] 
                                                }]; 
var mapStyleZoomedIn = [{       featureType: "landscape", 
                                                    elementType: "all", 
                                                    stylers: [{ visibility: "off" }] 
                                                  },{ 
                                                    featureType: "poi", 
                                                    elementType: "all", 
                                                    stylers: [{ visibility: "off" }] 
                                                  }]; 
map = new google.maps.Map(document.getElementById("find-map"), 
myOptions); 
var styledMapOptions = {map: map}; 
var styleMapType =  new google.maps.StyledMapType(mapStyle, 
mapStyleZoomedOut); 
map.mapTypes.set('minimial', styleMapType); 
map.setMapTypeId('minimial'); 
google.maps.event.addListener(map, 'zoom_changed', function() { 
        // === IF Zoom Level <= 8 use mapStyleZoomedIn 
        // === If Zoom Level > 8 use mapStyleZoomedOut 
}); 

Thanks in advance

Answer 1

Using the Google maps API V3, I put together a test example from your source code (with actual values in order to make the test work).

Below is the code I used to test successfully, the main code to pay attention to is in the start() function.

var myOptions = { 
        zoom: 7, 
        center: new google.maps.LatLng(1,1), 
        disableDefaultUI: true, 
        navigationControl: true, 
        scrollwheel: false, 
        navigationControlOptions: {style: 'SMALL',position: 'TOP_RIGHT'}, 
        mapTypeId: 'ROADMAP'
}; 

var mapStyleZoomedOut = [{      featureType: "landscape", 
                                                    elementType: "all", 
                                                    stylers: [{ visibility: "off" }] 
                                                }]; 
var mapStyleZoomedIn = [{       featureType: "landscape", 
                                                    elementType: "all", 
                                                    stylers: [{ visibility: "off" }] 
                                                  },{ 
                                                    featureType: "poi", 
                                                    elementType: "all", 
                                                    stylers: [{ visibility: "off" }] 
                                                  }];
function start()
{
  map = new google.maps.Map(document.getElementById("find-map"), myOptions); 
  var styledMapOptions = {map: map, name: 'minimial'}; 
  var styledMapOptions2 = {map: map, name: 'maximial'}; 

  var sMapType = new google.maps.StyledMapType(mapStyleZoomedOut,styledMapOptions); 
  map.mapTypes.set('minimal', sMapType); 
  map.setMapTypeId('minimal'); 

  var sMapType2 = new google.maps.StyledMapType(mapStyleZoomedIn,styledMapOptions2); 
  map.mapTypes.set('maximial', sMapType2);

  google.maps.event.addListener(map, 'zoom_changed', function()
  { 
    var zoomLevel = map.getZoom();
    //DEBUG alert(zoomLevel+', '+map.getMapTypeId());
    var sMapType;
    // === IF Zoom Level <= 8 use mapStyleZoomedIn 
    if(zoomLevel <=8)
      map.setMapTypeId('maximial');
    // === If Zoom Level > 8 use mapStyleZoomedOut 
    else
      map.setMapTypeId('minimal'); 
  });
}

if (window.addEventListener)
  window.addEventListener("load", start, false);
else if (window.attachEvent)
  window.attachEvent("onload", start);

Answer 2

Simple function that goes to satellite when user is zoomed in, road map when zoomed out

google.maps.event.addListener(map, 'zoom_changed', function() {
    if (map.getZoom() >= 15) {
        map.setMapTypeId('satellite');
    }
    else {
        map.setMapTypeId('roadmap');
    }
});