Como acceder a la geolocalización desde Javascript

Introducción.

La geolocalización es la posibilidad de conocer cual es la ubicación física de un dispositivo.  Esta ubicación es geográfica, es decir, se define especialmente mediante sus correspondientes valores de latitud y longitud.

Los dispositivos pueden obtener esta información desde diferentes fuentes, las cuales estarán relacionadas a su vez con precisión de estos datos.  Los orígenes mas comúnes para la información de geolocalización de un dispositivo son los siguientes.

  1. Utilizando un GPS (Global Positioning System).
  2. Mediante su identificación en celdas GSM/CDMA.
  3. Mediante su dirección IP.
  4. Mediante la dirección MAC de WiFi y Bluetooth.
  5. Especificado por el usuario manualmente.

Estos métodos se encuentran disponibles para las aplicaciones nativas que pueden acceder libremente al hardware del dispositivo, sin embargo ahora también es posible acceder a esta información desde una aplicación web utilizando Javascript gracias a la integración del API de geolocalización de la W3C en los navegadores mas recientes (incluyendo los móviles).

  • Firefox (3.5+)
  • Chrome (5.0+)
  • Internet Explorer (9.0+)
  • Safari (5.0+)
  • Opera (10.6+)
  • iPhone (3.1+)
  • Android (2.0+)
  • BlackBerry (6+)

Para dar soporte a navegadores antíguos se requiere que se utilice una capa adicional como Google Gears que supla la falencia de esta tecnología.

En este artículo se explicará el API necesario para acceder al API de geolocalización mediante el uso del lenguaje Javascript utilizando un navegador moderno como los mencionados.

Verificar el soporte

El primer paso debe ser siempre verificar si el navegador web en el cual se despliega la aplicación tiene o no el soporte para esta tecnología, a partir de este resultado se deberá decidir que hacer.

if(navigator.geolocation)
{
    // Se cuenta con el soporte para geolocalización, entonces ...
}
else
{
    // No se cuenta con soporte para geolocalización, manejar la situación.
}

Solicitar la ubicación al navegador.

El siguiente paso consiste directamente en solicitarle al navegador web cual es la ubicación del dispositivo.  El llamado a esta función es asíncrono, es decir, no retorna inmediatamente un valor sino que invoca a una función específica (callback) cuando este se obtiene.  Así mismo, como el conocer la ubicación de un dispositivo (y por ende su usuario) tiene implicaciones en la privacidad de las personas, la especificación dispone que el usuario esté siempre facultado para aceptar o negar el acceso a esta información.  Por este motivo los navegadores desplegarán barras como la mostrada a continuación solicitando la confirmación final.

Permitir el acceso a la información de geolocalización en Chrome
Permitir el acceso a la información de geolocalización en Chrome

A continuación se muestra la invocación general de la función para obtener la geolocalización del dispositivo.

navigator.geolocation.getCurrentPosition(onSuccessGeolocating,
                                         onErrorGeolocating,
                                         options);

Los dos primeros parámetros corresponden a funciones Javascript que se ejecutarán según se tenga éxito o no durante el proceso de geolocalización (se analizarán a continuación), el tercer parámetro es opcional y corresponde con uno o varios de los modificadores descritos.

Opción Tipo Valor por defecto Descripción
enableHighAccuracy Booleano false Intenta obtener la información mas precisa que sea posible.  Debe tenerse en cuenta que esta opción también toma mas tiempo y probablemente consume una mayor cantidad de batería del dispositivo.
maximumAge Entero 0 Acepta como resultado el último valor histórico siempre y cuando este no sea mas antíguo que el valor especificado en milisegundos.
timeout Entero 0 Espera máximo la cantidad de milisegundos especificada antes de abortar el procedimiento.

A continuación se muestra un ejemplo de implementación de esta función.  En este se definen las funciones onSuccessGeolocating y onErrorGeolocating para determinar la implementación del manejo de éxito y error respectivamente de la geolocalización, y define además que se intente realizar el procedimiento con la mayor precisión posible, se acepten valores en caché con máximo 5 segundos de antiguedad y se espere máximo 10 segundos para terminar el procedimiento.

navigator.geolocation.getCurrentPosition(onSuccessGeolocating,
                                         onErrorGeolocating,
                                         {
                                       		enableHighAccuracy: true,
                                       		maximumAge:         5000,
                                       		timeout:            10000
                                         });

Establecer que hacer con la información de geolocalización.

Si el procedimiento fue exitoso, se define la función onSuccessGeolocating referenciada en el paso inmediatamente anterior, en ella se establece que se deberá hacer con la información obtenida.

function onSuccessGeolocating(position)
{
    // ...
}

El objeto Position que se recibe a través de los parámetros de la función incluye la siguiente información.

Atributo Descripción
coords Información de la ubicación obtenida
timestamp Información del momento en que fue obtenida la información

A su vez, el objeto Coordinates incluye la siguiente información en su interior.

Atributo Descripción
latitude Valor de la latitud de la ubicación del dispositivo medida en grados decimales
longitude Valor de la longitud de la ubicación del dispositivo medido en grados decimales
altitude Valor de la altura geográfica de la ubicación del dispositivo medida en metros
accuracy Precisión de la latitud y longitud medida en metros
altitudeAccuracy Precisión de la altitud medida en metros
heading Dirección en la que se mueve el dispositivo. Medida en grados desde 0 hasta 360. Su valor será NaN cuando el dispositivo se encuentra inmóvil o null si esta característica no es soportada
speed Valor de la longitud de la ubicación del dispositivo

Esto significa que la información básica de la ubicación del dispositivo esta finalmente almacenada en position.coords.latitude y position.coords.longitude.

Establecer que hacer en caso de error.

En algunas ocasiones la geolocalización puede fallar, por ejemplo cuando se utiliza el GPS pero no se cuenta con la información de suficientes satélites o cuando el usuario impide el procedimiento.  Para manejar esta conducta se define la función onErrorGeolocating referenciada durante la invocación de navigator.geolocation.getCurrentPosition.

function onErrorGeolocating(error)
{
    // ...
}

La información del error puede obtenerse del objeto PositionError recibido por parámetro el cual cuenta con los siguientes atributos en su interior.

Atributo Descripción
code Código numérico que referencia al tipo de error sucedido.  Su valor corresponde con una de las siguientes constantes 

PERMISSION_DENIED: no se permitió o no se tienen suficientes privilegios para acceder al servicio de geolocalización.

POSITION_UNAVAILABLE: el dispositivo no pudo determinar correctamente su ubicación.

TIMEOUT: el intento de geolocalización tomó mas tiempo del permitido (opción timeout).

message Texto que describe el error sucedido.  Este mensaje se utiliza para depuración en desarrollo, no se debe utilizar para mostrarse al usuario final.

A continuación se muestra un ejemplo básico de implementación de esta función.

function onErrorGeolocating(error)
{
	switch(error.code)
	{
		case error.PERMISSION_DENIED:
			alert('ERROR: User denied access to track physical position!');
		break;

		case error.POSITION_UNAVAILABLE:
			alert("ERROR: There is a problem getting the position of the device!");
		break;

		case error.TIMEOUT:
			alert("ERROR: The application timed out trying to get the position of the device!");
		break;

		default:
			alert("ERROR: Unknown problem!");
		break;
	}
}

El prototipo.

Como demostración de esta API se incluye el siguiente prototipo el cual intenta obtener la ubicación actual del usuario y desplegarla en un mapa de Google Maps.  Se recomienda consultar su código fuente para complementar los contenidos de este artículo.

 

Demostración de geolocalización con Javascript
Demostración de geolocalización con Javascript

Enlaces.

2 thoughts on “Como acceder a la geolocalización desde Javascript”

  1. Hola Jorge, podrias ayudarme estoy desesperado tengo este problema el siguiente ejemplo muestra la ubicacion entre dos puntos el primero es mi posicion ( mi problema), el segundo el objetivo(ok). no logro pasarle los parametros de ubicacion Auxiliooooo.
    Adjunto el ejemplo…

    Travel modes in directions

    html, body, #map-canvas {
    height: 100%;
    margin: 0px;
    padding: 0px
    }
    #panel {
    position: absolute;
    top: 5px;
    left: 50%;
    margin-left: -180px;
    z-index: 5;
    background-color: #fff;
    padding: 5px;
    border: 1px solid #999;
    }

    //*****************************

    //*****************************

    var directionsDisplay;
    var directionsService = new google.maps.DirectionsService();
    var map;

    //var haight = new google.maps.LatLng( 7.1254757, -73.12555420000001);
    var haight = new google.maps.LatLng( 7.1254757, -73.12555420000001); // la primera coordenada debe tomarla del navegador AUXILIO!!!
    var oceanBeach = new google.maps.LatLng(); // la segunda es pasada por php metodo POST

    function initialize() {

    directionsDisplay = new google.maps.DirectionsRenderer();
    var mapOptions = {
    zoom: 14,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: haight
    }
    map = new google.maps.Map(document.getElementById(‘map-canvas’), mapOptions);
    directionsDisplay.setMap(map);
    }

    function calcRoute() {
    var selectedMode = document.getElementById(‘mode’).value;
    var request = {
    origin: haight,
    destination: oceanBeach,
    // Note that Javascript allows us to access the constant
    // using square brackets and a string value as its
    // “property.”
    travelMode: google.maps.TravelMode[selectedMode]
    };
    directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
    directionsDisplay.setDirections(response);
    }
    });
    }

    google.maps.event.addDomListener(window, ‘load’, initialize);

    Ruta para llegar:

    Conduciendo
    Caminando
    Bicleta
    Transito

Leave a Reply

Your email address will not be published. Required fields are marked *