API Google Maps v3 : comment supprimer tous les marqueurs ?

Question

Dans l'API Google Maps v2, si je voulais supprimer tous les marqueurs de carte, je pouvais simplement le faire :

map.clearOverlays();

Comment faire dans l'API de Google Maps v3 ?

En regardant le API de référence c'est pas clair pour moi.

Answer 1

Il suffit de faire ce qui suit :

I. Déclarer une variable globale :

var markersArray = [];

II. Définissez une fonction :

function clearOverlays() {
  for (var i = 0; i < markersArray.length; i++ ) {
    markersArray[i].setMap(null);
  }
  markersArray.length = 0;
}

OU

google.maps.Map.prototype.clearOverlays = function() {
  for (var i = 0; i < markersArray.length; i++ ) {
    markersArray[i].setMap(null);
  }
  markersArray.length = 0;
}

III. Placez les marqueurs dans le 'markerArray' avant d'appeler ce qui suit :

markersArray.push(marker);
google.maps.event.addListener(marker,"click",function(){});

IV. Appelez le clearOverlays(); ou map.clearOverlays(); à chaque fois que cela est nécessaire.

C'est ça !

Answer 2

Même problème. Ce code ne fonctionne plus.

Je l'ai corrigé, changez la méthode clearMarkers de cette façon :

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();
};

La documentation a été mise à jour pour inclure des détails sur ce sujet : https://developers.google.com/maps/documentation/javascript/markers#remove

Answer 3

Il semble qu'une telle fonction n'existe pas encore dans la V3.

Les gens suggèrent de garder les références à tous les marqueurs que vous avez sur la carte dans un tableau. Ensuite, lorsque vous souhaitez tous les supprimer, il suffit de parcourir le tableau en boucle et d'appeler la méthode .setMap(null) sur chacune des références.

Voir cette question pour plus d'informations/code.

Ma 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);
}

Le code est une version éditée de ce code http://www.lootogo.com/googlemapsapi3/markerPlugin.html J'ai supprimé la nécessité d'appeler addMarker manuellement.

Pour

• De cette façon, le code reste compact et se trouve à un seul endroit (il ne pollue pas l'espace de noms).
• Vous n'avez plus besoin de garder la trace des marqueurs vous-même, vous pouvez toujours trouver tous les marqueurs sur la carte en appelant map.getMarkers()

Cons

• L'utilisation de prototypes et de wrappers comme je l'ai fait rend mon code dépendant de celui de Google. S'ils apportent un changement majeur à leur source, le code sera cassé.
• Si vous ne le comprenez pas, vous ne serez pas en mesure de le réparer en cas de panne. Il y a peu de chances qu'ils changent quoi que ce soit qui puisse casser ça, mais quand même
• Si vous supprimez un marqueur manuellement, sa référence sera toujours présente dans le tableau des marqueurs. (Vous pouvez modifier ma méthode setMap pour résoudre ce problème, mais au prix d'une boucle dans le tableau des marqueurs et de la suppression de la référence).

Answer 4

C'est la solution la plus simple parmi toutes celles qui ont été proposées à l'origine par YingYang 11 Mar '14 à 15:049 sous la réponse originale à la question originale de l'utilisateur

J'utilise la même solution 2,5 ans plus tard avec google maps v3.18 et cela fonctionne à merveille.

markersArray.push(newMarker) ;
while(markersArray.length) { markersArray.pop().setMap(null); }

// No need to clear the array after that.

Answer 5

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

google.maps.Map.prototype.addMarker = function(marker) {
    this.markers[this.markers.length] = marker;
};

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();
};

Je ne pense pas qu'il y en ait une dans la V3, j'ai donc utilisé l'implémentation personnalisée ci-dessus.

Disclaimer : Je n'ai pas écrit ce code mais j'ai oublié de conserver une référence lorsque je l'ai fusionné dans ma base de code donc je ne sais pas d'où il vient.