Quiero crear un formulario donde puedas añadir la ubicación de ciertos eventos por medio de un mapa de google maps de forma cómoda pero no consigo mover la ubicación del marcador haciendo click, solo lo consigo arrastrándolo. Mi código:
HTML:
<input id="coordenadasEquipo" name="coordenadasEquipo" data-toggle="modal" data-target="#ModalEquipos" type="text" class="form-control display-inline-block" placeholder="Localización" required>
<!-- Modal Coordenadas-->
<div class="modal fade" id="ModalEquipos" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content modal-lg">
<div class="modal-header modal-lg">
<h5 class="modal-title" id="exampleModalLabel">Localización</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body modal-lg">
<div id="map"></div>
</div>
<div class="modal-footer modal-lg">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Guardar</button>
</div>
</div>
</div>
</div>
JS:
var marker;
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 6,
center: {lat: 40.4165000, lng: -3.7025600}
});
marker = new google.maps.Marker({
map: map,
draggable: true,
animation: google.maps.Animation.DROP,
position: {lat: 40.4165000, lng: -3.7025600}
});
marker.addListener('click', toggleBounce);
marker.addListener( 'dragend', function (event)
{
//escribimos las coordenadas de la posicion actual del marcador dentro del input #coords
document.getElementById("coordenadasEquipo").value = this.getPosition().lat()+","+ this.getPosition().lng();
});
}
// permite arrastar el marcador
function toggleBounce() {
if (marker.getAnimation() !== null) {
marker.setAnimation(null);
} else {
marker.setAnimation(google.maps.Animation.BOUNCE);
}
}
// captura el evento click sobre le marcador
function funcionClick() {
if (marker.getAnimation() != null) {
marker.setAnimation(null);
} else {
marker.setAnimation(google.maps.Animation.BOUNCE);
}
}
// cargamos el mapa en la ventana modal
$('#ModalEquipos').on('shown.bs.modal', function(){
initMap();
});
EL funcionamiento consiste en cuando haces click en el campo de formulario de Coordenadas aparece una ventana modal que contiene el mapa con un marcador que puedes mover o arrastrandolo o haciendo click en la posición y al salir de la ventana modal este guarda las coordenadas en el input de coordenadas. ¿Como puedo hacer lo del evento click?