Geolocalización con HTML5

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 #map dentro 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.

Esta entrada fue publicada en HTML5. Guarda el enlace permanente.

35 respuestas a Geolocalización con HTML5

  1. toni dijo:

    Hay alguna manera de evitar la pregunta del navegador? la de enviar posición física.

    Gracias

    • David dijo:

      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

  2. Pedro dijo:

    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.

  3. Natan dijo:

    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!

    • David dijo:

      No sé darte referencias concretas porque lo que quieres hacer mezcla muchas cosas: base de datos, programación, xml… Te recomiendo que desarrolles por un lado una BBDD de tiendas con un campo Lat+Lng, crees a partir de ahí un xml con la información y la muestres según te convenga en un mapa Google.

  4. Pingback: 99 utilidades HTML5 y CSS3 | ceslava | diseño & cursos

  5. Dasanro dijo:

    Hola,

    En mi caso estoy trabajando con la api de google maps v3 en javascript al igual que vosotros.
    Estoy creando un mapa con markers que recupero de una base de datos, y que tras generar el xml pues los coloca en el mapa. (el ejemplo es con php, pero yo estoy trabajando con java)
    https://developers.google.com/maps/articles/phpsqlajax_v3

    Entonces me gustaria hacer una de estas dos opciones:
    1.- Centrar el mapa segun los marcadores que tengo, en lugar de darle una posicion fija.
    2.- Centrarlo segun la posicion del usuario (algo que he intentado adaptando lo que comentais arriba, pero sin exito)

    Gracias

    Saludos

  6. Francisco dijo:

    Hola estoy desarrollando una aplicación móvil, con html5,js,jquery mobile, en la cual según la ubicación del usuario, se muestra los sitios de interés cercanos, en este caso de deportes de extremos, pero en verdad, no se como hacerla, agradecería mucho tu ayuda, gracias

  7. Rodrigo dijo:

    Hola, muy didactico tu post la verdad es que me ha gustado mucho y queria hacerte una pregunta.

    Es necesario registrar de alguna forma tu web para poder utilizar el google maps? o la localizacion de negocios cercanos a un usuario?

    La verdad es que es una cosa que me gustaria implementar en mi pagina web para dar un soporte a usuarios y clientes de mi site para que puedan localizar negocios cercanos que cubran sus necesidades.

    Gracias de antemano

    • David dijo:

      Gracias, Rodrigo.

      Para utilizar Google Maps en tu web no se necesita registrarse si utilizas la versión 3. Hasta la versión 2 sí era necesario conseguir una clave de registro.

      Según Google, “La versión 3 de Google Maps JavaScript API es un servicio gratuito disponible para cualquier sitio web que sea gratuito para el consumidor.”

      Google dispone de unos tutoriales bastante didácticos para el desarrollo de Google Maps en https://developers.google.com/maps/documentation/javascript/?hl=es.

      • Rodrigo dijo:

        Genial, muchisimas gracias por resolverme la duda, creia que tenia que registrarme con una cuenta gmail en la consola de google para poder utilizar esa API.

        De nuevo muchas gracias por la rapidez, la respuesta y felicitarte por el blog.

        Un saludo, Rodrigo.

  8. Pingback: 99 + 13 recursos HTML5 y CSS3 - WordPress Random Themes

  9. Hector Ruiz dijo:

    hola , muy bueno tu blog me gusto mucho tu informacion pero tengo una duda quizas muy estupida pero soy novato de esto y necesito preguntarte cuando copio ese codigo debo ponerlo en un index.html para que lo vea el explorador ? o hay que hacer algo mas ? saludos

  10. Rodolfo dijo:

    Muy buen post David, pero tengo una duda; el antivirus bloquea la geolocation de html5 o quizás el firewall; te pregunto esto porque he probado el ejemplo en el post y me sale “Error [undefined]: undefined” despues de dar permiso a utilizar la ubicación de mie ordenador. Me podrias decir a que se puede deber este error?

    • David dijo:

      Efectivamente, el error se debe a que la API de HTML5 no ha podido detectar tu geolocalización, a pesar de que tu navegador admite esta funcionalidad. No sé decirte si esto se debe a antivirus, firewall u otra causa. Prueba a desactivarlos y cargar de nuevo la página a ver qué pasa. Saludos.

  11. Patricio dijo:

    Hola David. Llevo al menos 10 dias intentado tener en una variable php el contenido de la latitud y en otra la longitud, para asi poder insertarlas en un registro de una bd mysql. No hay forma. Podrias orientarme ?. Gracias

  12. Javier dijo:

    Hola David. Ante todo muy buen post…
    Te quería realizar la siguiente consulta:
    Necesito modificar el icono de los marcadores que se agregan desde un XML (no el de la ubicación del usuario).
    Intente creando una variable antes de la carga de los datos del XML y no los modifica.
    Podrías orientarme. Desde ya Gracias por tu atención.
    Javier

  13. Renzo dijo:

    Una consulta, el codigo no me detecta nada en una pc de escritorio, (Error [undefined]: undefined) pero si funciona desde un dispositivo mobil, hay alguna manera de detectarlo desde una pc de escritorio???

    • David dijo:

      A veces en los PCs la posición no está disponible. Seguramente habría que mejorar la función de error para mostrar uno más amigable

  14. Pros dijo:

    PORQUE TT PORQE AMI ES AL UNICO QE NO LE VA BIEN?

  15. Pros dijo:

    cuando te copio eso me sale esto:error unfined: unfined

  16. Ivan García dijo:

    Que tal compañeros. Para los que no les funciona….
    No funciona ni funcionara debido a la seguridad del browser; por default no es posible usar geolocalización si estas mirando el geolocalizacion.html directamente en el browser; en otras palabras, silo estas visualizando con una url similar a esta: “file:///C:/AppServ/www/html/geolocation/geolocation.html”
    Si lo estas intentando ver así, nunca funcionará.
    Lo que deben hacer es montar un servidor y visualizarlo desde un ‘localhost’ por ejemplo: “http://localhost/html/geolocation/geolocation.html”

    por que? por que usa la ip de tu router (modem) para obtener la latitud y longitud, el detalle es que si lo estas visualizando así “file:///C:/AppServ/www/html/geolocation/geolocation.html” desde la url, nunca pasa por el router sólo estas pidiendole al browser que renderee el html, en cambio de la otra forma, el browser ‘simula’ que sale a internet por el ‘localhost’ aunque el localhost sea tu misma pc (servidor).
    Hagan la prueba, de hecho aunque lo tengan montado en servidor y sin coenxión a internet no funcionará.

    saludos

  17. raul martinez dijo:

    hola gracias por tu publicacion me a ayudado a despejar muchas dudas en ese tema, es posible capturar los mismos datos y enviarlos a un correo?

  18. isaak dijo:

    Excelente aporte muchas gracias!
    habra una forma que al recibir las coordenas de posicion del usuario
    con exito puedan se enviadas tambien al admin o algun e-mail?
    seria con un scrip php?

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

*

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Notificarme los nuevos comentarios por correo electrónico. Tambien puedes suscribirte sin comentar.