Google Maps API v3: ¿Cómo eliminar todos los marcadores?

En Google Maps API v2, si quisiera eliminar todos los marcadores del mapa, simplemente podría hacer:

map.clearOverlays();

¿Cómo hago esto en la API de Google Maps v3 ?

Mirando la API de referencia , no me queda claro.

Simplemente haga lo siguiente:

I. Declarar una variable global:

var markersArray = [];

II Definir una función:

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

O

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

III. Empuje los marcadores en la 'matriz de marcadores' antes de llamar a lo siguiente:

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

IV. Llame a la función clearOverlays();o map.clearOverlays();donde sea necesario.

¡¡Eso es!!

El mismo problema. Este código ya no funciona.

Lo he corregido, cambie el método clearMarkers de esta manera:

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 documentación se ha actualizado para incluir detalles sobre el tema: https://developers.google.com/maps/documentation/javascript/markers#remove

Parece que todavía no existe tal función en V3.

Las personas sugieren mantener referencias a todos los marcadores que tiene en el mapa en una matriz. Y luego, cuando desee eliminarlos todos, simplemente recorra la matriz y llame al método .setMap (nulo) en cada una de las referencias.

Vea esta pregunta para más información / código.

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

El código es una versión editada de este código http://www.lootogo.com/googlemapsapi3/markerPlugin.html Eliminé la necesidad de llamar a addMarker manualmente.

Pros

• Al hacerlo, mantienes el código compacto y en un solo lugar (no contamina el espacio de nombres).
• Ya no tiene que hacer un seguimiento de los marcadores, siempre puede encontrar todos los marcadores en el mapa llamando a map.getMarkers ()

Contras

• El uso de prototipos y envoltorios como lo hice ahora hace que mi código dependa del código de Google; si hacen un cambio importante en su fuente, esto se romperá.
• Si no lo comprende, no podrá arreglarlo si se rompe. Hay pocas posibilidades de que cambien cualquier cosa que rompa esto, pero aún así ...
• Si elimina un marcador manualmente, su referencia seguirá estando en la matriz de marcadores. (Puede editar mi método setMap para solucionarlo, pero a costa de recorrer la matriz de marcadores a través y eliminar la referencia)

Esta fue la más simple de todas las soluciones publicadas originalmente por YingYang el 11 de marzo de 14 a 15: 049 en la respuesta original a la pregunta original de los usuarios

Estoy usando su misma solución 2.5 años después con google maps v3.18 y funciona de maravilla

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

No creo que haya uno en V3, así que utilicé la implementación personalizada anterior.

Descargo de responsabilidad: no escribí este código, pero olvidé conservar una referencia cuando la fusioné en mi base de código, así que no sé de dónde vino.

En la nueva versión v3, recomendaron mantener en matrices. como sigue.

Ver muestra en 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 Galería de demostración de Google tiene una demostración de cómo lo hacen:

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

Puede ver el código fuente para ver cómo agregan marcadores.

En pocas palabras, mantienen los marcadores en una matriz global. Al borrarlos / eliminarlos, recorren la matriz y llaman ".setMap (null)" en el objeto marcador dado.

Sin embargo, este ejemplo muestra un 'truco'. "Borrar" para este ejemplo significa eliminarlos del mapa pero mantenerlos en la matriz, lo que permite que la aplicación los vuelva a agregar rápidamente al mapa. En cierto sentido, esto actúa como "ocultarlos".

"Eliminar" también borra la matriz.

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

solo funciona en IE.

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

trabajando en Chrome, Firefox, es decir ...

La solución es bastante fácil. Es posible utilizar el método: marker.setMap(map);. Aquí, usted define en qué mapa aparecerá el pin.

Entonces, si configura nulleste método ( marker.setMap(null);), el pin desaparecerá.

Ahora, puedes escribir una función bruja mientras haces desaparecer todos los marcadores en tu mapa.

Simplemente agregue para colocar sus pines en una matriz y declararlos con markers.push (your_new pin)o este código, por ejemplo:

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

Esta es una función que la bruja puede establecer o desaparecer todos los marcadores de su matriz en el mapa:

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

Para desaparecer todos sus marcadores, debe llamar a la función con null:

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

Y, para eliminar y desaparecer todos sus marcadores, debe restablecer su matriz de marcadores de esta manera:

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

Este es mi código completo. Es lo más simple que podría reducir. Tenga cuidado de que pueda reemplazar YOUR_API_KEYen el código por su API de Google clave:

<!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>

Puede consultar al desarrollador de Google o la documentación completa en, también, el sitio web del desarrollador de Google .

Una aplicación limpia y fácil de la respuesta 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) ;
    }

set_mapParece que la función " " publicada en ambas respuestas ya no funciona en la API de Google Maps v3.

Me pregunto qué pasó

Actualizar:

Parece que Google cambió su API de modo que " set_map" no es " setMap".

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

Aquí puede encontrar un ejemplo de cómo eliminar marcadores:

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 = [];
}

Lo siguiente de Anon funciona perfectamente, aunque con parpadeos cuando se borran repetidamente las superposiciones.

Simplemente haga lo siguiente:

I. Declarar una variable global:

var markersArray = [];

II Definir una función:

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

III. Empuje los marcadores en la 'matriz de marcadores' antes de llamar a lo siguiente:

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

IV. Llame a la clearOverlays()función donde sea necesario.

¡¡Eso es!!

Espero que te ayude.

Encontré el uso de la biblioteca markermanager en el proyecto google-maps-utility-library-v3 como la forma más fácil.

1. Configure el MarkerManager

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

2. Agregue marcadores al MarkerManager

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

3. Para borrar marcadores solo necesita llamar a la clearMarkers()función MarkerManger

mgr.clearMarkers();

También puedes hacerlo de esta manera:

function clearMarkers(category){ 
  var i;       

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

Acabo de probar esto con kmlLayer.setMap (nulo) y funcionó. No estoy seguro de si eso funcionaría con marcadores regulares, pero parece funcionar correctamente.

Para eliminar todas las superposiciones, incluyendo polys, marcadores, etc.

simplemente use:

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

Aquí hay una función que escribí para que me forme en una aplicación de mapas:

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

Para eliminar todos los marcadores del mapa, cree funciones como esta:

1.addMarker (ubicación): esta función se usa para agregar marcador en el mapa

2.clearMarkers (): esta función elimina todos los marcadores del mapa, no de la matriz

3.setMapOnAll (mapa): esta función se usa para agregar información de marcadores en la matriz

4.deleteMarkers (): esta función elimina todos los marcadores en la matriz eliminando referencias a ellos.

// 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 forma más limpia de hacerlo es iterar sobre todas las características del mapa. Los marcadores (junto con polígonos, polilíneas, etc.) se almacenan en la capa de datos del mapa.

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

En el caso de que los marcadores se agreguen a través del administrador de dibujo , es mejor crear una matriz global de marcadores o empujar los marcadores a la capa de datos en la creación de la siguiente manera:

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

Recomiendo el segundo enfoque, ya que le permite utilizar otros métodos de clase google.maps.data más adelante.

Este es el método que Google usa en al menos una muestra:

var markers = [];

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

Verifique el ejemplo de Google para obtener un ejemplo de código completo:

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

No sé por qué, pero la configuración setMap(null)de mis marcadores no me funcionó cuando la uso DirectionsRenderer.

En mi caso tuve que llamar setMap(null)a mi DirectionsRenderertambién.

Algo como eso:

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

Simplemente camine sobre los marcadores y elimínelos del mapa, matriz de marcadores de mapas vacíos después de eso:

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

simplemente borra Googlemap

mGoogle_map.clear();

He intentado todas las soluciones propuestas, pero nada funcionó para mí mientras todos mis marcadores estaban bajo un clúster. Finalmente acabo de poner esto:

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 otras palabras, si envuelve marcadores en un clúster y desea eliminar todos los marcadores, llame a:

clearMarkers();

¿Te refieres a eliminar como al ocultarlos o eliminarlos?

si se esconde

function clearMarkers() {
            setAllMap(null);
        }

si desea eliminarlos:

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

Observe que uso marcadores de matriz para hacer un seguimiento de ellos y restablecerlo manualmente.

Debe establecer un mapa nulo para ese marcador.

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

Encontré una solución simple (creo):

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

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

Yo uso una taquigrafía que hace bien el trabajo. Solo haz

    map.clear();

si usa el complemento gmap V3: $("#map").gmap("removeAllMarkers");

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

Sé que esta puede ser una solución simple, pero esto es lo que hago

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

Siempre funciona para mí.