El API de geolocalización no es parte del estándar de HTML5, sin embargo está muy relacionado ya que gracias a HTML5 es que podemos incorporar de forma más sencilla sus funcionalidades.
La geolocalización nos permite ubicar mediante coordenadas la posición aproximada del sistema o equipo desde el cual el usuario está accediendo al recurso, página o documento web donde hemos implementado el API.
Obtener la Posición Actual
Este es quizás uno de los usos más útiles que le podemos dar a esta API, ya que al permitirnos ubicar el terminal que está accediendo nuestras páginas, podemos invocar contenido regional, ofrecer tal vez publicidad de forma más efectiva o simplemente generar las estadísticas por ubicación de una forma más directa sin depender de terceros.
Para poder obtener las coordenadas de ubicación dependemos del siguiente método:
Este método obtiene la posición actual del sistema que está ingresando a la página, no está hecho para devolver directamente un resultado, sin embargo le podemos pasar otra función donde preparemos los datos con lo que podamos recibir del método.
Veamos el siguiente código de forma que entendamos parte de cómo implementar esta funcionalidad:
El funcionamiento es sencillo, al objeto navigator le decimos que debe acceder a sus propiedades de geolocalización, iniciando con el método getCurrentPosition(), a este le pasamos como argumento una función que es la que establece las diferentes opciones que debe inicializar y tomar sus valores.
Permisos para Geolocalizar
Debido a que esto puede ser un poco invasivo con la privacidad de los usuarios, al momento de invocar los diferentes métodos de geolocalización es posible que el navegador le pida el permiso al usuario para transmitir su posición, por eso tal vez no obtengamos todos los datos al momento con esta API.
Dependiendo del dispositivo, el API puede valerse de diferentes recursos para obtener la posición, puede utilizar los GPS incorporados, las redes WI-FI, en última instancia puede utilizar la dirección IP y gracias a ella establecer la relación de nuestro proveedor de servicio y dar un aproximado de la ubicación del usuario.
Ejemplo Aplicado
Veamos el código en el HTML para poder utilizar el método que describimos anteriormente:
Ahora vemos como el navegador solicita nuestra autorización para dar los datos de nuestra ubicación:
Al compartir los datos podremos obtener los resultados del uso de la API.
Como vemos obtenemos unos datos bastante útiles para localizar la ubicación del equipo que accede al recurso. Aquí podéis continuar leyendo la Geolocalización Avanzada de HTML5
La geolocalización nos permite ubicar mediante coordenadas la posición aproximada del sistema o equipo desde el cual el usuario está accediendo al recurso, página o documento web donde hemos implementado el API.
Obtener la Posición Actual
Este es quizás uno de los usos más útiles que le podemos dar a esta API, ya que al permitirnos ubicar el terminal que está accediendo nuestras páginas, podemos invocar contenido regional, ofrecer tal vez publicidad de forma más efectiva o simplemente generar las estadísticas por ubicación de una forma más directa sin depender de terceros.
Para poder obtener las coordenadas de ubicación dependemos del siguiente método:
getCurrentPosition(callback, errorCallback, options)
Este método obtiene la posición actual del sistema que está ingresando a la página, no está hecho para devolver directamente un resultado, sin embargo le podemos pasar otra función donde preparemos los datos con lo que podamos recibir del método.
Veamos el siguiente código de forma que entendamos parte de cómo implementar esta funcionalidad:
<script>
navigator.geolocation.getCurrentPosition(displayPosition);
function displayPosition(pos) {
var properties = ["longitude", "latitude", "altitude", "accuracy",
"altitudeAccuracy", "heading", "speed"];
for (var i = 0; i < properties.length; i++) {
var value = pos.coords[properties[i]];
document.getElementById(properties[i]).innerHTML = value;
}
document.getElementById("timestamp").innerHTML = pos.timestamp;
}
</script>
El funcionamiento es sencillo, al objeto navigator le decimos que debe acceder a sus propiedades de geolocalización, iniciando con el método getCurrentPosition(), a este le pasamos como argumento una función que es la que establece las diferentes opciones que debe inicializar y tomar sus valores.
Permisos para Geolocalizar
Debido a que esto puede ser un poco invasivo con la privacidad de los usuarios, al momento de invocar los diferentes métodos de geolocalización es posible que el navegador le pida el permiso al usuario para transmitir su posición, por eso tal vez no obtengamos todos los datos al momento con esta API.
Dependiendo del dispositivo, el API puede valerse de diferentes recursos para obtener la posición, puede utilizar los GPS incorporados, las redes WI-FI, en última instancia puede utilizar la dirección IP y gracias a ella establecer la relación de nuestro proveedor de servicio y dar un aproximado de la ubicación del usuario.
Ejemplo Aplicado
Veamos el código en el HTML para poder utilizar el método que describimos anteriormente:
<!DOCTYPE HTML>
<html>
<head>
<title>Ejemplo</title>
<style>
table {border-collapse: collapse;}
th, td {padding: 4px;}
th {text-align: right;}
</style>
</head>
<body>
<table border="1">
<tr>
<th>Longitud:</th><td id="longitude">-</td>
<th>Latitud:</th><td id="latitude">-</td>
</tr>
<tr>
<th>Altitud:</th><td id="altitude">-</td>
<th>Precisión:</th><td id="accuracy">-</td>
</tr>
<tr>
<th>Precisión de Altitud:</th><td id="altitudeAccuracy">-</td>
<th>Heading:</th><td id="heading">-</td>
</tr>
<tr>
<th>VElocidad:</th><td id="speed">-</td>
<th>Hora:</th><td id="timestamp">-</td>
</tr>
</table>
<script>
navigator.geolocation.getCurrentPosition(displayPosition);
function displayPosition(pos) {
var properties = ["longitude", "latitude", "altitude", "accuracy",
"altitudeAccuracy", "heading", "speed"];
for (var i = 0; i < properties.length; i++) {
var value = pos.coords[properties[i]];
document.getElementById(properties[i]).innerHTML = value;
}
document.getElementById("timestamp").innerHTML = pos.timestamp;
}
</script>
</body>
</html>Ahora vemos como el navegador solicita nuestra autorización para dar los datos de nuestra ubicación:
Al compartir los datos podremos obtener los resultados del uso de la API.
Como vemos obtenemos unos datos bastante útiles para localizar la ubicación del equipo que accede al recurso. Aquí podéis continuar leyendo la Geolocalización Avanzada de HTML5
