0

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">&times;</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?

2 respuestas 2

1

usa este código, tienes que hacerle un listener al mapa, y cuando se le de click en algún lugar del mapa crea el marcador

la variable map es la instancia que tienes en la funcion inicio...

google.maps.event.addListener( map, "click", function(ele) {
    // codigo que crea el marcador
    new google.maps.Marker({
        map: map
    })
});

Esa es la base, termina de poner tus gustos... comenta cualquier cosa, estoy atento.

aquí te dejo un ejemplo bonito https://jsfiddle.net/imfranq/uxm84edz/

2
  • Lo he probado y funciona genial, en el ejemplo creas una nueva marca, yo lo que quiero es mover la que ya tengo así que modifiqué el código así: google.maps.event.addListener( map, "click", function(ele) { // codigo que mueve el marcador marker.position = ele.latLng; }); el problema ahora lo tengo en que como estoy cargando el mapa dentro de una ventana modal necesito añadir: // cargamos el mapa en la ventana modal $('#ModalEquipos').on('shown.bs.modal', function(){ initMap(); }); la recarga impide que funcione como quiero
    – Korzan
    Commented el 28 abr. 2017 a las 17:56
  • me pasaba, es posible que el mapa se este instanciando varias veces y eso daña el mapa, asegúrate que no estés instanciando el mapa varias veces.. has una banderita con un if Commented el 28 abr. 2017 a las 19:24
0

Fijate que estás dándole un click listener al marker, y según entiendo; lo que estás clickeando para posicionar el marcador en el mapa, es el mapa mismo, por lo que el evento click debería ser del mapa y no del marker si ésto es así.

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.