0

Estoy trabajando con la API de Google Maps con un buscador integrado para colocar pins.

El problema es que necesito que el mapa no genere pins ilimitados, sino que cada vez que se realice una nueva búsqueda se elimine el pin anteriormente generado. Además me gustaría que la latitud y longitud del lugar en el que se coloque el pin se almacene en una variable.

Adjunto el código que estoy utilizando (siento los errores pero soy muy novato aún):

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 16,
    center: {
      lat: 37.358220,
      lng: -5.987028
    }
  });
  var geocoder = new google.maps.Geocoder();

  document.getElementById('submit').addEventListener('click',
    function() {
      geocodeAddress(geocoder, map);
    });
}

function geocodeAddress(geocoder, resultsMap) {
  var address = document.getElementById('address').value;
  geocoder
    .geocode({
        'address': address
      },
      function(results, status) {
        if (status === 'OK') {
          resultsMap
            .setCenter(results[0].geometry.location);
          var marker = new google.maps.Marker({
            map: resultsMap,
            position: results[0].geometry.location,
            draggable: true
          });

          google.maps.event
            .addListener(
              marker,
              'dragend',
              function(evt) {
                document
                  .getElementById('current').innerHTML = '<p>Marker dropped: Current Lat: ' +
                  evt.latLng
                  .lat()
                  .toFixed(
                    3) +
                  ' Current Lng: ' +
                  evt.latLng
                  .lng()
                  .toFixed(
                    3) +
                  '</p>';
              });

          google.maps.event
            .addListener(
              marker,
              'dragstart',
              function(evt) {
                document
                  .getElementById('current').innerHTML = '<p>Currently dragging marker...</p>';
              });
        } else {
          alert('Geocode was not successful for the following reason: ' +
            status);
        }
      });
}
<script async defer src="https://maps.googleapis.com/maps/api/js?key=*mykey*&callback=initMap"></script>

<div id="floating-panel">
  <input id="address" type="textbox" value="ETSII, Sevilla"> <input id="submit" type="button" value="Buscar">
</div>
<div id="map"></div>

1 respuesta 1

0

Hola solo tienes que manejar un array e ir guardando en el las referencias los marcadores que vallas agregando, cuando quieres borrar las marcas recorres cada una haciendo:

marcadores[i].setMap(null)  // esto estaria dentro de un for o foreach

después solo vacías el array y listo.

Puedes ver aqui un ejemplo completo, pero es la idea.

Saludos

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.