maxZoom и стилизованная карта Google Fusion

Question

Когда я использую карту Google в стиле, она игнорирует maxZoom и minZoom, которые я установил, полностью удалив панель масштабирования. Ограничения масштабирования работают, если я не включаю StyledMapType. Я что-то упускаю? Или maxZoom/minZoom не поддерживается с помощью StyledMapType?

Спасибо за помощь.

function initialize() { 
    map = new google.maps.Map(document.getElementById('map-canvas'), { 
    center: new 
    google.maps.LatLng(29.45, -95.75), 
    zoom: 10 
    }); 



    var style = [ 
    { 
     featureType: 'all', 
     elementType: 'all', 
     stylers: [ 
     { saturation: -99 } 
     ] 
    }, 
      { 
     featureType: 'road.local', 
     elementType: 'all', 
     stylers: [ 
     { visibility: 'off' } 
     ] 
    }, 
    { 
     featureType: 'administrative.land_parcel', 
     elementType: 'all', 
     stylers: [ 
     { visibility: 'off' } 
     ] 
    } 
    ]; 




    var styledMapType = new google.maps.StyledMapType(style, { 
    map: map, 
    name: 'Styled Map' 
    }); 


    map.mapTypes.set('map-style', styledMapType); 





    google.maps.event.addListenerOnce(map, "projection_changed", function(){ 
    map.setMapTypeId('map-style');   
    layer_0 = new google.maps.FusionTablesLayer({ 
    query: { 
     select: "col3", 
     from: "14XfhpSuNK0aSJkbnb5UFrsE1UPRE_wr4d9IwKjW7" 
    }, 
    map: map, 
    styleId: 2, 
    templateId: 2 
    }); 

    setZoomLimit(map, google.maps.StyledMapType); 
    setZoomLimit(map, google.maps.MapTypeId.ROADMAP); 
    setZoomLimit(map, google.maps.MapTypeId.HYBRID); 
    setZoomLimit(map, google.maps.MapTypeId.SATELLITE); 
    setZoomLimit(map, google.maps.MapTypeId.TERRAIN); 
    map.setMapTypeId(google.maps.StyledMapType); 
}); 

    layer_0 = new google.maps.StyledMapType({ 
    query: { 
     select: "col3", 
     from: "14XfhpSuNK0aSJkbnb5UFrsE1UPRE_wr4d9IwKjW7" 
    }, 
    map: map, 
    styleId: 2, 
    templateId: 2 
    }); 
} 

    function setZoomLimit(map, mapTypeId){ 
    var mapTypeRegistry = map.mapTypes; 

var mapType = mapTypeRegistry.get(mapTypeId); 
mapType.maxZoom = 13; 
mapType.minZoom = 8; } 

Answer 1

1. Ваш код генерирует JavaScript ошибки: Uncaught TypeError: Cannot set property 'maxZoom' of undefined на этой линии: mapType.maxZoom = 13;. Нет google.maps.StyledMapType. MapTypeId вашей стилизованной карты - это «стиль карты». Вы не можете установить свойство maxZoom для «undefined».

2. Это неверно, не знаю, что он должен делать, я не думаю, что это необходимо.

layer_0 = new google.maps.StyledMapType({ 
    query: { 
    select: "col3", 
    from: "14XfhpSuNK0aSJkbnb5UFrsE1UPRE_wr4d9IwKjW7" 
    }, 
    map: map, 
    styleId: 2, 
    templateId: 2 
}); 

working fiddle

фрагмент кода:

var map; 
 

 
function initialize() { 
 
    map = new google.maps.Map(document.getElementById('map-canvas'), { 
 
    center: new 
 
    google.maps.LatLng(29.45, -95.75), 
 
    zoom: 10 
 
    }); 
 

 
    var style = [{ 
 
    featureType: 'all', 
 
    elementType: 'all', 
 
    stylers: [{ 
 
     saturation: -99 
 
    }] 
 
    }, { 
 
    featureType: 'road.local', 
 
    elementType: 'all', 
 
    stylers: [{ 
 
     visibility: 'off' 
 
    }] 
 
    }, { 
 
    featureType: 'administrative.land_parcel', 
 
    elementType: 'all', 
 
    stylers: [{ 
 
     visibility: 'off' 
 
    }] 
 
    }]; 
 

 
    var styledMapType = new google.maps.StyledMapType(style, { 
 
    map: map, 
 
    name: 'Styled Map' 
 
    }); 
 
    map.mapTypes.set('map-style', styledMapType); 
 

 

 
    google.maps.event.addListenerOnce(map, "projection_changed", function() { 
 
    setZoomLimit(map, 'map-style'); 
 
    setZoomLimit(map, google.maps.MapTypeId.ROADMAP); 
 
    setZoomLimit(map, google.maps.MapTypeId.HYBRID); 
 
    setZoomLimit(map, google.maps.MapTypeId.SATELLITE); 
 
    setZoomLimit(map, google.maps.MapTypeId.TERRAIN); 
 
    map.setMapTypeId('map-style'); 
 
    }); 
 

 
    layer_0 = new google.maps.FusionTablesLayer({ 
 
    query: { 
 
     select: "col3", 
 
     from: "14XfhpSuNK0aSJkbnb5UFrsE1UPRE_wr4d9IwKjW7" 
 
    }, 
 
    map: map, 
 
    styleId: 2, 
 
    templateId: 2 
 
    }); 
 
} 
 
google.maps.event.addDomListener(window, 'load', initialize); 
 

 
function setZoomLimit(map, mapTypeId) { 
 
    var mapTypeRegistry = map.mapTypes; 
 

 
    var mapType = mapTypeRegistry.get(mapTypeId); 
 
    mapType.maxZoom = 13; 
 
    mapType.minZoom = 8; 
 
}

html, 
 
body, 
 
#map-canvas { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="map-canvas" style="border: 2px solid #3872ac;"></div>