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

Como ¿Cómo obtener las coordenadas de la apiAPI de google mapsGoogle 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.

AquiAquí 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>

Como 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.

Aqui 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>

¿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>
se añadieron 212 caracteres en el cuerpo
Origen Enlace
ffflabs
  • 23k
  • 28
  • 50
    <div id="map"></div>

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

var marker; var coords = {};

initMap = function () {



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) {


}



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>

}

function toggleBounce() { if (marker.getAnimation() !== null) { marker.setAnimation(null); } else { marker.setAnimation(google.maps.Animation.BOUNCE); } }

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

<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>
Origen Enlace

Como 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.

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