Obtener coordenadas un marcador google maps

HTML5Javascript

En este video tutorial te mostraré como obtener las coordenadas de la posición de un marcador de Google Maps después de haberlo arrastrado, usaremos la Geolocalización de HTML 5, y también explicaré como incrustar un mapa en nuestro sitio web usando la API de Google Maps, debajo del video encontrarás el código comentado del ejemplo para que pruebes su funcionamiento.

Espero que sea de tu ayuda, cualquier duda o aclaración comenta en este post y no olvides suscribirte a mi canal y seguirme en mis redes sociales.

Código

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Obtener coordenadas de un marcador </title>
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        width: 100%;
        height: 80%;
      }
      #coords{width: 500px;}
    </style>
  </head>
  <body >
    <div id="map"></div>

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


var marker;          //variable del marcador
var coords = {};    //coordenadas obtenidas con la geolocalización

//Funcion principal
initMap = function () 
{

    //usamos la API para geolocalizar el usuario
        navigator.geolocation.getCurrentPosition(
          function (position){
            coords =  {
              lng: position.coords.longitude,
              lat: position.coords.latitude
            };
            setMapa(coords);  //pasamos las coordenadas al metodo para crear el mapa
            
           
          },function(error){console.log(error);});
    
}



function setMapa (coords)
{   
      //Se crea una nueva instancia del objeto mapa
      var map = new google.maps.Map(document.getElementById('map'),
      {
        zoom: 13,
        center:new google.maps.LatLng(coords.lat,coords.lng),

      });

      //Creamos el marcador en el mapa con sus propiedades
      //para nuestro obetivo tenemos que poner el atributo draggable en true
      //position pondremos las mismas coordenas que obtuvimos en la geolocalización
      marker = new google.maps.Marker({
        map: map,
        draggable: true,
        animation: google.maps.Animation.DROP,
        position: new google.maps.LatLng(coords.lat,coords.lng),

      });
      //agregamos un evento al marcador junto con la funcion callback al igual que el evento dragend que indica 
      //cuando el usuario a soltado el marcador
      marker.addListener('click', toggleBounce);
      
      marker.addListener( 'dragend', function (event)
      {
        //escribimos las coordenadas de la posicion actual del marcador dentro del input #coords
        document.getElementById("coords").value = this.getPosition().lat()+","+ this.getPosition().lng();
      });
}

//callback al hacer clic en el marcador lo que hace es quitar y poner la animacion BOUNCE
function toggleBounce() {
  if (marker.getAnimation() !== null) {
    marker.setAnimation(null);
  } else {
    marker.setAnimation(google.maps.Animation.BOUNCE);
  }
}

// Carga de la libreria de google maps 

    </script>
    <script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>
  </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Obtener coordenadas de un marcador </title>

<style>

html, body {

height: 100%;

margin: 0;

padding: 0;

}

#map {

width: 100%;

height: 80%;

}

#coords{width: 500px;}

</style>

</head>

<body >

var marker; //variable del marcador

var coords = {}; //coordenadas obtenidas con la geolocalización

//Funcion principal

initMap = function ()

{

//usamos la API para geolocalizar el usuario

navigator.geolocation.getCurrentPosition(

function (position){

coords = {

lng: position.coords.longitude,

lat: position.coords.latitude

};

setMapa(coords); //pasamos las coordenadas al metodo para crear el mapa

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

}

function setMapa (coords)

{

//Se crea una nueva instancia del objeto mapa

var map = new google.maps.Map(document.getElementById('map'),

{

zoom: 13,

center:new google.maps.LatLng(coords.lat,coords.lng),

});

//Creamos el marcador en el mapa con sus propiedades

//para nuestro obetivo tenemos que poner el atributo draggable en true

//position pondremos las mismas coordenas que obtuvimos en la geolocalización

marker = new google.maps.Marker({

map: map,

draggable: true,

animation: google.maps.Animation.DROP,

position: new google.maps.LatLng(coords.lat,coords.lng),

});

//agregamos un evento al marcador junto con la funcion callback al igual que el evento dragend que indica

//cuando el usuario a soltado el marcador

marker.addListener('click', toggleBounce);

marker.addListener( 'dragend', function (event)

{

//escribimos las coordenadas de la posicion actual del marcador dentro del input #coords

document.getElementById("coords").value = this.getPosition().lat()+","+ this.getPosition().lng();

});

}

//callback al hacer clic en el marcador lo que hace es quitar y poner la animacion BOUNCE

function toggleBounce() {

if (marker.getAnimation() !== null) {

marker.setAnimation(null);

} else {

marker.setAnimation(google.maps.Animation.BOUNCE);

}

// Carga de la libreria de google maps

</script>

</body>

</html>

Comentarios Facebook

Perfecto el video-tutorial Roger, me has salvado la vida… esperamos mas contenido como este.. Gracicas

Es excelente la aplicación. Ahora si quiero que esas coordenadas sean grabadas o pasadas a una variables de ambientes y pasarlas a otra página? Soy nuevo en esto y estoy aprendiendo desde CERO.
Me pareció excelente idea para agregarla a un botón y obtener coordenadas y sean grabadas o pasada a variables y grabadas para saber la localización donde viven los usuarios en alguna aplicación.

Gracias por la contribución y en espera de sus comentarios,

Cómo puedo pasar esas coordenadas a php?

Rodrigo Gómez

Web developer