Updating V3 maps using the idle listener. Opening InfowWindow launches this and hides the marker

Question

This loads the map, gets new results and removes the old ones:

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

This part works great.

My problem arises when I click on a marker to open it InfoWindow. Opening InfoWindow re-centers the map around the marker, which calls the listener on top, which then discards the map, hiding InfoWindow.

This is how I create markers / InfoWindow:

 var infowindow = new google.maps.InfoWindow({}); function makeMarker(LatLong, markerName) { //this is called from a loop var marker = new google.maps.Marker({ position: LatLong, map: map, title:markerName, content: "html for the infoWindow" }); //Detect marker click google.maps.event.addListener(marker, "click", function() { infowindow.setContent(this.content); infowindow.open(map, marker); }); } 

Any ideas are greatly appreciated.

Answer 1

updateMap can be a major problem. When you update a map, you really do not need to delete each marker and add it again; instead, you want to remove the ones you no longer need and add the ones you do. (Admittedly, the first strategy is much simpler and works well for most use cases.)

In addition, there are two approaches that I would like to explore:

• Store a global variable of type markerClick and implement something like:

   google.maps.event.addListener(map, 'idle', function() { if(!markerClick){ updateMap(); markerClick = false; } }); google.maps.event.addListener(marker, "click", function() { markerClick = true; infowindow.setContent(this.content); infowindow.open(map, marker); }); 

  The only thing that actually exists is a quick hack, and it can definitely cause problems when you click on a marker that does not fire an unoccupied event (i.e., one in the center or something like that).

• Do not use idle anymore. Events like dragend and zoom_changed can better display the specific user interactions you are looking for.

Answer 2

Adding bamnet to the answer and maybe it will be useful for someone. This is not an answer in itself, because it has already been answered, but I had almost the same problem. In my case, the conflict was between drag and redraw.

When the user drag and drop the marker too far for the map to be expanded. Therefore, downtime will be called somewhere in the middle of the drag and drop process, as a result of which the moving marker will be placed at the starting point. To avoid this, I used the same approach proposed by bamnet, but using dragstart and dragend , for example the following:

  markerDrag = false; google.maps.event.addListener(map, 'idle', function() { if(!markerDrag) { updateMap(); } }); google.maps.event.addListener(marker, 'dragstart', function() { markerDrag = true; }); google.maps.event.addListener(marker, 'dragend', function() { // do stuff here, send new position to the server, etc. // ... markerDrag = false; }); 

I hope this will be helpful to someone.