Google-Maps v3: Harita stilini zum seviyesine göre nasıl değiştirebilirim?

Question

Yeni Google Maps v3 STYLED MAP kullanıyorum.

Haritanın Zum seviyesine göre nasıl Tarzlandığını değiştirmek istiyorum.

Aşağıdaki sahte kodum var, harita stilimi yakınlaştırma düzeyine göre nasıl değiştirebilirim? Google maps API V3 kullanma peşin

Answer 1

yılında

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

sayesinde, (test çalışması için gerçek değerler ile) kaynak kodundan birlikte bir test örneği koydu.

Başarıyla sınamak için kullandığım kod, dikkat etmek için ana kod start() işlevindedir.

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

@staticbeast çözümünden esinlendim ve bazı refactorings yaptım.

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