グーグルオーバーレイの表示をGoogleマップの特定のズームレベルに制限しますか？

Question

Googleマップで地面オーバーレイの可視性を制限する方法はありにのみ、特定のズームレベルは、そのofficial documentationに示すGoogle's exampleで

12の間および14、グランドオーバーレイはすべてのズームレベルで表示されると言います。

var historicalOverlay; 

function initMap() { 
    var map = new google.maps.Map(document.getElementById('map'), { 
    zoom: 13, 
    center: {lat: 40.740, lng: -74.18} 
    }); 

    var imageBounds = { 
    north: 40.773941, 
    south: 40.712216, 
    east: -74.12544, 
    west: -74.22655 
    }; 

    historicalOverlay = new google.maps.GroundOverlay(
     'https://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg', 
     imageBounds); 
    historicalOverlay.setMap(map); 
} 

Answer 1

がmap on the 'zoom_changed` event (documentation)にイベントリスナーを追加します： ここでは自分のコードである

zoom_changed |引数：なし このイベントは、地図のズームプロパティが変更されたときに発生します。

google.maps.event.addListener(map, 'zoom_changed', function() { 
    var zoom = map.getZoom(); 
    if ((zoom > 12) && (zoom < 15)) { 
    historicalOverlay.setMap(map); 
    } else { 
    historicalOverlay.setMap(null); 
    } 
}); 

var historicalOverlay; 
 
var map; 
 

 
function initMap() { 
 
    map = new google.maps.Map(document.getElementById('map'), { 
 
    zoom: 13, 
 
    center: { 
 
     lat: 40.740, 
 
     lng: -74.18 
 
    } 
 
    }); 
 
    google.maps.event.addListener(map, 'zoom_changed', function() { 
 
    document.getElementById('zoom').innerHTML = "zoom =" + map.getZoom(); 
 
    var zoom = map.getZoom(); 
 
    if ((zoom > 12) && (zoom < 15)) { 
 
     historicalOverlay.setMap(map); 
 
    } else { 
 
     historicalOverlay.setMap(null); 
 
    } 
 
    }) 
 

 
    var imageBounds = { 
 
    north: 40.773941, 
 
    south: 40.712216, 
 
    east: -74.12544, 
 
    west: -74.22655 
 
    }; 
 

 
    historicalOverlay = new google.maps.GroundOverlay(
 
    'https://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg', 
 
    imageBounds); 
 
    historicalOverlay.setMap(map); 
 
} 
 
google.maps.event.addDomListener(window, "load", initMap);

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

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="zoom"></div> 
 
<div id="map"></div>