Obtener coordenadas actuales para mostrarlas en Google Maps

En esta entrada vamos a ver como obtener las coordenadas actuales donde nos encontramos para posteriormente mostrarlas en Google Maps.

Para ello haremos uso de las funciones de geolocalización que tenemos disponibles en HTML5.

Por motivos de seguridad el usuario debe aceptar que se obtenga su posición para poder obtener las coordenadas.

Para obtener las coordenadas utilizaremos el metodo navigator.geolocation.getCurrentPosition() y le pasaremos como parámetro una función que a su vez revivirá un objeto con la información de la posición actual.

Veamos lo más claro con un ejemplo:

<!DOCTYPE html>
<html lang="es">
<head>
<title>Obtener Coordenadas actuales</title>
<meta charset="utf-8" />
< script type="text/javascript" src="https://maps.google.com/maps/api/js"></script>
< script>
function initMap() {
 navigator.geolocation.getCurrentPosition(function(pos) {
   // Creamos un objeto mapa y lo situamos en coordenadas actuales
  var map = new google.maps.Map(document.getElementById('mapa'),
  {
    center: {lat: pos.coords.latitude, lng: pos.coords.longitude},
    scrollwheel: false,
    zoom: 8
   }
  );
 })
}
</script>
</head>
<body onload="initMap()">
 <h1>Obtener coordenadas Actuales</h1>
 < div id="mapa" style="width: 450px; height: 350px;"> </div>
</body>
</html>

Hay que tener en cuenta que la función getCurrentPosition es asincrona, por lo tanto todo lo que queramos se se ejecute una vez obtenida la posición debemos incluirlo en la función callback que le pasamos como parámetro.

Como podemos ver la función que recibe como parámetro getCurrentPosition recibe a su vez el parámetro pos.

En pos.coords.latitude recibimos la latitud de la localización donde nos encontramos.

En pos.coords.longitude recibimos la longitud de la localización donde nos encontramos.

Además de la latitud y la longitud también podemos obtener las siguientes propiedades siempre que se encuentren disponibles:

Propiedadretorna
coords.latitudeLa latitud como un número decimal
coords.longitudeLa longitud como un número decimal
coords.accuracyLa precisión de la posición
coords.altitudeLa altitud en metros por encima del nivel medio del mar
coords.altitudeAccuracyLa precisión de altitud de la posición
coords.heading Los  grados en sentido horario desde el norte
coords.speed La velocidad en metros por segundo
timestampLa fecha / hora de la respuesta

Si queremos centrar un mapa ya creado en unas las coordenadas actuales podemos utilizar la función setCenter().

map.setCenter(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));

Índice   –   <– Capítulo Anterior   –  Capitulo Siguiente –>

Un saludo, y si aún no lo has hecho no olvides suscribirte a mi blog para no perderte los próximos posts  :-),

También puedes seguirme en Twitter en ‎@revigames y no olvides que me ayudas mucho si compartes este post en las redes sociales.

 

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.