Geolocalización con HTML5

Escrito por Revista NeoPixel Viernes, 18 de Febrero de 2011 08:02

Hace tiempo que tengo en mente compartir con ustedes algunos tips sobre geolocalización a partir de HTML5, así que espero que lo que están a punto de leer les sea de utilidad.

El término geolocalización se refiere a la ubicación de la posición geográfica de un objeto. Anteriormente esta tecnología estaba limitada a dispositivos GPS pero con la aparición de los smartphones en el mercado, se volvió cada vez más común tener acceso a este tipo de funcionalidades desde un teléfono o una computadora con acceso a Internet.

A partir de que el término se volvió de uso común para más personas, surgieron nuevos usos para dicha información entre los que podemos destacar: geocoding, geotargeting, geotagging, geomarketing, etc.

Empresas como Foursquare han sabido aprovechar el momentum y han creado interesantes plataformas de desarrollo (http://foursquare.com/apps/) alrededor de sus servicios. Twitter nos permite localizar los mensajes de otros usuarios (http://blog.twitter.com/2009/08/location-location-location.html) dentro de nuestra propia ciudad, colonia y/o vecindario. Y aunque no hemos podido probarlo aún en México, Facebook tiene un servicio llamado Places (http://www.facebook.com/places/) que permite interactuar con nuestra base de amigos aprovechando la información de su ubicación actual.

¿Cómo podemos usar Geolocalización nosotros?

Desde 2008 gracias a Google Gears (http://gears.google.com/) podemos contar con Geolocalización directa en nuestros browsers sin necesidad de contar con algún dispositivo GPS, y recientemente esta funcionalidad se ha ido incorporando en diferentes navegadores ya que forma parte de la especificación de HTML5 (http://dev.w3.org/geo/api/spec-source.html).

Es relativamente sencillo acceder con una función de javascript como la siguiente que podemos crear nosotros mismos e incluir dentro del código HTML de nuestra página web:

function obtener_ubicacion(){

! if(Modernizr.geolocation){

! ! navigator.geolocation.getCurrentPosition(mostrar_mapa)

! } else {

! ! alert("No acepta geolocalización")!

! }

}

En esta función también se esta haciendo uso de la librería Modernizr (http://www.modernizr.com/), que simplemente debemos de tener disponible en la ruta donde se encuentre nuestro proyecto, esto lo hacemos para revisar la disponibilidad de esta función en nuestro navegador y/o dispositivo.

Si miramos dentro de esta función hay una llamada a otra función de tipo callback mostrar_mapa, que será la responsable de regresarnos los datos de las coordenadas para ubicar al usuario. Aquí tienen la estructura básica de dicha función:

function mostrar_mapa(position) {

! var latitud = position.coords.latitude;

! var longitud = position.coords.longitude;

! alert("Esta es tu latitud/longitud "+latitud+","+longitud)

}

Posteriormente con esas coordenadas podemos realizar diferentes cosas, desde simplemente generar un popup con la información hasta aprovechar las características de un API como la de Google Maps (http://code.google.com/apis/maps/index.html) para generar un marcador en el punto exacto donde se haya detectado la geolocalización.

Solo queda comentar un detalle respecto a este proceso y es el hecho de que NO habrá forma de obtener esa información sin la autorización de parte del usuario. Así que si tenían en mente alguna aplicación para espiar a la chica de sus sueños pueden olvidarlo desde este momento ;-)

Geolocalización con HTML5

Pero no se desanimen, aún quedan un montón de ideas por explotarse y es justamente lo que haremos en el siguiente apartado.

Geolocalización + Google Maps

Google Maps es un servicio muy conocido en la red que nos permite accesar a una base de datos con información geográfica muy interesante, es posible tener diferentes vistas (satelite, mapa, street view) y obtener información relevante acerca del tráfico, las rutas de traslado e inclusive negocios cercanos a cierta ubicación.

Teniendo en cuenta lo que podemos hacer con este servicio, vamos a aprovechar su API para construir un mapa y ubicar un marcador según el punto donde nos encontremos. Lo primero que hay que hacer es entrar al sitio web de Google Maps API (http://code.google.com/apis/maps/index.html) donde encontraremos diferentes opciones de integración mediante Javascript, Flash, XML y/o JSON.

La tecnología que seleccionaremos para este ejemplo con HTML5 es Javascript (http://code.google.com/apis/maps/documentation/javascript/), y modificaremos un poco el código del tutorial de ejemplo (http://code.google.com/apis/maps/documentation/javascript/tutorial.html) para integrarlo con las funciones de obtener_ubicacion y mostrar_mapa que previamente habíamos utilizado.

<!DOCTYPE HTML>

<html>

<head>

</style>

sensor=false"></script>

<title>Ejemplo Google Maps + Geolocalización</title>

function obtener_ubicacion(){

! if(Modernizr.geolocation) {

! ! navigator.geolocation.getCurrentPosition(mostrar_mapa)!

! } else {

! ! alert("No hay geolocalización!")

! }

}

function mostrar_mapa(position) {

! var latitud = position.coords.latitude;

! var longitud = position.coords.longitude;

! var latlng = new google.maps.LatLng(latitud,longitud);

var myOptions = {zoom: 16, center: latlng, mapTypeId:

google.maps.MapTypeId.ROADMAP};

var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

! var marker = new google.maps.Marker({position: latlng, map: map, title:

"Aquí estoy"});

}

</script>

</head>

</body>

</html>

Y listo, ya con esto tendremos un bonito mapa con geolocalización que nos muestra en un marcador el punto exacto de nuestra ubicación. Recuerden descargar Modernizr y modificar la ruta para hacer funcionar el ejemplo.

Conclusiones

Sin riesgo a equivocarme creo que estamos viendo la punta del iceberg sobre el tipo de aplicaciones que veremos en un futuro aprovechando la geolocalización, hoy en día es una realidad que cualquier persona con un smartphone llegue a un restaurant y haga check-in para compartir sus impresiones sobre ese lugar, también para acceder a recomendaciones de anteriores visitantes así como a promociones gestionadas por el mismo lugar.

En un futuro próximo no será extraño el utilizar servicios de generación de rutas dinámicas basadas en los intereses de los viajeros, poder crear redes sociales locales que permitan identificar tendencias de una forma más precisa que simples hits en una página web, accesar a ofertas de último minuto para aprovechar los runshowers de las tiendas departamentales, y todo esto sigue siendo solo el comienzo.

Espero sus comentarios en esta entrada, vía twitter en @edgarparada o tal vez nos veamos en algún curso de HTML5 (http://activ.com.mx/cursos/web/estandares-web/), hasta la próxima :-)

Marca como favorito

Bookmark

Email This

Comentarios (0) Add Comment