Geolocalización con HTML5

Tutorial sobre la programación de herramientas de geolocalización con HTML5


Geolocalización con HTML5

En un mundo como el actual en el que cada vez más a menudo nos conectamos a Internet utilizando dispositivos móviles la posibilidad de saber dónde está localizado nuestro usuario es cada vez más importante.

Hasta el lanzamiento de HTML5 la solución era intentar localizar al usuario utilizando la IP de conexión pero este método no da unos resultados demasiado acertados dado que en la mayor parte de las ocasiones la dirección IP pertenecía al proxy por el que se conectaba el usuario y no la dirección del propio usuario que podía encontrarse a kilómetros de distancia.

Por eso, una de las nuevas APIs de HTML5 nos permite geolocalizar al usuario a partir del navegador.

Esto nos abre la puerta a la creación de aplicaciones que indiquen una ruta o las tiendas más cercanas o la posición de los contactos del usuario, es decir, una mayor interactividad del usuario con nuestra aplicación.

Funciones para geolocalización en HTML5

Algo a tener en cuenta es que la geolocalización depende del navegador y que el usuario puede indicar que no se emitan datos de localización geográfica. Nuestras rutinas deben estar preparadas para ello bien para avisar al usuario que la aplicación no funcionará sin esos datos o bien para utilizar otros métodos (como la IP del cliente) para proporcionar al menos un resultado aproximado.

Lo primero que debemos saber es si el navegador del usuario está preparado para devolvernos la posición del usuario, para ello podemos utilizar la siguiente condición en JavaScript :

		navigator && navigator.geolocation
		
		
	

Una vez sabemos que el navegador admite la geolocalización simplemente debemos llamar al método getCurrentPosition del objeto geolocation que nos devuelve la longitud y latitud donde se encuentra el usuario:

		navigator.geolocation.getCurrentPosition(fncSuccess, fncError)
		
		
	

En realidad, el método getCurrentPosition espera dos funciones, a la primera de ellas la llamará cuando el método finalice correctamente, a la segunda de ellas se llamará en caso de error.

Así, un código más o menos completo para probar la rutina getCurrentPosition de HTML5 sería algo similar al siguiente:

		// Rutina que obtien la ubicación del usuario
		function GetUserLocation()
		{ // Comprueba que el navegador admita la función antes de llamarla
				if (navigator && navigator.geolocation) 
					navigator.geolocation.getCurrentPosition(PrintCoords, PrintError);
				else
					alert("El navegador no está preparado con rutinas de geolocalización");
		}
		
		// Rutina que imprime las coordenadas
		function PrintCoords(position) 
		{ alert("Latitud: " + position.coords.latitude + " - Longitud: " + position.coords.longitude);
		}
		
		// Rutina de error
		function PrintError(err) 
		{ if (err.code == 1) 
				alert("El usuario no ha permitido obtener su ubicación");
			else if (err.code == 2)
				alert("Información de localización no disponible");
			else if (err.code == 3)
				alert("Se superó el tiempo de espera para obtener la localización");
			else
				alert("Error desconocido");
		}
	

Error en la geolocalización

Como se ve en el código anterior, cuando el método getCurrentPosition no puede ubicar al usuario devuelve un código de error.

HTML5 tiene definidos los siguientes errores:

  • 0: Error desconocido
  • 1: Permiso denegado, el usuario no permite que el navegador envíe datos de geolocalización.
  • 2: No se ha podido obtener una ubicación.
  • 3: Se ha superado el tiempo de espera máximo para obtener la ubicación.

Páginas relacionadas