Cómo geolocalizar en HTML5

El API de geolocalización de HTML 5 ayuda a identificar la ubicación de los usuarios, información que puede ser utilizada para mostrar información personalizada dependiendo del sitio donde nos encontremos.

Hay varias técnicas utilizadas para conseguir esta información. Por ejemplo, un equipo de escritorio utiliza información basa en su conexión WIFI o su dirección IP, mientras que un navegador móvil puede utilizar técnicas de triangulación GPS, A-GPS, posicionamiento WIFI, …

Esta API puede ofrecernos información muy valiosa, por este motivo, siempre está en la mano del usuario permitir que el navegador detecte su ubicación. Antes de proporcionar esta información, mediante un cuadro de diálogo se solicitará permiso para obtener los datos de localización.

Lo primero que debemos hacer para utilizar el API de HTML5 es comprobar la compatibilidad con el navegador. Para ver si es compatible, debemos comprobar si nuestro navegador permite trabajar con la propiedad “geolocation”.

if (navigator.geolocation) {

    // Get the user's current position

} else {

    alert('Geolocation is not supported in your browser');

}

Obtener la ubicación actual del usuario

La localización actual de un usuario puede ser obtenida utilizando la función “getCurrentPosition” del objeto “navigator.geolocation”. Esta función acepta tres parámetros:

- Función callback de éxito.
- Función callback de error.
- Opciones de posición.

A continuación podéis ver un ejemplo.

if (navigator.geolocation) {               

// Get the user's current position

navigator.geolocation.getCurrentPosition(showPosition, showError, optn);

} else {

    alert('Geolocation is not supported in your browser');

}

1.- Función callback de éxito

Esta función sólo es llamada cuando el usuario da su consentimiento para compartir su localización y los datos son obtenidos satisfactoriamente. Los datos de localización estarán disponibles como un objeto “position” y la función será llamada con este objeto como su parámetro de entrada. Este objeto contiene la propiedad “timestamp” que contiene la fecha cuando fue solicitada la información y un objeto “coords”.

El objeto “coords” contiene las siguientes propiedades.

- Latitude, longitude. Coordenadas geográficas en grados decimales.
- Accuracy. Nivel de precisión de las coordenadas. Cuando mayor sea el número menor será la precisión.
- Altitude. Altura de la posición sobre el nivel del mar.
- AltitudeAccuracy. Indica la precisión de la altura. Cuando mayor sea este valor, menor será su precisión.
- Heading. Da información sobre el rumbo de 360 grados.
- Speed. Indica la velocidad relativa en metros por segundo.

function showPosition(position) {

document.write('Latitude: '+position.coords.latitude+'Longitude: '+position.coords.longitude);

}

2.- Función callback de error

Se trata de un método callback opcional que coge como parámetro un objeto de error. Esta función es invocada cuando se da algunas de las siguientes circunstancias.

- Cuando ocurre un error desconocido.
- Time out en la respuesta.
- El usuario ha prohibido compartir su ubicación.
- No está disponible la información.

Un ejemplo de llamada a esta función sería el siguiente.

function showError(error) {

    switch(error.code) {

        case error.PERMISSION_DENIED:

            alert("User denied the request for Geolocation.");

            break;

        case error.POSITION_UNAVAILABLE:

            alert("Location information is unavailable.");

            break;

        case error.TIMEOUT:

            alert("The request to get user location timed out.");

            break;

        case error.UNKNOWN_ERROR:

            alert("An unknown error occurred.");

            break;

    }

}

3.- Opciones de posición

Nos permite indicar las opciones mientras recuperamos la localización del usuario.

- enableHighAccuracy: Boolean. Si el valor es true, intentara conseguir la mayor precisión en la obtención de la información. Esto puede llevar consigo una lenta respuesta y un alto consumo de potencia. El valor por defecto es false.
- Timeout: Se trata de un valor numérico con el que indicara el tiempo en milisegundos que tiene que esperar para conseguir la información. Su valor por defecto es infinito.
- maximumAge: Se trata de un valor numérico positivo que indica el tiempo en milisegundos que el agente puede utilizar la información que tiene en cache antes de intentar conseguir de nuevo la información. Un valor de cero indica que el agente no debe utilizar la cache.

Un ejemplo de uso sería el siguiente.

if (navigator.geolocation) {

var optn = {

            enableHighAccuracy : true,

            timeout : Infinity,

            maximumAge : 0

        };

                     navigator.geolocation.getCurrentPosition(showPosition, showError, optn);

} else {

        alert('Geolocation is not supported in your browser');

}

Rastrear cambios de ubicación

Para conseguir información de localización en intervalos regulares podemos utilizar el método “watchPosition()”. La llamada al callback de éxito se hace automáticamente cada vez que el dispositivo o el agente cambia de posición. Los parámetros de esta función son similares a los vistos en el método “getCurrentPosition()”. Devuelve un valor “watch ID” que puede ser utilizado para parar el proceso de emisión de los datos de localización por medio del método “clearWatch”. Un ejemplo de uso puede ser el siguiente.

function startWatch(){

if (navigator.geolocation) {

    var optn = {

        enableHighAccuracy : true,

        timeout : Infinity,

        maximumAge : 0

    };

    watchId = navigator.geolocation.watchPosition(showPosition, showError, optn);

} else {

    alert('Geolocation is not supported in your browser');

}

}

function stopWatch() {

    if (watchId) {

        navigator.geolocation.clearWatch(watchId);

        watchId = null;

    }

}

Mostrar mi ubicación en Google Maps

Si queremos ubicar nuestra localización en un mapa de Google, podemos hacer uso del API de Google Maps con el API de Geolocalización. Veamos los pasos a seguir para hacerlo.

Lo primero de todo es convertir las coordenadas de latitud y longitud del objeto position utilizando para ello el objeto “LatLng” que nos ofrece el API de Google Maps.

var googlePos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

Lo siguiente será crear un objeto Map donde representaremos nuestra ubicación. Para ello crearemos un mapa con las opciones que queramos y lo ubicaremos dentro del “div” que hemos puesto para ello.

var mapOptions = {

                zoom : 12,

                center : googlePos,

                mapTypeId : google.maps.MapTypeId.ROADMAP

                    };

    var mapObj = document.getElementById('mapTxt');

    var googleMap = new google.maps.Map(mapObj, mapOptions);

Hecho esto, lo siguiente es crear una marca que señale nuestra ubicación. A esta marca le tendremos que indicar nuestra posición que hemos obtenido en un paso anterior, así como el mapa donde queremos que se muestre.

var markerOpt = {

        map : googleMap,

        position : googlePos,

        title : 'Hola , estoy aquí',

        animation : google.maps.Animation.DROP

        };

    var googleMarker = new google.maps.Marker(markerOpt);

Por último encontramos la dirección de nuestra ubicación utilizando el API de Geolocalización inversa y mostramos la dirección obtenida cuando pulsemos en la marca.

var geocoder = new google.maps.Geocoder();

  geocoder.geocode({

    'latLng' : googlePos

}, function(results, status) {

  if (status == google.maps.GeocoderStatus.OK) {

    if (results[1]) {

      var popOpts = {

        content : results[1].formatted_address,

        position : googlePos

     };

     var popup = new google.maps.InfoWindow(popOpts);

        google.maps.event.addListener(googleMarker, 'click', function() {

        popup.open(googleMap);

  });

} else {

alert('Resultados no encontrados');

}

} else {

alert('Falló la localización debido a: ' + status);

}

});

Utilizando todo lo que hemos visto a lo largo de este artículo, ya podremos crear nuestras aplicaciones donde se haga uso de esta técnica.

COMPARTE ESTE ARTÍCULO

COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN LINKEDIN
COMPARTIR EN WHATSAPP