Ardilla Quio Ardilla Quio

17 de Enero de 2013

HTML5: API de geolocalización (Geolocation API)

Una de las principales novedades de HTML5 fue la aparición de nuevas APIs de Javascript que aumentan la potencia de este lenguaje.

Una de ellas es la nueva API de geolocalización, que nos permite conocer la ubicación geográfica del usuario, siempre y cuando esté usando un navegador que la tenga implementada y que el usuario dé su permiso.

Aunque la primera impresión sea que sólo será útil para usuarios de navegadores móviles, la realidad es que éste utiliza otros medios además del GPS para calcular la ubicación del usuario, como por ejemplo a través de su dirección IP.

Navegadores que soportan el API de geolocalización

Antes de nada debemos saber qué navegadores soportan esta funcionalidad. En la siguiente tabla podemos verlo:

NavegadorVersión
Opera10.6+
Internet Explorer9+
Safari5+
Chrome5+
Firefox3.5+
iPhone3+
Android2+

Antes de empezar a usar el API de geolocalización tendremos que comprobar que el navegador la soporta:

if (navigator.geolocation)
{
	// Código de la aplicación
}
else
{
	// No hay soporte para la geolocalización: podemos desistir o utilizar algún método alternativo
}

La función navigator.geolocation.getCurrentPosition

La ubicación del usuario se obtiene a través de la siguiente función:

navigator.geolocation.getCurrentPosition(funcExito, funcError, opciones);

Esta función tiene tres parámetros (los dos últimos opcionales):

  1. funcExito: función de retorno que se ejecutará si se obtiene la posición. Se le pasará como parámetro un objeto Position.
  2. funcError: función de retorno que se ejecutará si no se obtiene la posición. Se le pasará como parámetro un objeto PositionError.
  3. opciones: un objeto PositionOptions con parámetros para la obtención de la localización.

La función intentará obtener la posición del usuario. Si lo consigue llamará a la función que le pasemos como primer parámetro pasándole un objeto Position con esos datos. Si, por el contrario, no lo consigue, llamará a la función que le pasemos como segundo parámetro pasándole un objeto PositionError que indicará la razón por la que no lo ha conseguido.

El objeto Position

Es el objeto que nos indicará la ubicación del usuario si el navegador puede determinarla. Este objeto consta de los siguientes atributos:

AtributoTipo de datoDescripción
coords.latitudedoubleLatitud en grados decimales
coords.longitudedoubleLongitud en grados decimales
coords.accuracydoublePrecisión en metros
timestampDOMTimeStampMomento de la toma de estos datos
coords.altitudedouble o nullAltitud en metros
coords.altitudeAccuracydouble o nullPrecisión de la altitud en metros
coords.headingdouble o nullOrientación en grados decimales en el sentido de las agujas del reloj
coords.speeddouble o nullVelocidad en metros/segundo

De todos los atributos sólo coords.latitude, coords.longitude y coords.accuracy es seguro que tendrán valor. Los otros dependen de las aptitudes del dispositivo que esté usando el usuario.

El objeto PositionError

Es el objeto que nos indicará la causa por la que no se ha podido determinar la ubicación del usuario. Este objeto consta de dos atributos: code y message. De estos el que nos interesa es code que será el que nos indique el error de forma más eficiente (message hace lo mismo pero con una cadena explicativa del error).

Los posibles valores del atributo code son:

ValorValor numéricoDescripción
PERMISSION_DENIED1El usuario ha denegado el acceso a la obtención de su ubicación
POSITION_UNAVAILABLE2No se ha podido obtener la ubicación del usuario por alguna razón
TIMEOUT 3Se ha agotado el tiempo de espera para obtener la ubicación

El objeto PositionOptions

Es el objeto que nos permitirá poner algunas condiciones a la obtención de la ubicación del usuario. Este objeto consta de los siguientes atributos:

AtributoTipo de datoValor por defectoDescripción
enableHighAccuracybooleanfalseSi el dispositivo y el usuario lo permiten el navegador intentará obtener la ubicación del usuario con una mayor precisión. Esto suele suponer un mayor coste de recursos.
timeoutlongNo tieneTiempo de espera máximo para obtener la posición en milisegundos. Este tiempo empieza a contar desde que el usuario da su permiso, no antes.
maximumAgelong0Antigüedad máxima en milisegundos. Con el valor por defecto (0), cada vez que se pide la posición se vuelve a calcular. Si ponemos algún valor mayor que cero, se busca en la caché y si hay una posición tomada anteriormente no más antigua que el valor dado, se devuelve inmediatamente, ahorrando muchos recursos. Con el valor Infinity siempre se devolverá un valor de la caché.

Hay que tener en cuenta que algunos dispositivos tienen distintos métodos para obtener la posición si enableHighAccuracy está activado y si está desactivado, con lo es posible que una llamada a getCurrentPosition con esta opción activada dé error mientras que puede tener exito con ella desactivada.

Obtener la posición del usuario

Veamos ahora el código para obtener la posición del usuario con: comprobación de si el navegador soporta geolocalización, recogida de los datos de latitud y longitud, control de errores y pasándole las opciones de tiempo máximo de espera y antigüedad.

(function(){
	var content = document.getElementById("geolocation-test");

	if (navigator.geolocation)
	{
		navigator.geolocation.getCurrentPosition(function(objPosition)
		{
			var lon = objPosition.coords.longitude;
			var lat = objPosition.coords.latitude;

			content.innerHTML = "<p><strong>Latitud:</strong> " + lat + "</p><p><strong>Longitud:</strong> " + lon + "</p>";

		}, function(objPositionError)
		{
			switch (objPositionError.code)
			{
				case objPositionError.PERMISSION_DENIED:
					content.innerHTML = "No se ha permitido el acceso a la posición del usuario.";
				break;
				case objPositionError.POSITION_UNAVAILABLE:
					content.innerHTML = "No se ha podido acceder a la información de su posición.";
				break;
				case objPositionError.TIMEOUT:
					content.innerHTML = "El servicio ha tardado demasiado tiempo en responder.";
				break;
				default:
					content.innerHTML = "Error desconocido.";
			}
		}, {
			maximumAge: 75000,
			timeout: 15000
		});
	}
	else
	{
		content.innerHTML = "Su navegador no soporta la API de geolocalización.";
	}
})();

Y en el siguiente cuadro podemos ver el resultado de este script aplicado en esta página:

El script aún no se ha ejecutado.

Obtener la posición del usuario cada vez que ésta cambie

Si en lugar de querer obtener la ubicación del usuario puntualmente queremos recibir información actualizada cada vez que esta cambie, en lugar de usar la función navigator.geolocation.getCurrentPosition, usaremos navigator.geolocation.watchPosition. Los parámetros a pasar a esta función son exactamente los mismos que para la anterior, con la salvedad de que si bien la anterior no devuelve ningún valor, esta devolverá un identificador con el que podemos parar las actualizaciones de ubicación. Podemos, por ejemplo, hacer que el usuario pare manualmente las actualizaciones desde un botón. Se haría de la siguiente forma:

var watch_id = navigator.geolocation.watchPosition(function(objPosition)
{
	// Procesar posición
}, function(objPositionError)
{
	// Procesar errores
}, {
	maximumAge: 75000,
	timeout: 15000
});

document.getElementById("stop-button").onclick = function()
{
	navigator.geolocation.clearWatch(watch_id);
};

53 comentarios

Anónimo

28/08/2018 13:34:38

Es muy bueno, podrías indicar si se puede guardar las coordenadas en un Excel o txt

Claudio Saavedra

08/05/2018 01:26:59

hola tienes un ejemplo que funcione en SAFARI, puesto que he tratado en safari pero no hay caso

Angel

29/03/2018 02:37:27

De favor, todo esto es muy fascinante y estoy implementando todos sus conocimientos, lo que resulta una pregunta que quisiera me ayudaran a resolver, se los agradezco de antemano.

Como puedo guardar el resultado de estas coordenadas en un archivo txt desde el mismo codigo??? si alguien con mayores conocimientos me podria apoyar, mil gracias.

Mi correo para una mayor rapidez de respuesta

angellarados@gmail.com

Anónimo

03/03/2018 09:38:28

Como podría enviar la latitud y la longitud capturada a un email preestablecido?

Héctor

01/03/2018 15:46:11

como podria aceder a un ejemplo completo ? Gracais

Anónimo

30/01/2018 20:19:31

Hola si quiero que mi página web segmente el contenido según la ubicación del usuario, como me puede servir este código

oskar

29/10/2017 06:15:37

como mostara las ubicacines , saldrán remarcadas en un punto como google maps

o solo los numeros'

angel32

30/09/2017 15:42:51

hola estoy tratando de usar API DE GEOLOCALIZACIÓN y cuando lo ejecuto con mi celular me da el error

PERMISSION_DENIED no se como poder solucionarlo.gracias

Oniel

30/07/2017 04:54:08

que tal alguien me puede ayudar diciendo me q si al momento de publicar mi aplicación q usa las api de google para nacionalización debe ser publicada en un puerto seguro para q funciones la nacionalización, muchas gracias.

Corina

05/07/2017 17:37:40

Hola por favor me podrías orientar. Estoy desarrollando una App con Geoposicionamiento utilizando html5 y con el método wath y las variables:

enableHighAccuracy: TRUE

maximumAge: 0

timeout: 12000

Estando en una ciudad grande con un celular Samsung S7 Edge, con 4G buena senal sin Wiffi, tenemos algunas mediciones buenas de menos de 20 metros de accuracy pero también nos pasa que a veces estamos obteniendo solamente 4 lecturas idénticas con un accuracy de 600 metros.

Nos gustaría saber tu opinión y si podemos utilizar algún otro parámetro que mejore esto. También tenemos la duda si conviene utilizar WATCH o GET.

Desde ya gracias.

Corina (cmerli@axonconsultores.com.ar)

Anónimo

06/06/2017 22:16:51

Gracias maestro exelente

Anónimo

24/05/2017 04:30:19

Hola amigo, yo quisiera saber como se puede observar en el mismo mapa un marker con mi ubicación actual y otros marcadores fijos. Que se necesita para lograr eso amigo?

David

02/05/2017 17:20:12

Hola yo quiero saber si se puede hacer lo siguiente: Cuando un usuario entra en mi pagina, esta detecta su ubicacion y dependiendo de su ubicacion que se le abra una pagina u otra.

Gracias.

JORGE ANTICOI

26/01/2017 15:08:01

se puede hacer que solo reciba datos de otra api , como ejemplo patente altitud y longitud???

es necesario tener un server api rest json para recibir esas variables??? , saludos muy buen sitio

JORGE ANTICOI

26/01/2017 15:04:48

se puede hacer que solo reciba datos de otra api , como ejemplo patente altitud y longitud???

es necesario tener un server rest json

Luis

24/01/2017 08:47:55

Desde la versión 50 de Chrome, la geolocalización sólo está disponible para sitios con HTTPS.

Anónimo

24/01/2017 01:26:03

Funcionaba bien y de pronto dejó de funciona en TODO excepto en Mozilla ¿saben que ha pasado? gracias

Anónimo

12/01/2017 17:27:11

Saludos. Por que no funciona en Chrome 55?

Anónimo

06/12/2016 10:46:36

Hola, tengo un sitio web ecommerce. Como podria saber la ubicacion de mi cliente en google map? Es posible crear en mi sitio web un boton de confirmacion de acceso a su ubicacion??

Danilo Castro

17/11/2016 19:26:40

hola me pude ayudar yo puedo conseguir las coordenadas con arduino y el modulo gps pero necesito que esas coordenadas vayan a una app en android y abra un mapa y me de la ubicacion gecias su ayuda

Lucas

17/11/2016 00:18:10

Hola que campo o como podria hacer para guardar la ubicacion del usuario en una variable ?

Lucas

17/11/2016 00:18:09

Hola que campo o como podria hacer para guardar la ubicacion del usuario en una variable ?

Anónimo

07/11/2016 16:00:08

Luis, mil gracias por tu rápida respuesta. Estoy tratando de obtener estos datos desde un form de visual foxpro pero no se porque no me solicita el pedido de confirmación y la pagina por afuera corre perfectamente. Tenes alguna idea de por que será ?

Saludos

Luis

07/11/2016 12:25:34

Hola Anonimo.

No, no se puede evitar la confirmacción de acceso a tu localización.

Un saludo.

Anonimo

07/11/2016 12:15:12

Hola!! se puede evitar por código que el navegador no pida la confirmación de acceso ?

alejo

02/11/2016 02:53:17

buenas noches necesitó ayuda estoy creando una pagina donde el usuario se registre con sus coordenadas y agregue el mensaje cuando el usuario ya existe.

FFUMERO

31/10/2016 19:39:34

Buenas tardes es posible conectar esta api con VBA y usarlos datos en ecel, de ser posible me podrias indicar un ejemplo

gracias

alejandro

29/09/2016 20:44:40

hola tendo mas de 8000 puntos en mi mapa, y en una base datos de excel, pero quiero convertir todas las coordenadas en direcciones, bueno no se si me explique.... en si quiero tener en mi excel las coordenadas con la direccion de cada una

Gustavo

16/08/2016 21:37:38

No funciona en chrome con android

Anónimo

03/08/2016 19:00:27

Soy nueva en esto, no me envía ningun mensaje. solamente debo de agregar la funcion y ya?

Comentario anónimo
Comentar como usuario