Beschränkung der Sichtbarkeit von Google Maps auf bestimmte Zoomstufen?

Question

Gibt es eine Möglichkeit, die Sichtbarkeit von Boden-Overlays in Google Maps auf nur bestimmte Zoomstufen, sagen wir zwischen 12 und 14

In Google's example in ihrem official documentation auf allen Zoomstufen der Boden-Overlay zeigt gezeigt zu begrenzen. Hier ist ihr Code:

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

einen Ereignis-Listener hinzufügen zum map on the 'zoom_changed` event (documentation):

zoom_changed | Argumente: Keine Dieses Ereignis wird ausgelöst, wenn sich die Kartenzoomeigenschaft ändert.

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>