Google Map event bounds_changed triggered multiple times when dragging

I have a google map with markers. I want my markers to be refreshed when the map is moved/zoomed...

Google recommend to use the event bounds_changed for that, but when I move the map, the event is triggered for each pixel that I move the map. I want the map to be refreshed only when the user stopped moving the map, i.e. when he released the mouse button after dragging.

How can I do that ?

It turns out it was a reported bug: http://code.google.com/p/gmaps-api-issues/issues/detail?id=1371.

The Google team recommend to use the event "idle". For example :

google.maps.event.addListener(map, 'idle', function() {
});

While the selected answer is best for most circumstances. If you want to control the delay yourself, you can simply use something like;

 var mapupdater;

 {....}

 google.maps.event.addListener(map, "bounds_changed", mapSettleTime); 


 function mapSettleTime() {
	 clearTimeout(mapupdater);
	 mapupdater=setTimeout(getMapMarkers,500);
 }
 

Add a timeout, that runs your code 500ms after the event fires, each time the event fires clear the timeout and create a new one.

google.maps.event.addListener(map, 'bounds_changed', (function () {
    var timer;
    return function() {
        clearTimeout(timer);
        timer = setTimeout(function() {
            // here goes an ajax call
        }, 500);
    }
}()));

You should check how a debounce function works. A nice article by Taylor Case define it as follows:

> This function is built in order to limit the amount of times a > function is called — scroll events, mousemove events, and keypress > events are all great examples of events that we might want to capture, > but can be quite taxing if we capture them every single time they > fire.

So you define the function somewhere in your code:

function debounce(fn, time) {
  let timeout;
  return function() {
    const args = arguments;
    const functionCall = () => fn.apply(this, args);
    clearTimeout(timeout);
    timeout = setTimeout(functionCall, time);
  }
}

Then you just use that function when adding your listener:

google.maps.event.addListener(myMap, 'bounds_changed', debounce(() => { /* Do something here */ }, 250));

It seems that 250 ms is a good frequency to use here.

try using both zoom_changed and dragend

Here is a little snippet that will remove all redundant 'bound_changed' call's:

var timeout;
google.maps.event.addListener(map, 'bounds_changed', function () {
window.clearTimeout(timeout);
timeout = window.setTimeout(function () {
	//do stuff on event
	}, 500);
}); //time in ms, that will reset if next 'bounds_changed' call is send, otherwise code will be executed after that time is up