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 faire cela dans l'API Google Maps v3 ?

En regardant l' API de référence , ce n'est pas clair pour moi.

Procédez simplement comme suit:

Déclarez 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. Poussez les marqueurs dans le 'markerArray' avant d'appeler ce qui suit:

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

IV. Appelez la fonction clearOverlays();ou map.clearOverlays();là où vous le souhaitez.

C'est ça!!

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

Il semble qu'il n'y ait pas encore une telle fonction dans V3.

Les gens suggèrent de conserver les références à tous les marqueurs que vous avez sur la carte dans un tableau. Et puis, lorsque vous voulez les supprimer tous, faites une boucle dans le tableau et appelez 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é le besoin d'appeler manuellement addMarker.

Avantages

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

Les inconvénients

• L'utilisation de prototypes et de wrappers comme je l'ai fait maintenant rend mon code dépendant du code Google, s'il change le maire de sa source, cela cassera.
• Si vous ne le comprenez pas, vous ne pourrez pas le réparer s'il se casse. Les chances sont faibles qu'ils vont changer quoi que ce soit qui puisse casser cela, mais quand même ..
• Si vous supprimez un marqueur manuellement, sa référence sera toujours dans le tableau des marqueurs. (Vous pouvez modifier ma méthode setMap pour y remédier, mais au prix de boucler le tableau des marqueurs et de supprimer la référence)

C'était la plus simple de toutes les solutions initialement publiées par YingYang le 11 mars 2014 à 15 h 04 sous la réponse d'origine à la question d'origine des utilisateurs.

J'utilise sa même solution 2,5 ans 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.

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 V3, j'ai donc utilisé l'implémentation personnalisée ci-dessus.

Avertissement: 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.

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

Voir l'exemple à l' 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;
  }
}

La galerie de démonstration de Google propose une démonstration sur la façon dont ils le font:

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.

Pour faire court, ils gardent les marqueurs dans un tableau global. Lors de leur effacement / suppression, ils bouclent 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 ajouter rapidement à la carte. Dans un sens, cela revient à "les cacher".

"Supprimer" efface également le tableau.

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

ne fonctionne que sur IE.

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

travailler sur chrome, firefox, c'est à dire ...

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

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

Maintenant, vous pouvez écrire une fonction qui fait disparaître tous les marqueurs de votre carte.

Vous venez d'ajouter pour mettre vos broches 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);
}

Il s'agit d'une fonction qui permet de définir ou de supprimer 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_KEYle 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 le développeur Google ou la documentation complète sur, également, le site Web du développeur Google .

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

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

je me demande ce qui est arrivé

Mise à 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

Vous trouverez ici un exemple de suppression de 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 = [];
}

Ce qui suit d'Anon fonctionne parfaitement, bien qu'avec des scintillements lors de la suppression répétée des superpositions.

Procédez simplement comme suit:

Déclarez une variable globale:

var markersArray = [];

II. Définissez une fonction:

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

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

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

IV. Appelez la clearOverlays()fonction où vous le souhaitez.

C'est ça!!

J'espère que cela vous aidera.

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

1. Configurez le MarkerManager

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

2. Ajoutez des marqueurs au 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 clearMarkers()fonction MarkerManger

mgr.clearMarkers();

Vous pouvez aussi le faire de cette façon:

function clearMarkers(category){ 
  var i;       

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

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

Pour effacer toutes les superpositions, y compris les polys, les marqueurs, etc.

utilisez simplement:

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 cartographique:

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

Pour supprimer tous les marqueurs de la carte, créez des fonctions comme ceci:

1.addMarker (emplacement): 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 de marqueurs dans le tableau

4. supprimer les marqueurs (): 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 = [];
      }

La manière la plus propre de procéder consiste à parcourir toutes les fonctionnalités de la carte. Les marqueurs (avec les polygones, les polylignes, etc.) sont stockés dans la couche de données 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 le gestionnaire de dessins , il est préférable de créer un tableau global de marqueurs ou de pousser les marqueurs dans la couche de données lors de la création comme suit:

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 d'autres méthodes de classe google.maps.data plus tard.

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

var markers = [];

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

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

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

Je ne sais pas pourquoi, mais le réglage setMap(null)de mes marqueurs n'a pas fonctionné pour moi lorsque j'utilise DirectionsRenderer.

Dans mon cas, j'ai dû également appeler setMap(null)mon 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);
    }
});

Parcourez simplement les marqueurs et supprimez-les de la carte, videz le tableau des marqueurs de cartes après cela:

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

effacez googlemap

mGoogle_map.clear();

J'ai essayé toutes les solutions proposées, mais rien n'a fonctionné pour moi alors que tous mes marqueurs étaient sous un cluster. Finalement, je viens de mettre ceci:

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 encapsulez des marqueurs dans un cluster et souhaitez supprimer tous les marqueurs, vous appelez:

clearMarkers();

Vous voulez dire supprimer comme en les cachant ou en les supprimant?

s'il se cache:

function clearMarkers() {
            setAllMap(null);
        }

si vous souhaitez les supprimer:

 function deleteMarkers() {
            clearMarkers();
            markers = [];
        }

notez que j'utilise un tableau de marqueurs pour garder une trace d'eux et le réinitialiser manuellement.

Vous devez définir la carte nulle sur ce marqueur.

var markersList = [];    

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

function addMarkers() {
   var marker = new google.maps.Marker({
        position : {
            lat : 12.374,
            lng : -11.55
        },
        map : map
       });
      markersList.push(marker);
   }

J'ai trouvé une solution simple (je pense):

var marker = new google.maps.Marker();

function Clear(){
     marker.setMap(null);
}

J'utilise un raccourci qui fait bien le travail. Fais juste

    map.clear();

si vous utilisez le plugin gmap V3: $("#map").gmap("removeAllMarkers");

voir: http://www.smashinglabs.pl/gmap/documentation#after-load

Je sais que c'est peut-être une solution simple, mais c'est ce que je fais

$("#map_canvas").html("");
markers = [];

Fonctionne à chaque fois pour moi.