0

How can I modify my code for the zoom_changed event to support zooming in and out by levels of 2? For example, I would prefer the map to go from 11 to 13 to 15, and so on. Basically, odd level zooms only.

My current implementation results in Uncaught RangeError: Maximum call stack size exceeded error because the event keeps firing.

I know I can create custom zoom in/out buttons (as demonstrated by this solution), but this type of zoom functionality would only work if someone used those buttons.

I'm hoping for this zoom functionality to work for scrollwheel and pinch to zoom in/out on mobile as well.

Here's a sample of my current implementation: http://jsfiddle.net/gbrdn0sn

code snippet:

var currentZoom; function initialize() { var mapOptions = { zoom: 11, center: { lat: -33.8666, lng: 151.1958 } }; var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); google.maps.event.addListener(map, 'zoom_changed', function() { currentZoom = map.getZoom() + 2; console.log(currentZoom); map.setZoom(currentZoom); document.getElementById('zoom-level').innerHTML = currentZoom; }); } google.maps.event.addDomListener(window, 'load', initialize);
html, body { height: 100%; margin: 0; padding: 0px } #map-canvas { height: 100%; width: 100%; } #current-zoom { display: block; width: 100%; }
<script src="https://maps.googleapis.com/maps/api/js"></script> <div id="zoom-level"></div> <div id="map-canvas"></div>

Improve this question

1 Answer 1

Reset to default
0

To prevent the error is to prevent the event from firing on the commanded "extra zoom". One way to do that is to ignore the commanded "zoom_changed" event.

google.maps.event.addListenerOnce(map, 'zoom_changed', zoomChanged);

function zoomChanged() { // ignore zoom_changed event from this change google.maps.event.addListenerOnce(map, 'zoom_changed', function() { // then process the next google.maps.event.addListenerOnce(map, 'zoom_changed', zoomChanged); }); console.log("lastZoom=" + currentZoom + " map.getZoom()=" + map.getZoom()); if (currentZoom < map.getZoom()) { // zooming in if (map.getZoom() % 2 != 1) { currentZoom = map.getZoom() + 1; } else { currentZoom = map.getZoom(); } } else { // zooming out if (map.getZoom() % 2 != 1) { currentZoom = map.getZoom() - 1; } else { currentZoom = map.getZoom() - 2; } } console.log(currentZoom); map.setZoom(currentZoom); currentZoom = map.getZoom(); document.getElementById('zoom-level').innerHTML = currentZoom; }

proof of concept fiddle

code snippet:

var currentZoom; function initialize() { var mapOptions = { zoom: 11, center: { lat: -33.8666, lng: 151.1958 } }; var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); currentZoom = map.getZoom(); google.maps.event.addListenerOnce(map, 'zoom_changed', zoomChanged); function zoomChanged() { // ignore zoom_changed event from this change google.maps.event.addListenerOnce(map, 'zoom_changed', function() { // then process the next google.maps.event.addListenerOnce(map, 'zoom_changed', zoomChanged); }); console.log("lastZoom=" + currentZoom + " map.getZoom()=" + map.getZoom()); if (currentZoom < map.getZoom()) { // zooming in if (map.getZoom() % 2 != 1) { currentZoom = map.getZoom() + 1; } else { currentZoom = map.getZoom(); } } else { // zooming out if (map.getZoom() % 2 != 1) { currentZoom = map.getZoom() - 1; } else { currentZoom = map.getZoom() - 2; } } console.log(currentZoom); map.setZoom(currentZoom); currentZoom = map.getZoom(); document.getElementById('zoom-level').innerHTML = currentZoom; } } google.maps.event.addDomListener(window, 'load', initialize);
html, body { height: 100%; margin: 0; padding: 0px } #map-canvas { height: 100%; width: 100%; } #current-zoom { display: block; width: 100%; }
<script src="https://maps.googleapis.com/maps/api/js"></script> <div id="zoom-level"></div> <div id="map-canvas"></div>

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

Thanks for your detailed answer @geocodzip. It clarifies a lot of things.
How come the zoom in button needs to be clicked twice before it starts zooming in? I understand that currentZoom is undefined on first click.
The currentZoom variable needed to be initialized, fixed in code snippet and linked fiddle.
It seems like this solution does not work with new JS Maps API renderer. For example, it doesn't work if you double click the map to zoom in, but works fine if you use the zoom in / out buttons.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.