Geolocalización con HTML5

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.

Geolocalización con HTML5

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 alrededor de sus servicios. Twitter nos permite localizar los mensajes de otros usuarios 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 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 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.

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, 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 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 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 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, y modificaremos un poco el código del tutorial de ejemplo para integrarlo con las funciones de obtener_ubicacion y mostrar_mapa que previamente habíamos utilizado.

html { height: 100% } body { height: 100%; margin: 0px; padding: 0px } #map_canvas { height: 100% }

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"});
}

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, hasta la próxima :-)

11 pensamientos en “Geolocalización con HTML5

  1. Tweets that mention Geolocalización con HTML5 « Activ -- Topsy.com

  2. Manuel, claro que se puede incluir en un Blog. Si te fijas el div lo esta mandando a pantalla completa pero con un poco de HTML y propiedades de los elementos puedes incrustarlo en un template, post, página o cualquier otro lado.

    Saludos, Edgar

    • gracias por la pronta respuesta, pero he consultado y me dicen que mi blog necesita operar con html5 ademas no veo el div parece que el codigo esta roto, mi blog esta en blogger, podrias especificarme porfavor que codigo iria en la plantilla y cual en la entrada.

  3. Tu blog no necesita operar con HTML5 al 100%, por ejemplo la plantilla de este blog es XHTML 1.0 transitional y aún así se podría incluir el código.

    El código es exactamente el mismo que puedes leer en esta entrada, si necesitas más referencias o ejemplos puedes checar el API de Google Maps que también está linkeada aquí.

    Saludos

  4. Como puedo mostrar una pagina determinada a quien se ubica en un sector X, por ejemplo quienes se encuentren en nueva york mostrarles newyork.html y a quienes estén en newjersey otra pagina ?

    Gracias!

  5. Fernanda, una disculpa por el atraso en contestar (he andado full!) respecto a tu pregunta la forma más sencilla de hacerlo sería redireccionando con algún script del lado servidor una vez identificada la posición del usuario.

    Si haces una búsqueda por redirect scripts en google saldrán varios que pueden adaptarse a tus necesidades al combinarlos con este código.

    Saludos, Edgar

  6. Geolocalización: un modelo de negocio con futuro — Dcorbaxeo SEO

Deja un comentario

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s