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

Valoraciones


1 valoración

  • Aguila 5 febrero, 2019

    Gracias, muy buen articulo!!

Tu valoración


* Tu valoración puede tardar hasta 72 horas en publicarse.

He leido y acepto el Aviso legal y condiciones de uso

Utilizamos cookies propias y de terceros para personalizar el contenido y los anuncios, ofrecer funciones de medios sociales y analizar el tráfico. Además compartimos información sobre el uso que haces de nuestra web con nuestros partners de medios sociales, de publicidad y de análisis web. Si continúas navegando estás dando tu consentimiento para la aceptación de nuestra Política de cookies.

ACEPTAR
Aviso de cookies