Geoposicionamiento Web con HTML5 y Google Maps

Índice de contenidos

1. Introducción
2. Requisitos previos
3. El API de Geolocalización
4. Ejemplo: Obteniendo la posición geográfica del usuario y mostrandola usando el API de Google Maps.
5. Cálculo de la distancia entre dos puntos geográficos

Introducción

Hace ya un tiempo que html5 ha entrado en nuestras vidas abriéndonos un amplio abanico de posibilidades a los desarrolladores, posibilidades que debemos ir conociendo para ofrecer servicios de valor añadido en nuestros desarrollos.

En este tutorial nos centraremos en la característica de geo-posicionamiento, es decir en la habilidad de ofrecer servicios a nuestros usuarios basados en su ubicación.

En la actualidad la gran mayoría de los navegadores webs de los dispositivos con los que accedemos a Internet (ordenadores de sobremesa, portátiles, tables, móviles, smartphones, algunos televisores, etc.) implementan
este estándar, así que echémosle imaginación para ver cómo obtener partido y ofrecer servicios de calidad.

Algunos ejemplos de uso podrían ser: Ofrecer una publicidad más localizada, eventos interesantes por cercania a tu posición actual, busquedas de información basadas en un radio de distancia (por ejemplo, obtener un listado de viviendas de alquiler a 400 metros de mí), etc.

Quiero resaltar, que esta característica no está ligada al uso de terminales con GPS, es decir, un ordenador con una conexión a Internet podría también acceder a este tipo de servicios, esto es debido a que el API
está diseñado para ser independiente del proveedor de datos de localización (GPS. WIFI, celdas telefónicas, otros), por supuesto no todos los métodos tienen la misma precisión, pero para la gran mayoría de las aplicaciones cualquiera
de los métodos es suficiente.

Requisitos previos

Se requieren conocimientos previos de

• JavaScript
• JQuery
• HTML
• DOM

El API de Geolocalización

A continuación vamos a describir los métodos del API, si desea ampliar la información consulte los enlaces de la sección referencias.

a: Indica si el navegador del usuario tiene capacidades de geolocalización.

window.navigator.geolocation

b)

window.navigator.geolocation.getCurrentPosition(successFunctionCallBack, [errorFunctionCallBack], [queryOptionsAsJsonObject]);
			

• successFunctionCallBack: Función JavaScript que será llamada cuando la operación se realize correctamente.
• errorFunctionCallBack (es opcional): Función JavaScriptque será llamada cuando la operación no se realize correctamente.
• queryOptionsAsJsonObject (es opcional): Objeto JSON con los parámetros de configuración (es opcional), los posibles valores son:
  • maximumAge: Nº milisegundos que los últimos puntos de localización se consideran validos (antes de volver a consultar al proveedor).
    
    El valor por defecto es 0 => que intentará determinar la posición cada vez.
  • timeout: Tiempo máximo en milisengundos que deseamos esperar para obtener los datos la localización (desde que el usuario acepta los permisos).
    Por defecto el valor es infinito.
  • enableHighAccurace: Indica al api que proporcione la másima precisión posible. Por defecto es false.

Ejemplo:

var queryOptions  = {timeout:5000, maximumAge:20000, enableHighAccurace:false};
window.navigator.geolocation.getCurrentPosition(handle_geolocation_success, handle_geolocation_failures, queryOptions);
			

c)

wacthID = window.navigator.geolocation.watchPosition(successFunctionCallBack, errorFunctionCallBack);

Registra un listener que será invocado cada vez que la posición del usuario cambie (o cada cierto tiempo), el método devuelve un identificador del listener u oyente.
Al igual que en el método anterior, registra dos funciones que serán llamadas en caso de éxito o error.

A no ser que necesite un rastreo del usuario, normalmente esta función no es necesaria, además consume más recursos (en caso de un dispositivo móvil con limitaciones de bateria)

d)

clearWatch(wacthID)

Desregistra el listener creado a través del método:

window.navigator.geolocation.watchPosition

.

Ejemplo: Obteniendo la posición geográfica del usuario y mostrandola usando el API de Google Maps.

Vamos a construir la aplicación Web que se muestra en la siguiente captura de pantalla, haz clic en la imagen para ampliarla.

Hacer clic aquí para ver funcionar el ejemplo en tu navegador

Código fuente del ejemplo:

html5-geo-location-js

Cálculo de la distancia entre dos puntos geográficos

Para calcular la distancia entre dos puntos aplica la función Haversine:

• http://es.wikipedia.org/wiki/F%C3%B3rmula_del_Haversine
• http://www.movable-type.co.uk/scripts/latlong.html

Referencias

• http://www.w3.org/TR/geolocation-API/.
• Guía para desarrolladores de Google Static Maps API.
• Introducción a html5.

Un saludo.
Carlos García.