1

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>
1
  • muy interesante. y se podría hacer una consulta a la api de maps para que me devuelva todas las coordenadas de X stablecimientos? por ejemplo quiero saber las coordenadas de todas las gasolineras Repsol de Galicia. gracias el 16 abr. 2021 a las 8:26

2 respuestas 2

2

La posición la obtienes mediante el evento de la siguente manera

event.latLng.lat(); event.latLng.lng();

para asignar el evento debes usar google.maps.event.addListener(marker, 'dragend', function(event) {..., no directamente al marcador

0

Dentro del evento, la variable this es el marker.

var map;
function initialize() {
   map = new google.maps.Map(document.getElementById('map-canvas'), {
     zoom: 3,
     center: {lat: -10, lng: -60}
   });
   
   var marker=new google.maps.Marker({
      position:map.getCenter(), 
      map:map, 
      draggable:true
   });
			
   google.maps.event.addListener(marker,'dragend',function(event) {
      document.getElementById("coords").value = this.getPosition().toString();
   });
}
google.maps.event.addDomListener(window, 'load', initialize);
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBRqo4qwqHHrtbY9aL6vYYDw1GOhkK97MQ"></script>

<div class="col-md-12 col-sm-12">
   <input type="text" style="width:400px" id="coords" />
<div>
<div class="col-md-12 col-sm-12" id="map-canvas" style="height:200px;"></div>

Revisa el plunkr que te hice

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.