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:

Propiedad retorna
coords.latitude La latitud como un n煤mero decimal
coords.longitude La longitud como un n煤mero decimal
coords.accuracy La precisi贸n de la posici贸n
coords.altitude La altitud en metros por encima del nivel medio del mar
coords.altitudeAccuracy La 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
timestamp La 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.

Un comentario en “Obtener coordenadas actuales para mostrarlas en Google Maps

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.