Updating Maps V3 with 'idle' Listener. Opening InfowWindow triggers 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();
});

That part works great.

My trouble comes when I click on a marker to open it's InfoWindow. Opening an InfoWindow re-centers the map around the marker, which triggers the Listener from above, which then resets the map, hiding the InfoWindow.

Here is how I am creating the 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 insights are greatly appreciated.

Answer 1

updateMap might be where the underlying problem is. When you're updating the map you really don't need to be deleting every marker and adding it again; instead you want to remove the ones that you no longer need and add the ones that you do. (Admittedly, the first strategy is much simpler and works well for most use cases.)

Alternatively, there are two approaches I'd explore:

1. Store a global variable like 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 one ceveat being that is really a quick hack, and could definitely cause trouble if a marker is clicked that doesn't trigger the idle event (i.e. one in the center or something).

2. Don't use idle anymore. Events like dragend and zoom_changed might better capture the specific user interactions you're looking for.

Answer 2

Adding to bamnet's answer and maybe it will be useful for someone. It is not an answer by itself, because it was already answered but I had almost the same problem. In my case, the conflict was between dragging and redrawing.

When the user was dragging and taking the marker too far that the map was being panned. Therefore, the 'idle' would be called somewhere in the middle of the drag and drop process causing the moving marker to be positioned on the starting point. To avoid that, I've employed the same approach proposed by bamnet but using the dragstart and dragend events like 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 it will be helpful for someone.