How To Know If The User Change Zoom (google Maps V3)

I'm developing an app with Google Maps and Angularjs. I have this code to control whether the zoom is changed google.maps.event.addListener(map, 'zoom_changed', function(){ });

Solution 1:

The current accepted solution may not properly solve this question in a general case. Go to the interactive demo for map UI events in the Google Maps API docs. Note that if you position your cursor on the map and scroll with your mouse's scroll wheel, none of the mouse or drag events are fired because the mouse remains stationary.

The current solution assumes that no programmatic map updates will occur after the mouseover event, which may be true for the original poster's application but might not be true in a more general application.

I propose the alternate solution below.

First, wherever you programmatically update the map in your code, set a custom property on the map—we'll call ours systemZoomChange—that indicates the change was initiated programmatically.

var latlngbounds = new google.maps.LatLngBounds();
for (var i = 0; i < latlng.length; i++) {
  latlngbounds.extend(latlng[i]);
}

map.systemZoomChange = true
map.fitBounds(latlngbounds);

Then on any event listeners, add a check for the custom systemZoomChange property, and reset it if flagged, to avoid acting on system events.

map.addListener('zoom_changed', function () {
  if (map.systemZoomChange) {
    map.systemZoomChange = false// Reset the flag for a system-initiated event
  } else {
    // Handle the user-initiated event
  }
});

Solution 2:

Ok, I found the way

google.maps.event.addListenerOnce(map, 'mousemove', function(){

    google.maps.event.addListener(map, 'zoom_changed', function(){

    });

  });

First, it detects if the mouse moves and then if the zoom if changed and works properly!