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>