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

borrar marcadores google maps javascript

Question

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

map.clearOverlays();

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

En cuanto a la API de referencia , no está claro para mí.

Answer 1

¿Quieres decir eliminar como ocultarlos o eliminarlos?

si se esconde:

function clearMarkers() {
            setAllMap(null);
        }

Si desea borrarlos:

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

Observe que utilizo una matriz de marcadores para realizar un seguimiento de ellos y restablecerlo manualmente.

Answer 2

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

Answer 3

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

Answer 4

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

Lo he corregido, cambiar el método de 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

Answer 5

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

Answer 6

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

1. Configurar el MarkerManager

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

2. Añadir 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 los marcadores, solo necesita llamar a la función clearMarkers() de clearMarkers()

mgr.clearMarkers();

Answer 7

Es necesario establecer el mapa nulo a 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);
   }

Answer 8

Esta fue la más simple de todas las soluciones publicadas originalmente por YingYang el 11 de marzo de 2014 a las 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 como un encanto

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

// No need to clear the array after that.

Answer 9

Este es el método que usan ellos mismos en al menos una muestra:

var markers = [];

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

Ver ejemplo de código completo en Google sample:

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

Answer 10

He probado todas las soluciones propuestas, pero nada me funcionó mientras todos mis marcadores estaban debajo de un grupo. Eventualmente 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 los marcadores en un clúster y desea eliminar todos los marcadores, debe llamar a:

clearMarkers();

Answer 11

La forma más limpia de hacerlo es recorrer 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 dibujos , es mejor crear una matriz global de marcadores o empujar los marcadores en la capa de datos al crearlos, de este modo:

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 usar otros métodos de clase google.maps.data más adelante.

Answer 12

La función " set_map " publicada en ambas respuestas parece que ya no funciona en Google Maps v3 API.

Me pregunto qué pasó

Actualizar:

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

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

Answer 13

La galería de demostración de Google tiene una demostración de cómo lo hacen:

overlay-overview

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

En resumen, mantienen los marcadores en una matriz global. Al borrarlos / borrarlos, 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 agregue rápidamente al mapa. En cierto sentido, esto actúa como "esconderlos".

"Eliminar" también borra la matriz.

Answer 14

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

Por lo tanto, si establece null en este método ( marker.setMap(null); ), el pin desaparecerá.

Ahora, puede escribir una función que haga desaparecer todos los marcadores en su mapa.

Simplemente agregue para poner sus pins 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 puede configurar o eliminar 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 , puede reemplazar YOUR_API_KEY en el código con su clave API de Google:

<!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 el desarrollador de Google o la documentación completa en, también, el sitio web de desarrollador de Google .

Answer 15

Lo siguiente de Anon funciona perfectamente, aunque con parpadeos al borrar 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. Presione los marcadores en el ''markerArray'' antes de llamar a lo siguiente:

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

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

¡¡Eso es!!

Espero que te ayude.

Answer 16

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

En mi caso, también tuve que llamar a setMap(null) a mi DirectionsRenderer .

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

Answer 17

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

simplemente use:

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

Aquí hay una función que escribí para hacerlo desde 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"));
}

Answer 18

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

1.addMarker (ubicación): esta función se usa para agregar un 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 una matriz

4.deleteMarkers (): esta función elimina todos los marcadores de la matriz eliminando las 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 = [];
      }

Answer 19

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

La gente sugiere mantener las referencias a todos los marcadores que tiene en el mapa en una matriz. Y luego, cuando desee eliminarlos todos, simplemente realice un bucle a través de 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 la versión editada de este código lootogo.com/googlemapsapi3/markerPlugin.html Eliminé la necesidad de llamar a addMarker manualmente.

Pros

• De esta manera, mantendrá el código compacto y en un solo lugar (no contamina el espacio de nombres).
• Ya no tiene que seguir la pista de los marcadores, siempre puede encontrar todos los marcadores en el mapa llamando a map.getMarkers ()

Contras

• Usar prototipos y envoltorios como lo hice ahora hace que mi código dependa del código de Google, si hacen un cambio mayor en su fuente, esto se romperá.
• Si no lo entiendes, no podrás 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. (Podrías editar mi método setMap para arreglarlo, pero a costa de hacer un bucle a través de la matriz de marcadores y eliminar la referencia)

Answer 20

Puedes hacerlo de esta manera también:

function clearMarkers(category){ 
  var i;       

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

Answer 21

Sé que esto quizás sea una solución simple, pero esto es lo que hago

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

Siempre funciona para mí.

Answer 22

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

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

Answer 23

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. Presione los marcadores en el ''markerArray'' antes de llamar a lo siguiente:

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

IV. Llame a los clearOverlays(); o map.clearOverlays(); funciona donde sea necesario.

¡¡Eso es!!

Answer 24

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

Answer 25

Usando esto puedes eliminar todos los marcadores del mapa.

map.clear();

Esto te ayudaría, me ayudaría ..

Answer 26

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

    map.clear();

Answer 27

acaba de borrar Googlemap

mGoogle_map.clear();

Answer 28

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

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

Answer 29

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

Solo esta trabajando en IE.

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

Trabajando en Chrome, Firefox, es decir ...

Answer 30

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 usé la implementación personalizada anterior.

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