How to delete markers before painting new ones on idle event

153 views
Skip to first unread message

amitsh

unread,
May 31, 2011, 5:23:20 AM5/31/11
to Google Maps JavaScript API v3
Hi,

I'm drawing markers after a map has been panned or zoomed.
If the viewport has not totally changed than the markers that appeared
before the move and should still appear after it are being painted on
top of themselves again and again.
I know I have to delete all the markers from the map before the new
markers are painted and I know I should probably be using
marker.setMap(null);.
I just don't know how and where to fit it in my code:

google.maps.event.addListener(map, 'idle', showMarkers);

function showMarkers(){
// get viewport bounds
var southWestLat = map.getBounds().getSouthWest().lat();
var southWestLng = map.getBounds().getSouthWest().lng();
var northEastLat = map.getBounds().getNorthEast().lat();
var northEastLng =
map.getBounds().getNorthEast().lng();

var marker;

$.ajax({
type: "POST",
url: "markers.php",
dataType: "json",
data: ({'southWestLat' : southWestLat , 'southWestLng' :
southWestLng , 'northEastLat' : northEastLat , 'northEastLng' :
northEastLng}),
success: function(coordinatesMap){
for (var id in coordinatesMap){
if (coordinatesMap.hasOwnProperty(id))
{
marker = new google.maps.Marker({
position: new
google.maps.LatLng(coordinatesMap[id].lat,coordinatesMap[id].lng),
map: map
});
}
}
}
});
}

Rossko

unread,
May 31, 2011, 6:01:07 AM5/31/11
to Google Maps JavaScript API v3
> I know I have to delete all the markers from the map before the new
> markers are painted and I know I should probably be using
> marker.setMap(null);.
> I just don't know how and where to fit it in my code:

You can't, unless you somehow remember which markers you put on the
map in order to remove them later.
The usual approach is to store added markers in an array.
When you want to remove them all, iterate through the array and remove
each, then clear the array.

There are more sophisticated approaches, like checking 'new' markers
against 'old' ones in your array so as to avoid removing/adding the
same marker.

amitsh

unread,
May 31, 2011, 6:13:47 AM5/31/11
to Google Maps JavaScript API v3
Rosko, thanks.

Is checking new markers against old ones in the array less "expensive"
than deleting all the markers and redrawing them?
In the first approach you'll have to take each new marker and try to
find it in the array.
In the worst case scenario the number of actions here will be the
number of markers power 2.
So 1,000 markers can cause 1,000,000 checks.
In the second approach you will only have to delete a 1,000 markers
and then draw a 1,000 more.

Rossko

unread,
May 31, 2011, 10:59:08 AM5/31/11
to Google Maps JavaScript API v3
> Is checking new markers against old ones in the array less "expensive"
> than deleting all the markers and redrawing them?

Depends. There's more than one way of keeping arrays, e.g. keyed by
some ID avoids a lot of searching. Maybe you should just try the
simple way, if it is good enough for your use it is good enough.

amitsh

unread,
May 31, 2011, 3:20:50 PM5/31/11
to Google Maps JavaScript API v3
OK. Thanks.
Reply all
Reply to author
Forward
0 new messages