I am trying to have custom google maps zoom buttons disabled based on the max zoom available for the location. However, the value from the MaxZoomService does not match what the maximum zoom available actually is. This is preventing me from disabling the zoom in button at the same level the built-in buttons seem to be able to do.
In the following demo, you will see the maxZoom report at 19, and then it zooms to 20 after 2 seconds. Then, if you use the controls to zoom out, you cannot get back to 20 with the controls because the maxZoom had reported 19, and I can’t assume if the max zoom is actually 20 or 21 as a workaround.
<html>
<head>
<script>
(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
key: "REDACTED",
v: "weekly",
});
</script>
<style>
.google-maps-control {
background: #3C69BE;
color: white;
padding: 10px;
border: solid 1px #45C6EF;
margin: 10px 0 0 10px;
cursor: pointer;
}
.google-maps-control[disabled] {
opacity: 0.6;
cursor: not-allowed;
}
</style>
</head>
<body>
<h1>Test Google Maps Max Zoom</h1>
<div id="map" style="width: 600px; height: 400px"></div>
<script>
init();
let map;
let zoomInButton;
let zoomOutButton;
let maxZoom;
const center = {
lat: 45.4633341,
lng: -98.4512069,
};
async function init() {
await createMap();
await setAndDemonstrateMaxZoom();
createCustomControls();
handleDisabledButtons();
}
async function createMap() {
const { Map, MaxZoomService } = await google.maps.importLibrary("maps");
map = new Map(document.getElementById("map"), {
center,
zoom: 18,
mapTypeId: "satellite",
// if I comment this out, the built-in buttons are disabled as expected
disableDefaultUI: true,
// isFractionalZoomEnabled: true,
gestureHandling: 'greedy',
});
// use `map` global to assert that map.setZoom(20) surpasses maxZoom 19
window.map = map;
}
async function setAndDemonstrateMaxZoom() {
const { MaxZoomService } = await google.maps.importLibrary("maps");
const maxZoomService = new MaxZoomService();
const result = await maxZoomService.getMaxZoomAtLatLng({
lat: center.lat,
lng: center.lng,
});
if (result) {
maxZoom = result.zoom;
console.warn("getMaxZoomAtLatLng reports 19", maxZoom);
map.setZoom(maxZoom);
setTimeout(() => {
map.setZoom(20);
console.warn("but maxZoom is actually 20", map.getZoom());
}, 2000);
}
}
function createCustomControls() {
zoomInButton = createZoomInControl();
zoomOutButton = createZoomOutControl();
zoomWrapper = document.createElement('div');
zoomWrapper.appendChild(zoomInButton);
zoomWrapper.appendChild(zoomOutButton);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(zoomWrapper);
}
function createZoomInControl() {
const button = document.createElement('button');
button.classList.add(...['google-maps-control']);
button.innerText = '+';
button.addEventListener('click', () => {
const zoom = map.getZoom();
map.setZoom(zoom + 1);
});
return button;
}
function createZoomOutControl() {
const button = document.createElement('button');
button.classList.add(...['google-maps-control']);
button.innerText = '-';
button.addEventListener('click', () => {
const zoom = map.getZoom();
map.setZoom(zoom - 1);
});
return button;
}
function handleDisabledButtons() {
google.maps.event.addListener(map, 'zoom_changed', () => {
console.log('zoom_changed', map.getZoom());
const zoom = map.getZoom();
// disabling the zoom-in button does not replicate the built-in controls here
zoomInButton.disabled = zoom >= maxZoom ? true : false;
zoomOutButton.disabled = zoom <= 17 ? true : false;
});
}
</script>
</body>
</html>