6

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.

kamchatka
  • 127
  • 2
  • 2
  • 6
  • Best suggestion for you is: `google.maps.event.addListenerOnce(map, 'idle', function() { updateMap(); });` – ihimv Jan 15 '16 at 14:10

2 Answers2

5

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.

bamnet
  • 2,525
  • 17
  • 21
  • 1
    dragend and zoom_changed Was pretty much exactly what I needed. I had tried bounds_changed earlier but dragend is much better for my needs. Thank you. – kamchatka Jan 11 '12 at 15:29
  • +1 That is a really nice answer! Simple approach that helped me a lot! Check out the addition (as an "answer") that I've added for people that might be looking for something on the same lines but using drag and drop. – Eduardo Jan 14 '14 at 11:40
0

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.

Eduardo
  • 4,282
  • 2
  • 49
  • 63