Con el soporte de las nuevas características de HTML5 a dado pie a la revolución de lo que hoy conocemos como paginas WEB.
HTML5 incorpora nuevos elementos como lo son: soporte nativo de audio/vídeo, dibujo mediante el uso de canvas, nuevos elementos en los formularios, poder detectar la posición geográfica de una persona mediante el uso del Geolocation API, el cual es el motivo de este post.
La forma en que funciona se puede expresar de la siguiente manera:
- El navegador solicita permiso al usuario para obtener su posición geográfica
- Si el usuario da el permiso, el navegador retorna la información de su posición actual
- En caso tal que el usuario no acceda o si ocurre algún error, el Geolocation API nos permite manejar los errores generados por el mismo
Detectando el soporte del Geolocation API
Lo primero que hay que hacer es detectar si el navegador actual tiene soporte para el Geolocation API, el siguiente extracto de código nos muestra como hacerlo
if(navigator.geolocation)
{
//Browser support geolocation API
}
else
{
//Browser does not support geolocation API
}Manejando la respuesta del Geolocation API
Si el navegador soporta el Geolocation, lo siguiente por hacer es manipular la respuesta obtenida por parte del navegador, para esto vamos a crear dos funciones, handlePosition la cual se ejecuta si todo esta bien y handlePositionError para manejar cualquier posible error.
if(navigator.geolocation)
{
//Browser support geolocation API
navigator.geolocation.getCurrentPosition(handleLocation,handleLocationError);
}
else
{
//Browser does not support geolocation API
}
function handleLocation(position)
{
//shows user current location
}
function handleLocationError(error)
{
//show error message
}Procesando las respuestas
Si todo marcha bien, procedemos a obtener la posición actual del usuario, en caso contrario, manejamos el error
function handleLocation(position)
{
//shows user current location
var latitude = position.coords.latitude;
var longitude = position.coords.longitude
}
function handleLocationError(error)
{
//Geolocation error codes
var UNKNOWN_ERROR = 0;
var PERMISSION_DENIED = 1;
var POSITION_UNAVAILABLE = 2;
var TIMEOUT = 3;
var errMsg = '';
//show error message
switch(error.code)
{
case UNKNOWN_ERROR:
errMsg = "Unexpected error ocurred";
break;
case PERMISSION_DENIED:
errMsg = "User doesn't allow to get current location";
break;
case POSITION_UNAVAILABLE:
errMsg = "Current position not available";
break;
case TIMEOUT:
errMsg = "Timeout error";
break;
default:
errMsg = "Unexpected error ocurred";
break;
}
}Ejemplo completo
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>HTML5 Geolocation Demo</title>
<script type="text/javascript">
function init()
{
if(navigator.geolocation)
{
//Browser support geolocation API
document.getElementById('geoSupport').innerHTML = 'YES';
navigator.geolocation.getCurrentPosition(handleLocation,handleLocationError);
}
else
{
//Browser does not support geolocation
document.getElementById('geoSupport').innerHTML = 'NO';
}
}
function handleLocation(position)
{
//shows user current location
var latitude = position.coords.latitude;
var longitude = position.coords.longitude
document.getElementById('geoLat').innerHTML = latitude;
document.getElementById('geoLon').innerHTML = longitude;
}
function handleLocationError(error)
{
//Geolocation error codes
var UNKNOWN_ERROR = 0;
var PERMISSION_DENIED = 1;
var POSITION_UNAVAILABLE = 2;
var TIMEOUT = 3;
var errMsg = '';
//show error message
switch(error.code)
{
case UNKNOWN_ERROR:
errMsg = "Unexpected error ocurred";
break;
case PERMISSION_DENIED:
errMsg = "User doesn't allow to get current location";
break;
case POSITION_UNAVAILABLE:
errMsg = "Current position not available";
break;
case TIMEOUT:
errMsg = "Timeout error";
break;
default:
errMsg = "Unexpected error ocurred";
break;
}
document.getElementById('geoError').innerHTML = errMsg;
}
</script>
</head>
<body onload="init();">
<h2>Geolocation API Demo</h2>
<div><strong>Geolocation Support:</strong> <span id="geoSupport">NO</span></div>
<div><strong>Latitude:</strong> <span id="geoLat">0</span></div>
<div><strong>Longitude:</strong> <span id="geoLon">0</span></div>
<div><strong>Error:</strong> <span id="geoError">None</span></div>
</body>
</html>
Espero este post les haya servido de ayuda, no olvides en dejar tu comentario
