El nuevo estandar HTML5 permite detectar la geolocalizaci贸n del usuario de una p谩gina o aplicaci贸n web de forma extremadamente sencilla. Este hecho, unido a la acelerada expansi贸n del uso de internet en los m贸viles que se est谩 produciendo en los 煤ltimos a帽os, abre nuevas y excitantes posibilidades al desarrollo de p谩ginas web. As铆, con el uso de HTML5 es posible, con relativa facilidad, ofrecer al usuario informaci贸n sobre productos, servicios, eventos, etc, de forma personalizada, en funci贸n de su ubicaci贸n f铆sica.
La detecci贸n de la geolocalizaci贸n del usuario se lleva a cabo en HTML5 gracias a una potente API JavaScript muy f谩cil de usar. La utilizaci贸n de esta API, combinada con el uso de Google Maps o Yahoo Maps, hace posible que los desarrolladores web puedan situar al usuario sobre un mapa y guiarle con precisi贸n o simplemente mostrarle lugares cercanos que puedan ser de su inter茅s.
A continuaci贸n voy a exponer un ejemplo pr谩ctico de esta API que pone de manifiesto la sencillez de su uso.
Demostraci贸n
C贸digo
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset=ISO-8859-1 />
<title>Geolocalizaci贸n con HTML5</title>
</head>
<body>
<h1>Geolocalizaci贸n con HTML5</h1>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script>
function success(position) {
var status = document.querySelector('#status');
status.innerHTML = "隆Le encontramos!";
var mapcanvas = document.createElement('div');
mapcanvas.id = 'mapcanvas';
mapcanvas.style.height = '400px';
mapcanvas.style.width = '560px';
document.querySelector('#map').appendChild(mapcanvas);
var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var myOptions = {
zoom: 15,
center: latlng,
mapTypeControl: false,
navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("mapcanvas"), myOptions);
var marker = new google.maps.Marker({
position: latlng,
map: map,
title:"Usted est谩 aqu铆."
});
}
function error(msg) {
var status = document.getElementById('status');
status.innerHTML= "Error [" + error.code + "]: " + error.message;聽
}
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(success, error,{maximumAge:60000, timeout: 4000});
} else {
error('Su navegador no tiene soporte para su geolocalizaci贸n');
}
</script>
<p id="status">Buscando su localizaci贸n...</p>
<div id="map"></div>
</body>
</html>
Resumiendo, el c贸digo realiza el siguiente trabajo:
- Detectamos si el navegador soporta la geolocalizaci贸n.
- Si la respuesta es s铆, reclamaremos las coordenadas de posici贸n del usuario.
- Una vez recibidas las coordenadas, mostramos un mapa Google con la posici贸n del usuario.
Llamada a la Geolocation API
Al final del c贸digo javascript se sit煤a la llamada a la Geolocation API:
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(success, error,{maximumAge:60000, timeout: 4000});
} else {
error('Su navegador no tiene soporte para su geolocalizaci贸n');
}
Este bucle condicional lo que hace es ‘preguntar’ al navegador si soporta la Geolocation API. En caso afirmativo, se realiza la llamada a la funci贸n getCurrentPosition, mediante la cual se intenta obtener de forma as铆ncrona las coordenadas de posici贸n del usuario. En caso contrario, se muestra una ventana de alerta en la que se advierte al usuario de que su navegador no soporta su geolocalizaci贸n.
En la funci贸n getCurrentPosition se definen a su vez dos funciones (success y error), que veremos m谩s adelante, y con las que se gestionar谩 que es lo que se har谩 en caso de que todo vaya bien y obtengamos las coordenadas de posici贸n del usuario o bien cu谩l ser谩 el camino a seguir si este intento fracasa.
En la funci贸n getCurrentPosition incluimos adem谩s dos par谩metros:
timeout: Indicamos cu谩l es el tiempo m谩ximo de espera para obtener las coordenadas del usuario (en milisegundos). Establecemos un valor de 4 segundos.maximumAge: Indica la m谩xima antig眉edad de la posici贸n cacheada del usuario (en milisegundos). Si el valor no est谩 definido o es cero significa que debemos obtener la posici贸n actual. Establecemos un valor de 60 segundos.
Mapa Google centrado en la posici贸n del usuario
En caso de que recibamos con 茅xito las coordenadas de posici贸n del usuario (que nos son entregadas a trav茅s del objeto position: position.coords.longitude y position.coords.latitude), pasamos a ejecutar la funci贸n success. Esta funci贸n lo que hace es informar al usuario de que efectivamente lo hemos geolocalizado y utizamos la API de Googlemaps para mostrar un mapa con su posici贸n en el centro del mismo.
function success(position) {
var status = document.querySelector('#status');
status.innerHTML = "隆Le encontramos!";
var mapcanvas = document.createElement('div');
mapcanvas.id = 'mapcanvas';
mapcanvas.style.height = '400px';
mapcanvas.style.width = '560px';
document.getElementById('map').appendChild(mapcanvas);
var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var myOptions = {
zoom: 15,
center: latlng,
mapTypeControl: false,
navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("mapcanvas"), myOptions);
var marker = new google.maps.Marker({
position: latlng,
map: map,
title:"Usted est谩 aqu铆."
});
}
En las l铆neas 2 y 3 sustituimos el texto contenido en el html #status (‘Buscando su localizaci贸n…’) por ‘隆Le encontramos!’.
El resto de la funci贸n es un ejemplo de uso sencillo de la API de Googlemaps:
- Entre las l铆neas 5 y 8 definimos un nuevo elemento html (
div#map) que contendr谩 el mapa Google que crearemos a continuaci贸n, y concretamos las dimensiones que tendr谩. - En la l铆nea 10 incrustamos el
#mapdentro de un elemento html ya existente. - En la l铆nea 12 definimos una variable con la latitud y longitud del usuario para utilizarlo posteriomente en nuestro mapa.
- Entre las l铆neas 14 y 20 introducimos nuevos par谩metros para nuestro mapa Google: el nivel del zoom, su centro (las coordenadas del usuario), los controles y el tipo de mapa que se mostrar谩.
- En la l铆nea 22 creamos, por fin, nuestro mapa (el objeto
google.maps.Map), y definimos el objeto html en el que se situar谩 junto con los par谩metros del mismo establecidos anteriomente. - Entre las l铆neas 24 y 29 creamos un nuevo marcador para nuestro mapa, en el que se muestra la posici贸n del usuario.
Error
La funci贸n error se limita a mostrar en el html #status el c贸digo y mensaje de error recibidos en caso de que no se pueda obtener las coordenadas del usuario.
function error(msg) {
var status = document.getElementById('status');
status.innerHTML= "Error [" + error.code + "]: " + error.message;聽
}
Otras propiedades de getCurrentPosition()
Este sencillo ejemplo de uso de la API Geolocation expuesto aqu铆 admite desarrollos mucho m谩s complejos. Para empezar se puede recabar m谩s informaci贸n acerca de la situaci贸n del usuario, m谩s all谩 de sus coordenadas. El objeto position devuelto por getCurrentPosition puede contener otras propiedades, como la altitud o velocidad de desplazamiento del usuario. Sin embargo, hoy por hoy pocas veces se obtienen valores precisos al respecto.
A continuaci贸n se muestran las propiedades del objetito Position devuelto por la funci贸n getCurrentPosition:
| Propiedad | Valor |
|---|---|
| coords.latitude | Latitud, en grados decimales |
| coords.longitude | Longitud, en grados decimales |
| coords.altitude | Altitud, en metros |
| coords.accuracy | Nivel de precisi贸n de las coordenadas, en metros. |
| coords.altitudeAccuracy | Nivel de precisi贸n de la altitud, en metros. |
| coords.heading | Direcci贸n en la que se desplaza el aparato que proporciona las coordenadas, en grados (de 0潞 a 360潞), comenzando desde el norte y contando en el sentido de las agujas del reloj. |
| coords.speed | Velocidad de desplazamiento del aparato, en metros por segundo |
| timestamp | Momento en que la posici贸n fue adquirida, en formato timestamp. |
La funci贸n watchPosition()
Para terminar, comentar que adem谩s de la funci贸n getCurrentPosition (que como hemos visto proporciona informaci贸n sobre la situaci贸n del usuario en un punto determinado del tiempo y el espacio), la API Geolocation especifica la funci贸n watchPosition, que facilita informaci贸n acerca del movimiento del usuario, es decir, podemos seguir al usuario y conocer sus cambios de posici贸n.
Por tanto, la funci贸n watchPosition ser谩 de gran utilidad en el caso de que el usuario utilize un dispositivo m贸vil. Por otro lado, el uso de ambas funciones es muy similar.
Privacidad
Es importante destacar que el usuario debe dar su consentimiento antes de enviar sus cooordenadas de posici贸n a cualquier medio que lo reclame. Esto se implementa de forma aut贸m谩tica por los navegadores que soportan la geolocalizaci贸n: al cargar la p谩gina, el navegador muestra una ventana de di谩logo en el que se informa al usuario de que la web est谩 reclamando su ubicaci贸n f铆sica y se le da la opci贸n de aceptar o denegar esta petici贸n.
Conclusi贸n
Resulta evidente que la extensi贸n del uso de HTML5 y consiguiente posibilidad de geolocalizar al usuario van a revolucionar el ya ancho campo del desarrollo de p谩ginas y aplicaciones web. Como hemos se帽alado al principio de este art铆culo, la posibilidad de mostrar al usuario productos y lugares de su inter茅s cercanos a su ubicaci贸n f铆sica abre un nuevo horizonte comercial para fabricantes, comerciantes y cualquiera que tenga informaci贸n de inter茅s que ofrecer a los internautas.
Es cierto que la geolocalizaci贸n con HTML5 s贸lo funciona en las nuevas generaciones de navegadores que han adoptado el nuevo est谩ndar: Firefox 3.5+, Chrome, Opera, Safari, . Afortunadamente, la velocidad de actualizaci贸n de los usuarios al uso de navegadores de 煤ltima generaci贸n es cada d铆a mayor, por lo que est谩 creciendo con gran rapidez el n煤mero de potenciales usuarios de esta nueva tecnolog铆a.
Implementaci贸n de la geolocalizaci贸n del usuario en vistarural.com
Por 煤ltimo, pod茅is ver en el siguiente enlace un ejemplo concreto de desarrollo m谩s complejo de Geolocalizaci贸n mezclado con Google Maps que hemos utilizado en el portal de casas rurales Vista rural:
Este portal de alojamientos rurales desarrollado por nuestra empresa ped铆a a gritos la implementaci贸n del sistema de geolocalizaci贸n. La web ya dispon铆a de un mapa Google en el que se mostraban las casas rurales geolocalizadas (http://www.vistarural.com/mapa?lang=es) , pero sin tener en cuenta la ubicaci贸n del usuario: el centro del mapa se situaba aproximadamente en Madrid. En el nuevo mapa se tiene en cuenta la geolocalizaci贸n del usuario y se muestran las casa rurales cercanas a su ubicaci贸n.
Hay alguna manera de evitar la pregunta del navegador? la de enviar posici贸n f铆sica.
Gracias
No se puede evitar la pregunta del navegador. La raz贸n es que no se puede conocer la ubicaci贸n del usuario sin que 茅ste lo consienta expl铆citamente, ya que esta informaci贸n afecta a su privacidad.
Este razonamiento est谩 expuesto en el apartado de ‘Seguridad y Privacidad’ de la Especificaci贸n de la API Geolocation:
http://www.w3.org/TR/geolocation-API/#security
Hola, muy interesante, me sirvi贸 de mucho. Te quer铆a preguntar si sabes cm hacer para obtener lugares cercanos a la posicion del usuario, es decir, si el usuario quiere saber que restaurantes estan cerca de su posicion, como obtienes las posiciones de esos restaurantes?
Muchas gracias
Att.
Las posiciones de los restaurantes las tienes que almacenar por ejemplo en una base de datos y cargarlas sobre el Mapa Google a trav茅s de un archivo XML, como en el ejemplo expuesto al final de este tutorial:
http://www.vistarural.com/mapagl.php?lang=es
Hola,
esta muy interesante ese post, pero tengo la misma duda del Pedro, por ejemplo: me gustaria crear una base de datos especifica de un grupo de tiendas de ropas, donde el usuario pueda ver en el map cuales tiendas estan cerca de su posicion actual y informaciones de ellas. Puedes dame algunas referencias de sites, libros, que podran ayudarme a desarollar esa idea? te lo agradezco mucho.
disculpa por mi portu帽ol, soy brasile帽o
saludos!
Pingback: 99 utilidades HTML5 y CSS3 | ceslava | dise帽o & cursos