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.
Hola, 驴como quedar铆a finalmente si quisiera a帽adir una marca para se帽alar el lugar en el mapa?