Skip to main content
3 de 3
cuerpo editado; título editado
A. Cedano
  • 95.2k
  • 31
  • 145
  • 257

¿Cómo obtener las coordenadas de la API de Google Maps cuando el usuario arrastre el Marker?

En mi pagina web quiero implementar el api de google maps, y que el usuario arrastre el marcador(Marker) en la ubicacion donde vive y luego mostrar la latitud y longitud en un input para posterior guardarlo en una base de datos.

Aquí como lo hice pero no me funciona:

<div id="map"></div>

<input type="text" id="coords" />
<script>


var marker;
var coords = {};

initMap = function ()
{

        navigator.geolocation.getCurrentPosition(
          function (position){
            coords =  {
              lng: position.coords.longitude,
              lat: position.coords.latitude
            };
            setMapa(coords);


          },function(error){console.log(error);});

}



function setMapa (coords)
{

      var map = new google.maps.Map(document.getElementById('map'),
      {
        zoom: 13,
        center:new google.maps.LatLng(coords.lat,coords.lng),

      });

      marker = new google.maps.Marker({
        map: map,
        draggable: true,
        animation: google.maps.Animation.DROP,
        position: new google.maps.LatLng(coords.lat,coords.lng),

      });

      marker.addListener('click', toggleBounce);

      marker.addListener( 'dragend', function (event)
      {
        document.getElementById("coords").value = this.getPosition().lat()+","+ this.getPosition().lng();
      });
}

function toggleBounce() {
  if (marker.getAnimation() !== null) {
    marker.setAnimation(null);
  } else {
    marker.setAnimation(google.maps.Animation.BOUNCE);
  }
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD1tGk92O2ExGvtxy6rIZkwC7xtuyzHymg&callback=initMap" type="text/javascript"></script>