web-dev-qa-db-fra.com

API Google Maps v3: comment supprimer tous les marqueurs?

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

map.clearOverlays();

Comment procéder dans Google Maps API v3?

En regardant la API de référence , cela m'est incertain.

javascripthtmlgoogle-mapsgoogle-maps-api-3
413
mp_

Faites simplement ce qui suit:

I. Déclarer une variable globale:

var markersArray = [];

II. Définir une fonction:

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

OR

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

III. Poussez les marqueurs dans le 'markerArray' avant d'appeler le suivant:

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

IV Appelez la fonction clearOverlays(); ou map.clearOverlays(); chaque fois que nécessaire.

C'est tout!!

470
anon

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 le sujet: https://developers.google.com/maps/documentation/javascript/markers#remove

83
Pons

Il semble qu’il n’existe pas encore de fonction de ce type dans V3.

Les gens suggèrent de garder des références à tous les marqueurs que vous avez sur la carte dans un tableau. Et ensuite, lorsque vous souhaitez tout supprimer, il vous suffit de parcourir le tableau 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 modifiée de ce code http://www.lootogo.com/googlemapsapi3/markerPlugin.html J'ai supprimé la nécessité d'appeler addMarker manuellement.

Avantages

  • En procédant ainsi, vous gardez le code compact et au même endroit (ne pollue pas l’espace de noms).
  • Vous n'avez plus besoin de suivre vous-même les marqueurs, vous pouvez toujours trouver tous les marqueurs sur la carte en appelant map.getMarkers ()

Les inconvénients

  • Utiliser des prototypes et des wrappers comme je le fais maintenant rend mon code dépendant du code de Google. S'ils modifient leur source de façon importante, cela se cassera.
  • Si vous ne le comprenez pas, vous ne pourrez pas le réparer si ça casse. Les chances sont faibles qu'ils vont changer quoi que ce soit qui va casser ça, mais quand même ..
  • Si vous supprimez un marqueur manuellement, sa référence sera toujours dans le tableau de marqueurs. (Vous pouvez modifier ma méthode setMap pour résoudre ce problème, mais au prix de la boucle sur le tableau de marqueurs et de la suppression de la référence) 
46
Maiku Mori

C’était la plus simple de toutes les solutions initialement publiées par YingYang le 11 mars 2014 à 15h09 dans la réponse originale à la question initiale de l'utilisateur

J'utilise sa même solution deux ans et demi plus tard avec Google Maps v3.18 et cela fonctionne comme un charme

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

// No need to clear the array after that.
22
rolinger
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 un dans la V3, alors j'ai utilisé l'implémentation personnalisée ci-dessus.

Clause de non-responsabilité: je n'ai pas écrit ce code, mais j'ai oublié de conserver une référence lorsque je l'ai intégré à ma base de code. Je ne sais donc pas d'où il provient.

20
Andrew

Sur la nouvelle version v3, ils ont recommandé de garder dans les tableaux. comme suit. 

Voir l'exemple à overlay-overview .

var map;
var markersArray = [];

function initialize() {
  var haightAshbury = new google.maps.LatLng(37.7699298, -122.4469157);
  var mapOptions = {
    zoom: 12,
    center: haightAshbury,
    mapTypeId: google.maps.MapTypeId.TERRAIN
  };
  map =  new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

  google.maps.event.addListener(map, 'click', function(event) {
    addMarker(event.latLng);
  });
}

function addMarker(location) {
  marker = new google.maps.Marker({
    position: location,
    map: map
  });
  markersArray.Push(marker);
}

// Removes the overlays from the map, but keeps them in the array
function clearOverlays() {
  if (markersArray) {
    for (i in markersArray) {
      markersArray[i].setMap(null);
    }
  }
}

// Shows any overlays currently in the array
function showOverlays() {
  if (markersArray) {
    for (i in markersArray) {
      markersArray[i].setMap(map);
    }
  }
}

// Deletes all markers in the array by removing references to them
function deleteOverlays() {
  if (markersArray) {
    for (i in markersArray) {
      markersArray[i].setMap(null);
    }
    markersArray.length = 0;
  }
}
15
Jirapong
for (i in markersArray) {
  markersArray[i].setMap(null);
}

ne travaille que sur IE.

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

travailler sur chrome, firefox, c.-à-d.

6
Nguoi Viet Nam

La solution est assez simple. Vous pouvez utiliser la méthode suivante: marker.setMap(map);. Ici, vous définissez sur quelle carte l’épingle apparaîtra. 

Donc, si vous définissez null dans cette méthode (marker.setMap(null);), la broche disparaîtra.

Vous pouvez maintenant écrire une fonction en faisant disparaître tous les marqueurs de votre carte.

Vous venez d’ajouter pour placer vos pins dans un tableau et les déclarer avec markers.Push (your_new pin) ou ce code par exemple:

// Adds a marker to the map and Push to the array.
function addMarker(location) {
  var marker = new google.maps.Marker({
    position: location,
    map: map
  });
  markers.Push(marker);
}

C'est une fonction qui peut définir ou faire disparaître tous les marqueurs de votre tableau dans la carte:

// Sets the map on all markers in the array.
  function setMapOnAll(map) {
    for (var i = 0; i < markers.length; i++) {
      markers[i].setMap(map);
    }
  }

Pour faire disparaître tous vos marqueurs, vous devez appeler la fonction avec null:

// Removes the markers from the map, but keeps them in the array.
  function clearMarkers() {
    setMapOnAll(null);
  }

Et, pour supprimer et supprimer tous vos marqueurs, vous devez réinitialiser votre tableau de marqueurs comme ceci:

// Deletes all markers in the array by removing references to them.
  function deleteMarkers() {
    clearMarkers();
    markers = [];
  }

Ceci est mon code complet. C’est le plus simple que je puisse réduire. Attention vous pouvez remplacer YOUR_API_KEY dans le code par votre clé google API:

<!DOCTYPE html>
<html>
  <head>
  <title>Remove Markers</title>
  <style>
     /* Always set the map height explicitly to define the size of the div
     * element that contains the map. */
     #map {
       height: 100%;
       }
  </style>
</head>
<body>

<div id="map"></div>
<p>Click on the map to add markers.</p>
<script>

  // In the following example, markers appear when the user clicks on the map.
  // The markers are stored in an array.
  // The user can then click an option to hide, show or delete the markers.
  var map;
  var markers = [];

  function initMap() {
    var haightAshbury = {lat: 37.769, lng: -122.446};

    map = new google.maps.Map(document.getElementById('map'), {
      zoom: 12,
      center: haightAshbury,
      mapTypeId: 'terrain'
    });

    // This event listener will call addMarker() when the map is clicked.
    map.addListener('click', function(event) {
      addMarker(event.latLng);
    });

    // Adds a marker at the center of the map.
    addMarker(haightAshbury);
  }

   // Adds a marker to the map and Push to the array.
  function addMarker(location) {
    var marker = new google.maps.Marker({
      position: location,
      map: map
    });
    markers.Push(marker);
  }

  // Sets the map on all markers in the array.
  function setMapOnAll(map) {
    for (var i = 0; i < markers.length; i++) {
      markers[i].setMap(map);
    }
  }

  // Removes the markers from the map, but keeps them in the array.
  function clearMarkers() {
    setMapOnAll(null);
  }

  // Shows any markers currently in the array.
  function showMarkers() {
    setMapOnAll(map);
  }

  // Deletes all markers in the array by removing references to them.
  function deleteMarkers() {
    clearMarkers();
    markers = [];
  }

</script>
   <script async defer
    src="https://maps.googleapis.com/maps/api/js key=YOUR_API_KEY&callback=initMap">
   </script>
</body>
</html>

Vous pouvez consulter développeur google ou la documentation complète sur, également, site Web développeur google .

6
SphynxTech

La galerie de démonstration de Google propose une démonstration de la manière dont il procède:

http://code.google.com/apis/maps/documentation/javascript/examples/overlay-remove.html

Vous pouvez afficher le code source pour voir comment ils ajoutent des marqueurs. 

En bref, ils gardent les marqueurs dans un tableau global. Lorsqu'ils les effacent ou les effacent, ils parcourent le tableau et appellent ".setMap (null)" sur l'objet marqueur donné.

Cependant, cet exemple montre une "astuce". "Effacer" pour cet exemple signifie les supprimer de la carte mais les conserver dans le tableau, ce qui permet à l'application de les rajouter rapidement à la carte. Dans un sens, cela agit comme de les "cacher".

"Delete" efface également le tableau.

6
jmbertucci

Une application propre et facile de la réponse de rolinger.

function placeMarkerAndPanTo(latLng, map) {
      while(markersArray.length) { markersArray.pop().setMap(null); }
      var marker = new google.maps.Marker({
        position: latLng,
        map: map
      });
      map.panTo(latLng);

      markersArray.Push(marker) ;
    }
5
Adam Starrh

La fonction "set_map" publiée dans les deux réponses semble ne plus fonctionner dans l'API Google Maps v3.

Je me demande ce qui est arrivé

Mettre à jour:

Il semble que Google ait modifié son API de sorte que "set_map" ne soit pas "setMap".

http://code.google.com/apis/maps/documentation/v3/reference.html

4
GregN

Ici vous pouvez trouver un exemple sur la façon de supprimer des marqueurs:

https://developers.google.com/maps/documentation/javascript/examples/marker-remove?hl=es

// Add a marker to the map and Push to the array.
function addMarker(location) {
  var marker = new google.maps.Marker({
    position: location,
    map: map
  });
  markers.Push(marker);
}

// Sets the map on all markers in the array.
function setAllMap(map) {
  for (var i = 0; i < markers.length; i++) {
    markers[i].setMap(map);
   }
}

// Removes the markers from the map, but keeps them in the array.
function clearMarkers() {
  setAllMap(null);
}

// Deletes all markers in the array by removing references to them.
function deleteMarkers() {
  clearMarkers();
  markers = [];
}
4
Freddie

J'ai trouvé l'utilisation de la bibliothèque markermanager dans le projet google-maps-utility-library-v3 comme le moyen le plus simple.

1. Configurez le MarkerManager 

mgr = new MarkerManager(map);
google.maps.event.addListener(mgr, 'loaded', function () {
    loadMarkers();
});

2. Ajouter des marqueurs à MarkerManager  

function loadMarkers() {
  var marker = new google.maps.Marker({
            title: title,
            position: latlng,
            icon: icon
   });
   mgr.addMarker(marker);
   mgr.refresh();
 }

3. Pour effacer les marqueurs, il vous suffit d'appeler la fonction clearMarkers() du MarkerManger 

mgr.clearMarkers();
3
Craig Fruin

Ce qui suit de Anon fonctionne parfaitement, mais avec des scintillements lorsque vous effacez plusieurs fois les superpositions.

Faites simplement ce qui suit:

I. Déclarer une variable globale: 

var markersArray = [];

II. Définir une fonction: 

function clearOverlays() {
  if (markersArray) {
    for (i in markersArray) {
      markersArray[i].setMap(null);
    }
  }
}

III. Poussez les marqueurs dans le 'markerArray' avant d'appeler le suivant: 

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

IV. Appelez la fonction clearOverlays() si nécessaire.

C'est tout!!

J'espère que cela vous aidera.

3
middlewhere

Je viens d'essayer cela avec kmlLayer.setMap (null) et cela a fonctionné. Je ne sais pas si cela fonctionnerait avec les marqueurs normaux, mais semble fonctionner correctement.

2
bokor

Pour effacer tous les calques, y compris les polys, les marqueurs, etc ...

simplement utiliser:

map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);}

Voici une fonction que j'ai écrite pour le faire me former sur une application de carte:

  function clear_Map() {
    directionsDisplay = new google.maps.DirectionsRenderer();
    //var chicago = new google.maps.LatLng(41.850033, -87.6500523);
    var myOptions = {
        zoom: 8,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        center: HamptonRoads
    }

    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    directionsDisplay.setMap(map);
    directionsDisplay.setPanel(document.getElementById("directionsPanel"));
}
2
Will

Pour supprimer tous les marqueurs de la carte, créez des fonctions telles que:

1.addMarker (location): cette fonction permet d’ajouter un marqueur sur la carte

2.clearMarkers (): cette fonction supprime tous les marqueurs de la carte, pas du tableau

3.setMapOnAll (map): cette fonction permet d'ajouter des informations sur les marqueurs dans un tableau.

4.deleteMarkers (): cette fonction supprime tous les marqueurs du tableau en supprimant les références à ceux-ci.

// Adds a marker to the map and Push to the array.
      function addMarker(location) {
        var marker = new google.maps.Marker({
          position: location,
          map: map
        });
        markers.Push(marker);
      }


// Sets the map on all markers in the array.
      function setMapOnAll(map) {
        for (var i = 0; i < markers.length; i++) {
          markers[i].setMap(map);
        }
      }



// Removes the markers from the map, but keeps them in the array.
  function clearMarkers() {
    setMapOnAll(null);
  }

// Deletes all markers in the array by removing references to them.
      function deleteMarkers() {
        clearMarkers();
        markers = [];
      }
2
Rock Star

Pour ce faire, le moyen le plus simple consiste à parcourir toutes les caractéristiques de la carte. Les marqueurs (ainsi que les polygones, les polylignes, etc.) sont stockés dans la couche data de la carte.

function removeAllMarkers() {
  map.data.forEach((feature) => {
    feature.getGeometry().getType() === 'Point' ? map.data.remove(feature) : null
  });
}

Dans le cas où les marqueurs sont ajoutés via dessinateur , il est préférable de créer un tableau global de marqueurs ou d'insérer les marqueurs dans la couche de données lors de la création, de la manière suivante:

google.maps.event.addListener(drawingManager, 'overlaycomplete', (e) => {
    var newShape = e.overlay;
    newShape.type = e.type;

    if (newShape.type === 'marker') {
      var pos = newShape.getPosition()
      map.data.add({ geometry: new google.maps.Data.Point(pos) });

      // remove from drawing layer
      newShape.setMap(null);
    }
  });

Je recommande la deuxième approche car elle vous permet d’utiliser ultérieurement d’autres méthodes de la classe google.maps.data.

2
Mimo

Vous pouvez le faire aussi:

function clearMarkers(category){ 
  var i;       

  for (i = 0; i < markers.length; i++) {                          
    markers[i].setVisible(false);        
  }    
}
2
kolis29

C'est la méthode que Google utilise elle-même dans au moins un exemple:

var markers = [];

// Clear out the old markers.
markers.forEach(function(marker) {
  marker.setMap(null);
});
markers = [];

Consultez l'exemple de Google pour obtenir un exemple de code complet:

https://developers.google.com/maps/documentation/javascript/examples/places-searchbox

1
Ogglas

Je ne sais pas pourquoi, mais régler setMap(null) sur mes marqueurs ne fonctionnait pas pour moi lorsque j'utilise DirectionsRenderer.

Dans mon cas, j'ai également dû appeler setMap(null) à ma DirectionsRenderer.

Quelque chose comme ca:

var directionsService = new google.maps.DirectionsService();
var directionsDisplay = new google.maps.DirectionsRenderer();

if (map.directionsDisplay) {
    map.directionsDisplay.setMap(null);
}

map.directionsDisplay = directionsDisplay;

var request = {
    Origin: start,
    destination: end,
    travelMode: google.maps.TravelMode.DRIVING
};

directionsDisplay.setMap(map);
directionsService.route(request, function (result, status) {
    if (status == google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(result);
    }
});
0
Felipe Miosso

J'ai essayé toutes les solutions proposées, mais rien ne fonctionnait pour moi alors que tous mes marqueurs se trouvaient sous un cluster .

var markerCluster = new MarkerClusterer(map, markers,
    { imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m' });
agentsGpsData[agentGpsData.ID].CLUSTER = markerCluster;

//this did the trick
agentsGpsData[agentId].CLUSTER.clearMarkers();

En d'autres termes, si vous enroulez des marqueurs dans un cluster et souhaitez supprimer tous les marqueurs, vous appelez:

clearMarkers();
0
Geka P

J'utilise un raccourci qui fait bien le travail. Il suffit de faire

    map.clear();
0
Uchenna Nnodim

il suffit d'effacer Googlemap

mGoogle_map.clear();
0
RejoylinLokeshwaran

Il suffit de marcher sur les marqueurs et de les supprimer de la carte, puis vider le tableau de marqueurs de cartes:

var markers = map.markers;
for(var i = 0; i < markers.length; i++) {
    markers[i].setMap(null);
}
map.markers = [];
0
kaiser