Move google maps API mark by clicking

Navigation
0

I want to create a form where you can add the location of certain events by means of a map of google maps in a comfortable way but I can not move the location of the marker by clicking, I only get it by dragging it. My code:

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();
});

The operation consists of when you click on the field of Coordinates form a modal window appears that contains the map with a marker that you can move or drag or click on the position and when leaving the modal window it saves the coordinates in the coordinate input. How can I do the click event?

    
asked by Korzan 28.04.2017 в 16:54
source

2 answers

1

use this code, you have to make a listener to the map, and when you click on somewhere on the map creates the marker

the variable map is the instance you have in the start function ... 

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

That's the base, finish putting your tastes ... comment anything, I'm attentive.

here is a nice example link

    
answered by 28.04.2017 / 19:32
source
0

Notice that you are giving a click listener to the marker, and as I understand it; what you are clicking to position the marker on the map, is the map itself, so the click event should be from the map and not from the marker if this is so.

    
answered by 28.04.2017 в 17:03
Remove styles by clicking on the X- (Remove this style estilSelectCateg) problem when going from one fragmet to another [closed]