La API de geolocalización es una de las nuevas tecnologias que nos trae HTML5, esta API se utiliza para obtener la posición geográfica de un usuario cuando accede a un sitio web siempre y cuando el usuario lo apruebe y esté navegando con un navegador que soporte esta tecnologia.
Esta API utiliza varios medios para calcular la posición geográfica del usuario como el GPS, la dirección IP y otras señales de red, con las que obtenemos entre otros datos la latitud y la longitud del lugar desde el que se está navegando.
La mayoria de navegadores modernos soportan esta tecnologia, nternet ExplorerI le da soporte a partir de la versión 9, Safari y Chrome a partir de la versión 5, Firefox a partir de la 3.5 y la mayoria de navegadores para Android o iPhone la soportan, por lo que a fecha de hoy, no hay ningun motivo para no usar esta API.
En este articulo vamos a trabajar mas con Javascript que con HTML5, pero como es una tecnologia que incorpora HTML5 he pensado que esta es la sección indicada para ubicarlo, vamos a comenzar a ver como funciona esta API.
En un documento HTML5 insertamos cualquier elemento al que le ponemos un identificador, este será el encargado de mostrar los datos.
<p id="coordenadas_usuario"></p>A continuación creamos un botón, al cual le ponemos un evento onclick al que le pasamos el nombre de la función a la que vamos a llamar
<button onclick="obtenerLocalizacion()">Obtener coordenadas</button>Ahora creamos el script, lo primero que hacemos es crear una variable a la que le asignaremos el valor del elemento que habiamos creado anteriormente por su identificador.
var mostrar_coordenadas = document.getElementById("coordenadas_usuario");A continuación creamos la función, el nombre de la función debe de ser el mismo que el nombre del evento onclick que creamos anteriormente en el botón, dentro de la función, creamos una estructura if para comprobar que existe el objeto “navigator.geolocation”, si es asi, le asignamos al objeto el método “getCurrentPosition()” con un parámetro, el cual nos devolverá las coordenadas de latitud y longitud del usuario, si la comprobación es incorrecta mostramos algo con un else.
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(mostrarPosicion);
} else {
mostrar_coordenadas.innerHTML = "Tu navegador no soporta esta tecnologia";
}Cerramos la función y creamos otra con el nombre del parámetro que hemos asignado a “getCurrentPosition()”, este a su vez contendrá otro parámetro que nos devolverá los valores de las coordenadas de latitud y longitud de la ubicación del usuario
function mostrarPosicion(posicion_usuario) {
mostrar_coordenadas.innerHTML = "Latitud: " + posicion_usuario.coords.latitude +
"<br>Longitud: " + posicion_usuario.coords.longitude;
}Privacidad
Según la documentación oficial del W3C, “Los agentes de usuario no deben enviar información de ubicación a los sitios web sin el consentimiento expreso del usuario”, por lo cual, los navegadores que aceptan esta tecnologia, pedirá permiso al usuario para realizar el procedimiento.
El código completo
<p>
<button onclick="obtenerLocalizacion()">Obtener coordenadas</button>
<p id="coordenadas_usuario"></p>
<script>
var mostrar_coordenadas = document.getElementById("coordenadas_usuario");
function obtenerLocalizacion() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(mostrarPosicion);
} else {
mostrar_coordenadas.innerHTML = "Tu navegador no soporta esta tecnologia";
}
}
function mostrarPosicion(posicion_usuario) {
mostrar_coordenadas.innerHTML = "Latitud: " + posicion_usuario.coords.latitude +
"<br>Longitud: " + posicion_usuario.coords.longitude;
}
</script>
<p>Acepta la solicitud para ver tu ubicación</p>
<cite>Los datos no serán guardados para recopilar ninguna información</cite>
</p>Errores de disponibilidad y permisos
¿Que pasa si el usuario rechaza los permisos?¿Y si no es posible mostrar los datos?
Para cualquier situación de error que se pueda generar, la API de geolocalización dispone de sus propios códigos de error, en función del error devuelto podemos generar una función que nos devuelva un resultado para cada caso, como hablamos de casos, que mejor que utilizar una sentencia “switch”. Importante!, debemos llamar a la función desde “getCurrentPosition()”.
getCurrentPosition(mostrarPosicion,mostrarError)
function mostrarError(error) {
switch(error.code) {
case error.PERMISSION_DENIED:
mostrar_coordenadas.innerHTML = "User denied the request for Geolocation."
break;
case error.POSITION_UNAVAILABLE:
mostrar_coordenadas.innerHTML = "Location information is unavailable."
break;
case error.TIMEOUT:
mostrar_coordenadas.innerHTML = "The request to get user location timed out."
break;
case error.UNKNOWN_ERROR:
mostrar_coordenadas.innerHTML = "An unknown error occurred."
break;
}
}Ya hemos visto el funcionamiento de esta API, pero podemos obtener muchos más datos de la posición geográfica de un usuario si están disponibles, como la altitud, la velocidad en metros por segundo o el tiempo de respuesta mediante el método “getCurrentPosition()”.
coords.latitude
Devuelve la latitud (en decimales) de la ubicación
coords.longitude
Devuelve la longitud (en decimales) de la ubicación
coords.accuracy
Devuelve la precisión (en metros) de la ubicación
coords.altitude
Devuelve la altitud (en metros) de la ubicación
coords.altitudeAccuracy
Devuelve la precisión de la altitud (en metros) de la ubicación
coords.heading
Devuelve los grados desde la posición norte de la tierra de la ubicación
coords.speed
Devuelve la velocidad de la ubicación (en metros por segundo)
timestamp
Devuelve momento del tiempo de respuesta desde la ubicación
watchPosition()
Al igual que con el método “getCurrentPosition()” obtenemos la posición geográfica del usuario, con el método “watchPosition()” obtenemos la posición cada vez que esta cambia, este método requiere que el dispositivo disponga de GPS, la sintaxis del ejemplo anterior es completamente funcional, solo tenemos que cambiar el método.
Google Maps
Para mostrar el resultado en un mapa, necesitamos tener acceso a un servicio de mapas que pueda utilizar la latitud y longitud, como Google Maps.
El proceso es muy sencillo, para ello vamos a utilizar el ejemplo anterior en el que declararemos dos variables nuevas, que serán, la latitud y longitud que nos devuelva la ubicación, y una tercera variable que hará referencia por su identificador a un elemento nuevo, el cual tambien tenemos que crear.
El elemento
<p><img id="mapa" src=""></p>Dentro de la función mostrarPosicion()
var lat = posicion_usuario.coords.latitude;
var lon = posicion_usuario.coords.longitude;
var map = document.getElementById("mapa");
map.src = "http://maps.google.com/maps/api/staticmap?center=" + lat + "," + lon + "&zoom=15&size=400x400&markers=color:green|label:A|" + lat + "," + lon + "&sensor=false";Además, con un poquito mas de código podemos obtener un mapa de Google Maps con sus funciones habituales para ampliar, reducir y arrastrar el mapa.
Puedes ver y descargar el código de este archivo en mi cuenta de GitHub
Puedes encontrar mas información en los siguientes enlaces
API Google Maps ®
W3C
Aguila 5 febrero, 2019
Gracias, muy buen articulo!!