Como apagar os Markers do Google Maps

30/08/2019

3

Olá, estou criando um mapa que lê os dados do Google Places e retorna as lojas mais próximas em um raio de 50.000 metros. Ele funciona perfeitamente, porém, quando pesquiso outra localização no search, os markers não somem. Criei uma função para apagar os markers anteriores, mas infelizmente não funcionou. Qualquer ajuda é bem-vinda! E agradeço a atenção! Segue o código:


var map;
var cont = 0;

function initMap() {
  // Create the map.

  map = new google.maps.Map(document.getElementById('map'), {
    center: {
      lat: -14.5,
      lng: -70
    },
    zoom: 4
  });

  var input = document.getElementById('pac-input');

  var autocomplete = new google.maps.places.Autocomplete(input);

  autocomplete.bindTo('bounds', map);

  // Specify just the place data fields that you need.
  autocomplete.setFields(['place_id', 'geometry', 'name', 'formatted_address', 'formatted_phone_number']);

  map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

  var infowindow = new google.maps.InfoWindow();
  var infowindowContent = document.getElementById('infowindow-content');
  infowindow.setContent(infowindowContent);

  var geocoder = new google.maps.Geocoder;



  var marker = new google.maps.Marker({
    map: map
  });
  marker.addListener('click', function() {
    infowindow.open(map, marker);
  });

  autocomplete.addListener('place_changed', function() {
    infowindow.close();
    var ul = document.getElementById("places");
    while (ul.firstChild) {
      ul.removeChild(ul.firstChild);
    }

    //DeleteMarker(places);
    var place = autocomplete.getPlace();
    var pyrmont = place.geometry.location;
    console.log(place.geometry.location);
    // Create the places service.
    var service = new google.maps.places.PlacesService(map);
    var getNextPage = null;
    var moreButton = document.getElementById('more');
    moreButton.onclick = function() {
      moreButton.disabled = true;
      if (getNextPage) getNextPage();
    };

    if (!place.place_id) {
      return;
    }
    console.log(place.geometry.location);
    geocoder.geocode({
      'placeId': place.place_id
    }, function(results, status) {
      if (status !== 'OK') {
        window.alert('Geocoder failed due to: ' + status);
        return;
      }

      map.setZoom(11);
      map.setCenter(results[0].geometry.location);

      // Set the position of the marker using the place ID and location.
      marker.setPlace({
        placeId: place.place_id,
        location: results[0].geometry.location
      });

      // Perform a nearby search.
      service.nearbySearch({
          location: pyrmont,
          rankBy: google.maps.places.RankBy.DISTANCE,
          /*radius: 10000,*/
          name: ['lojas']

        },

        function(results, status, pagination) {
          if (status !== 'OK') return;

          createMarkers(results);
          moreButton.disabled = !pagination.hasNextPage;
          getNextPage = pagination.hasNextPage && function() {
            pagination.nextPage();
          };
        });

      marker.setVisible(true);

      function createMarkers(places) {
        var bounds = new google.maps.LatLngBounds();
        var placesList = document.getElementById('places');
        cont = 1;
        for (var i = 0, place; place = places[i]; i++) {
          var image = {
            url: place.icon,
            size: new google.maps.Size(71, 71),
            origin: new google.maps.Point(0, 0),
            anchor: new google.maps.Point(17, 34),
            scaledSize: new google.maps.Size(25, 25)
          };

          var marker = new google.maps.Marker({
            map: map,
            icon: image,
            label: cont.toString(),
            title: place.name,
            position: place.geometry.location,
          });
          console.log(place.formatted_phone_number);
          var li = document.createElement('li');
          var proc = "<span class='modal-store-number'>" + cont + "</span>";
          li.innerHTML = proc + " " + place.vicinity;
          /* li.textContent =  proc + " " + place.vicinity; */
          console.log(place);
          placesList.appendChild(li);
          bounds.extend(place.geometry.location);
          cont++;


        }

        map.fitBounds(bounds);

        function DeleteMarker(places) {
          if (cont >= 1) {
            for (i = 0; i < cont; i++) {
              places[i].setMap(null);
            }
          }
        }

      }


      infowindowContent.children['place-name'].textContent = place.name;
      infowindowContent.children['place-id'].textContent = place.place_id;
      infowindowContent.children['place-address'].textContent =
        results[0].formatted_address;

      infowindow.open(map, marker);


    });
  });

}



#map {
  height: 100%;
}


/* Optional: Makes the sample page fill the window. */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#right-panel {
  font-family: 'Roboto', 'sans-serif';
  line-height: 30px;
  padding-left: 10px;
}

#right-panel select,
#right-panel input {
  font-size: 15px;
}

#right-panel select {
  width: 100%;
}

#right-panel i {
  font-size: 12px;
}

#right-panel {
  font-family: Arial, Helvetica, sans-serif;
  position: absolute;
  left: 11%;
  top: 36%;
  /* margin-top: -195px; */
  height: 260px;
  width: 300px;
  padding: 5px;
  z-index: 5;
  border: 1px solid #999;
  background: #fff;
}

h2 {
  font-size: 22px;
  margin: 0 0 5px 0;
}

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  height: 226px;
  width: 300px;
  overflow-y: scroll;
}

li {
  background-color: #f1f1f1;
  padding: 10px;
  text-overflow: ellipsis;
  white-space: inherit;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
}

li:nth-child(odd) {
  background-color: #fcfcfc;
}

#more {
  width: 100%;
  margin: 5px 0 0 0;
}

#pac-input {
  z-index: 0;
  position: absolute;
  left: 1.2% !important;
  top: 20% !important;
  width: 288px;
  padding: 10px;
}

.modal-store-number {
  font-family: Calibri;
  font-size: 18px;
  font-weight: 900;
  padding: 8px 16px;
  background-color: #e2e2e2;
  flex-shrink: 0;
  margin-right: 16px;
}


/* Fim Padrão */


/* Novo */

.modal-box {
  position: fixed;
  top: 0px;
  left: 0px;
  height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, .5);
  font-family: arial;
  font-size: 16px;
}

.modal {
  width: 80%;
  height: 70%;
}


<div class="modal-box">
  <div class="modal">
    <div id="map"></div>
    <div id="infowindow-content">
      <span id="place-name" class="title"></span>
      <strong style="display: none;">Place ID</strong> <span id="place-id" style="display: none;"></span><br>
      <span id="place-address"></span>
    </div>
    <div class="grp">
      <div style="display: none">
        <input id="pac-input" class="controls" type="text" placeholder="Digite seu Endereço">
      </div>
      <div id="right-panel">
        <h2>Lojas:</h2>
        <ul id="places"></ul>
        <button id="more" style="display:none;">More results</button>
      </div>
    </div>
  </div>
</div>
<script src="https://maps.googleapis.com/maps/api/js?key=SUA_CHAVE
&libraries=places&callback=initMap" async defer></script>

Responder
×
+1 DevUP
Acesso diário, +1 DevUP
Parabéns, você está investindo na sua carreira