javascript - Google maps API 3 removeListener not workingacting weird - Stack Overflow

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?

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?

• javascript
• google-maps-api-3
• listener
• google-maps-markers
• dom-events

Share Improve this question Follow edited Jun 21, 2020 at 7:42 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Jan 12, 2012 at 13:44 jenswirfjenswirf 7,3371111 gold badges5151 silver badges6868 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

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/bryan_weaver/vPN7R/

Adding

if(displayInfoProcess) {google.maps.event.removeListener(displayInfoProcess);}

to the beginning of the displayInfo function appears to have done the trick.