Buscar
Cerrar este cuadro de búsqueda.

Utilizando el Geolocation API de HTML5

Facebook
Twitter
LinkedIn

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:

  1. El navegador solicita permiso al usuario para obtener su posición geográfica
  2. Si el usuario da el permiso, el navegador retorna la información de su posición actual
  3. 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

Te podría interesar
Tips

Repositorios Online

El desarrollo de un proyecto de forma colaborativa requiere la implementación de ciertas herramientas que ayuden al equipo a llevar a cabo las tareas de formas más eficiente, como por ejemplo, un repositorio de código fuente.

Leer Más >>