Google지도 v3 : 확대/축소 수준에 따라지도 스타일을 변경하는 방법은 무엇인가요?

Question

새로운 Google지도 v3 스타일 맵을 사용하고 있습니다.

확대/축소 수준에 따라지도의 스타일을 변경하고 싶습니다.

다음의 의사 코드가 있습니다. 확대/축소 수준에 따라지도 스타일을 어떻게 변경합니까? Google maps API V3를 사용하여 사전

Answer 1

에서

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

덕분에, 나는 (테스트 작업을하기 위해 실제 값) 소스 코드에서 함께 테스트 예를 넣습니다.

아래 코드는 내가 성공적으로 테스트하는 데 사용하는 코드입니다. 주 코드는 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

저는 @staticbeast 솔루션에서 영감을 얻어 몇 가지 리팩터링을 수행했습니다.

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