Google maps API 3 removeListener not working/acting weird

Question

I have a click listener for each of my markers calling the function displayInfo, a custom infoBox..

google.maps.event.addListener(markers[i], 'click', function() {
        //stop updating markers
         google.maps.event.removeListener(updateMarkersProcess);

        //call display custom infowindow function
        displayInfo(this);
    });

I've got a bounds_change listener on my map for 'binding' a custom infobox to a marker. Like so:

function displayInfo(marker) {

 var e = $('infobox');

overlay.getPanes().floatPane.appendChild(e);

displayInfoProcess = google.maps.event.addListener(map, 'bounds_changed', function() {
    
    show('infobox');
    
    var markerOffset = overlay.getProjection().fromLatLngToDivPixel(marker.position);

    e.style.top = markerOffset.y + 20 + 'px';
    e.style.left = markerOffset.x - 40 + 'px';

    e.innerHTML = marker.store + '<br><em>' + convertDistance(marker.distance);   
     
});
map.panTo(marker.position); 
}

I then have a click listener on the map to hide the infoBox and stop the bounds_change listener...

[REMOVE LISTENER CODE HERE]

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

       google.maps.event.removeListener(displayInfoProcess);
       // google.maps.event.clearListeners(map, 'bounds_changed');
       hide('infobox');
     
    });

This hides the infoBox but the thing is, this doesn't seem to remove the listener. Here's a print from the log:

//Before clicking a marker (no listener)

displayInfoProcess null

//After clicking a marker (a listener)

displayInfoProcess Ue b: qh d: "bounds_changed" e: function () { id: 1480 j: null l: 0 proto: Ue

//After clicking on map (still, a listener)

displayInfoProcess Ue b: null d: "bounds_changed" e: null id: 1480 j: null l: 0 proto: Ue

And to make things really weird, if I..

1) Click a marker This shows infoBox1

2) Click another marker This shows infoBox2 instead of 1

3) Click the map This hides infoBox2

4) Pan the map

..the infoBox(1) from the FIRST marker shows up!

Is there a remedy?

Answer 1

The listener reference is being removed (look at the b: and e: properties, they are both null), all that remains is a shell. If the listener wasn't being removed anytime you attempt to pan the map it would snap back to the marker that added the listener.

Since all you seem to be doing with the displayInfoProcess event is showing the infobox I would use the google.maps.event.addListenerOnce() This will remove the listener immediately after it is executed.

function displayInfo(marker) {    
    google.maps.event.addListenerOnce(map, 'bounds_changed', function() {
        //set infobox info...
    });
    map.panTo(marker.position);
}

I personally do not like using the click event on the map. When a user is clicking on the map they are usually trying to pan the map so I use the dragstart, drag, and dragend events instead. By using the dragstart event you don't need to release the mouse button before trying to pan the map.

Here is an example using addListenerOnce and dragstart : http://jsfiddle.net/bryan_weaver/vPN7R/