Geolocalización con PhoneGap y poner marcadores usando un servicio web

Geolocalización con PhoneGap y poner marcadores usando un servicio web

En esta entrada quiero mostrarte como funciona la geolocalización con PhoneGap. Si no sabes lo que es PhoneGap, aquí te dejo la descripción de Wikipedia ¿Qué es PhoneGap ? , pero en pocas líneas , es un framework que permite hacer aplicaciones multiplataforma , para distintos sistemas operativos de smartphone utilizando JavaScript, HTML 5 y CSS3. Una vez esta pequeña introducción paso a la explicación.

¿Cómo funciona?

Bien, te explico como va esto, pero en este ejemplo asumo que controlas un mínimo de javaScript ya que no quiero  entrar en detalles de código fuente del ejemplo , solo en como podemos usar la geolocalización usando phoneGap.

PhoneGap, dispone de dos métodos muy sencillos en su API que setean un objeto Position con parámetros como la latitud , longitud , y otros como altura, velocidad , etc, que accederemos a ellos en el método onSuccess() . Pero en este caso solo vamos a necesitar la latitud y lontigud. 

Los métodos getCurrentPosition() y watchPosition(), tienen parámetros opcionales para personalizar la respuesta de la geolocalización:

Las propiedades opcionales disponibles para el objeto Position son:

{ maximumAge: 3000, timeout: 5000, enableHighAccuracy: true };

• maximumAge: Son los milisegundos máximos que se almacena una posición en caché.

• timeout: Al poner milisegundos a este parámetro , lo que hacemos es dar un márgen de tiempo máximo que tiene que transcurrir desde que la función getCurrentPosition() o watchPosition() finaliza hasta que ejecuta el método callback onSuccess(). Si este tiempo es sobrepasado , se ejecutará el método onError().

• enableHighAccuracy: Indicamos que queremos los datos de localización sean los más precisos posibles.

Los métodos son los siguientes:

• navigator.geolocation.getCurrentPosition: Este método obtiene los datos de la posición actual.
• navigator.geolocation.watchPosition: Este método obtiene los datos de la posición cuando se detecta un cambio de posición , es decir, cuando nos movemos.
• navigator.geolocation.clearWatch: Este método detiene la búsqueda de nuestra posición, para el método watchPosition .

Una vez estos métodos ejecuten su función callback onSuccess() u onError() será lanzada y ya habrá terminado la geolocalización. Si todo ha ido bien , ya tenemos nuestro objeto Position con sus atributos seteados, y dentro del método onSuccess() ya podremos acceder a ellos.

Para ver los datos solo tenemos que acceder a los atributos del objeto Position de la siguiente manera:

Console.log("Longitud : "+ Position.coords.longitude);

Console.log("Longitud : "+ Position.coords.latitude);

Ya con eso tenemos los datos necesarios para crear un marcador de google.

Un ejemplo sencillo y real para verlo en práctica.

Datos que envía el web service

En el siguiente ejemplo lo que hago es obtener mi localización ( será el marcador verde ) y las distintas localizaciones de los Centros de información turistica de Tenerife. Los datos los he sacado de OpenData Canarias. Una vez obtenidos los datos que ofrece el web service (http://www.gabrielglez.com/phonegap/)  , situo las oficinas en el mapa con los marcadores de google.

Puedes descargar el ejemplo aquí y probarlo en tu móvil. (LocalizatorGabriel.zip)

Utilizando JQueryMobile pues vamos accediendo a los distintos datos que nos ofrece el web service y vamos marcando los puntos en el mapa, los markers. 

Pues hasta aquí ha sido todo. No quería entrar en detalles de código , eso lo puedes ver en el código fuente del proyecto, quería centrarme en la explicación de geolocalización con phoneGap, explicar sus métodos que nos ofrece la API , sus propiedades y como consumir un servicio web para utilizarlo para dibujar marcadores en un mapa de google.

Espero que esto te sirva de ayuda y haya aclarado algun duda si la tenías. Gracias.