Geek Answers Handbook

Google maps V3 dragend listener adds all markers back to the map

I have a google map using V3 API. It has one marker on it, which is dragged, and then loads other markers that are static. I set up a drag and drop listener for the draggable marker, which calls the clear_markers () function as follows:

google.maps.event.addListener(marker_0, "dragend", function() { clear_markers(); }); function clear_markers() { if (markers) { for (var i = 1; i <= markers.length; i++ ) { if(typeof markers[i] !== "undefined") { markers[i].setMap(null); } } } }

The reason I start the for loop at 1 rather than 0 is because my draggable marker is the first marker, so I want to clear all the markers from the map except this one.

Here is the problem:

If I call clear_markers (); in any other way, it works fine and the markers are removed from the map, so something like this works:

 $('#mybutton').click(function() { clear_markers(); });

When you drag the green marker and it is called from the dragend listener, it does not work. Markers are deleted, but then they are added again. I know that they are deleted, because if I put something in the clear_markers () function right after the for loop that kills the script, the markers are deleted. But if the script is allowed to continue, they are still there, which means they were deleted and then added again.

I do not call any other code, so it seems to me that an error with api is given to me. Does anyone have any ideas?

Here is a working example showing the problem:

https://tinker.io/64b68/1

+4
source share
2 answers

Remove the Clusterer marker. It adds markers back, and you are not using it.

Update:

Since you need to save it, if you want the markers not to be displayed, you need to remove them from the Clusterer marker:

  markerCluster.clearMarkers();

(but you need to make it global in order to use it that way)

+2
source

Your eventListener call is correct, just not in the right place in your code. I added a few warnings to the eventListener to find out what is happening, and if you see the second warning, the markers are actually cleared - but as soon as the warning window closes, the markers reappear. Try it yourself:

 google.maps.event.addListener(marker_0, "dragend", function() { alert("before calling clear_markers()"); clear_markers(); alert("markers should be cleared"); });

This means that as soon as javascript is launched into your dragend event listener, it will execute the code inside - but then it will also go through the rest of the code, and therefore the markers are populated on the map again. You can fix this problem by adding an event listener to the end of your initialize() function after var markerCluster = new MarkerClusterer(map, markers, clusterOptions); .

text in italics is a wrong explanation, see answer below for the correct solution

/ ---------------------------------------------- --- -------------------------------------------- /

Ignoring my previous answer, let me change it. Again, you are calling eventListener in the correct way. You just need to add the following code snippet to the listener function to make sure the markers are not displayed.

 google.maps.event.addListener(marker_0, "dragend", function() { clear_markers(); markerCluster.setMap(null); });

It seems that markerCluster initialization overrides your clear function on markers. Thus, you will also need to clear the marker cluster from your card. I apologize for the fact that you made a mistake in my previous answer, markCluster is a new concept for me.

+1
source

More articles:


All Articles