Google-Maps v3: ¿Cómo cambiar el estilo del mapa en función del nivel de zoom?

Question

Estoy usando el nuevo MAPA ESTILO de Google Maps v3.

que quieren cambiar la forma en el mapa es de estilo basado en el nivel de zoom.

Tengo el siguiente pseudo-código, ¿cómo cambiar mi mapa de estilo basado en el nivel de zoom?

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 
}); 

Gracias de antemano

Answer 1

Utilizando el Google maps API V3, que arme un ejemplo de prueba desde su código fuente (con valores reales con el fin de hacer el trabajo de prueba).

A continuación se muestra el código que utiliza para probar con éxito, el código principal para prestar atención es en la función start().

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

Me inspiré en @staticbeast solution y realicé algunas refactorizaciones.

map.mapTypes.set('maximal', new google.maps.StyledMapType(mapStyleZoomedIn, {map: map, name: 'maximal'})); 
map.mapTypes.set('minimal', new google.maps.StyledMapType(mapStyleZoomedOut, {map: map, name: 'minimal'})); 
map.setMapTypeId('minimal'); 

google.maps.event.addListener(map, 'zoom_changed', function() { 
    if (map.getMapTypeId() !== 'satellite') { 
    map.setMapTypeId(map.getZoom() <= 8 ? 'min' : 'max'); 
    } 
});