Categories
google-maps google-maps-api-3 html javascript

Google Maps API v3: How to remove all markers?

441

In Google Maps API v2, if I wanted to remove all the map markers, I could simply do:

map.clearOverlays();

How do I do this in Google Maps API v3?

Looking at the Reference API, it’s unclear to me.

6

85

Same problem. This code doesn’t work anymore.

I’ve corrected it, change clearMarkers method this way:

set_map(null) —> setMap(null)

google.maps.Map.prototype.clearMarkers = function() {
    for(var i=0; i < this.markers.length; i++){
        this.markers[i].setMap(null);
    }
    this.markers = new Array();
};

Documentation has been updated to include details on the topic: https://developers.google.com/maps/documentation/javascript/markers#remove

5

  • 1

    The way I finally got it working was to iterate through the markers collection where I stored them and use setMap(null)

    – Sebastian

    Apr 13, 2010 at 2:45

  • 4

    But does this clear the markers from memory? I realize JavaScript has automatic garbage collection, but how do we know Google’s API does not hold a reference to the marker when setMap(null) is called? In my application, I add and “delete” a ton of markers, and I would hate for all those “deleted” markers to be sucking up memory.

    – Nick

    Jul 23, 2010 at 4:11

  • @Nick: add ‘delete this.markers[i];’ after the setMap(null) bit.

    – DaveS

    Jan 7, 2011 at 21:13

  • 4

    This question is answered in the documentation now. code.google.com/apis/maps/documentation/javascript/…

    – lashleigh

    Jan 20, 2011 at 19:43

  • 1

    Who even uses new Array(); ?

    – Rihards

    Nov 22, 2012 at 8:39

49

It seems that there is no such function in V3 yet.

People suggest to keep references to all markers you have on the map in an array. And then when you want to delete em all, just loop trough the array and call .setMap(null) method on each of the references.

See this question for more info/code.

My version:

google.maps.Map.prototype.markers = new Array();

google.maps.Map.prototype.getMarkers = function() {
    return this.markers
};

google.maps.Map.prototype.clearMarkers = function() {
    for(var i=0; i<this.markers.length; i++){
        this.markers[i].setMap(null);
    }
    this.markers = new Array();
};

google.maps.Marker.prototype._setMap = google.maps.Marker.prototype.setMap;

google.maps.Marker.prototype.setMap = function(map) {
    if (map) {
        map.markers[map.markers.length] = this;
    }
    this._setMap(map);
}

The code is edited version of this code http://www.lootogo.com/googlemapsapi3/markerPlugin.html I removed the need to call addMarker manually.

Pros

  • Doing this way you keep the code compact and in one place (doesn’t pollute the namespace).
  • You don’t have to keep track of the markers yourself anymore you can always find all the markers on the map by calling map.getMarkers()

Cons

  • Using prototypes and wrappers like I did now makes my code dependent on Google code, if they make a mayor change in their source this will break.
  • If you don’t understand it then you won’t be able to fix it if does break. The chances are low that they’re going to change anything which will break this, but still..
  • If you remove one marker manually, it’s reference will still be in markers array. (You could edit my setMap method to fix it, but at the cost of looping trough markers array and removing the reference)

5

  • 1

    +1 From me. But your answer would be better if you included the wrapper to call addMarker automatically!

    – Andrew

    Oct 9, 2009 at 17:07

  • I assume you’re referring to Andrews answer actually. Would you show with code what you’d do different and why. Thanks

    – mp_

    Oct 9, 2009 at 17:10

  • Meh sorry for delay, I was holding back from posting code because I had no way to quickly test it.

    Oct 9, 2009 at 17:43

  • Thanks Maiku. Though, I don’t understand – how do I add a new marker in your example. Again, many many thanks!

    – mp_

    Oct 9, 2009 at 17:50

  • 1

    I tried using setMap(null), but I had an auto-updating script, and every time I set all 50 or so of my markers to a null map, I still had a bunch of mapless markers floating around in the DOM somewhere. This kept causing the page to crash because each 30 seconds it added 50 new markers to the DOM, and this propagated endlessly because the page stayed open 24/7 on a video wall. I had to use the top answer and clear all map overlays from the DOM entirely before creating new ones. Hope this helps someone; it took a long time for me to figure out why my page was crashing! 🙁

    Jul 25, 2012 at 22:02