Hola, somos Arume

Desarrollamos páginas web, aplicaciones para móviles, capas de realidad aumentada y aplicaciones para Facebook. Nos apasiona la informática y somos unos perfeccionistas incurables; por eso en nuestros proyectos utilizamos estándares.

tel. 625 519 694

Mendaña de Neyra, 34, 3º B, 15008, A Coruña

Autenticarse

Registrarse. ¿Has olvidado tu contraseña?

Etiquetas

Saltar las etiquetas

Suscríbete a las RSS

Estás en:

  • Inicio >
  • Blog >
  • HTML5: API de geolocalización (Geolocation API)

HTML5: API de geolocalización (Geolocation API)

17 Ene 2013 por Luis

Comentarios: 47

HTML5

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

Comentarios

47 comentarios. Comentar.

1. trompo2 el 09 Ago 2013 a las 14:45:45

Muy interesante, de momento te dejo en favoritos, ...

Estoy pensando ...

Se le podrían pasar las coordenadas a google?

2. Luis el 13 Ago 2013 a las 19:09:07

Hola trompo2.

Supongo que te refieres a utilizar estas coordenadas para mostrar la posición del usuario en Google Maps o a conseguir la dirección del usuario con ellas.

Por supuesto esto se puede hacer: el primer caso con la API de Google Maps y el segundo con la API de Geocoding.

3. Rodrigo el 07 Nov 2013 a las 18:06:30

Hola! cómo hago para poner algún punto de interés.. es decir, si tengo mi página y quiero que un cliente al ver su ubicación, pueda ver qué tan lejos está mi negocio

Gracias! :D

5. Ime el 03 Dic 2013 a las 06:28:47

Hola,

Tendras un ejemplo de geocodig inverso, donde tu le pongas la dirección y te regrese las coordenadas??

6. Luis el 12 Dic 2013 a las 13:13:53

Hola Ime.

Por supuesto, en esta misma página:

http://www.arumeinformatica.es/utiles/buscar-coordenadas-...

Un saludo.

7. Anónimo el 19 Dic 2013 a las 17:05:05

Presionando un botón de buscarme tengo que levantar el domicilio y cargarlo en un text, hay ejemplos que me puedan guiar?

8. Luis el 20 Dic 2013 a las 11:05:37

Hola Anónimo.

Lee el siguiente artículo al respecto: http://www.arumeinformatica.es/blog/obtener-direccion-pos...

Un saludo.

9. Daniela el 01 Oct 2014 a las 23:31:45

Hola, me parece muy interesante tu publicación y sobre todo muy bien explicada, soy nueva en todo esto, y me pregunto si es posible que me registre en mi servidor cada que alguien abra mi pagina que me deje las coordenadas de latitud y longitud en mis logs de mi server es posible??? de antemano gracias por tomarte el tiempo de responder

10. Irene. el 22 Mar 2015 a las 18:40:49

hola buenas¡ Genial el articulo es justo lo que buscaba.. aunque ando un poco perdida en todo esto. Quiero hacer un GPS con arduino. Mas bien un navegador, es decir, enviar desde Arduino mis coordenadas para despues plasmarlas en un mapa. Y mi pregunta es,¿ Es posible hacerlo a tiempo real? ¿Que me vaya mostrando la posicion que voy siguiendo?? Gracias¡¡

11. Javillo - Javier_priego_1@hotmail.com el 29 May 2015 a las 13:35:02

Es posible, actualmente estoy realizando un proyecto que tiene esa funcionalidad. En arduino.

12. jose eulogio ubidia casallo el 25 Jun 2015 a las 16:08:43

hola

sobre el arduino es posible que usted me prepare que el arduino que envie un gps aun celular y aun panel de contro que yo tengo en vivo colocando un boton pulsador de panico queria cuanto me costaria la aplicacion uno pulsa el boton de panico y al toque envia la ubicacion pero acopñañado d de una informacion de datos del usuario claro que tiene que tener el aruino para colocar un usuario y para colocar telefono y direccion espero su repuersta pronto

14. Anónimo el 24 Jul 2015 a las 20:30:36

es como el que usa la NSA

15. David Guerra el 06 Ago 2015 a las 23:57:36

Hola, estoy desarrollando una pagina web, pero quiero que cuando una persona entre a mi pagina, a mi me llegue un email con su ubicación. Alguien me puede ayudar?

16. oswal el 13 Ago 2015 a las 19:31:03

buenas tardes me gustaria saber si me pueden colaboraran con un codigo para localizacion de usuarios con dispositivo movil en la zona no mayor a 3000 mts a la redonda agradezco su colaboracion

17. cristian el 24 Ago 2015 a las 21:07:29

amigos

agradecere su ayuda, necesito guardar en txt o algo asi la pisicion de los visitantes y poder mostrarlos todos en un solo mapa, asi puedo saber a que distancia esta uno de otro.

es posible??

desde ya gracias

ca3bkn@gmail.com

18. Reinaldo el 05 Oct 2015 a las 19:28:04

Hola, estoy desarrollando una pagina web, pero quiero que cuando una persona entre a mi pagina, a mi me llegue un email con su ubicación. Alguien me puede ayudar?

19. Axel el 19 Nov 2015 a las 22:57:36

Hola estoy usando my maps y tengo puntos en todo el país. Me interesa que del estado donde lo vean se acerque a esa zona,¿Se puede?

20. Luis el 19 Nov 2015 a las 23:34:41

Hola Axel.

Una vez que tienes la posición del usuario con el código que explicamos en este artículo, sólo tienes que centrar el mapa y hacer zoom sobre ese punto.

Si estás utilizando Google Maps (no se qué es my maps), es sólo utilizar las funciones setCenter y setZoom.

Un saludo.

21. Locke Yen el 10 Dic 2015 a las 15:22:52

Hola.

Estoy trabajando en una web y me gustaría que la geolocalización la determinara el propio usuario. Es decir, el usuario seleccionaría un lugar concreto en el mapa. La idea es que, de una forma sencilla y amigable, cada usuario marcara su propio lugar en el mapa, y fuera visible para el resto de usuarios.

Como soy muy novato, agradecería una ayuda en este sentido.

Muchas gracias.

Jose

22. Anónimo XD el 17 Dic 2015 a las 18:37:27

exste alguna manera de no pedir confirmacion al usuario?

23. GF el 02 Feb 2016 a las 00:22:13

Hola estoy intentando hacer un área con las coordenadas que obtengo con este codigo, pero no encuentro información al respecto, necesito ayuda.

24. Betuel Turrubiarte el 06 Abr 2016 a las 05:52:11

hola yo no soy programador pero quiero una app para pedir plomeros o electricistas, con funcionalidades como si se pidiera un taxi, que me mande la ubicacion del usuario a mi cel. y poderle enviar la mia para confirmar que voy para alla, algo aprecido a uber, o easytaxi. como sera el codigo? espero me puedas apoyar.

saludos

26. Anónimo el 22 Abr 2016 a las 22:47:52

hay alguna forma de colocar el mapa de google con todas las opciones de rutas

27. Anónimo el 03 Ago 2016 a las 19:00:27

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

28. Gustavo el 16 Ago 2016 a las 21:37:38

No funciona en chrome con android

29. alejandro el 29 Sep 2016 a las 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

30. FFUMERO el 31 Oct 2016 a las 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

31. alejo el 02 Nov 2016 a las 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.

32. Anonimo el 07 Nov 2016 a las 12:15:12

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

33. Luis el 07 Nov 2016 a las 12:25:34

Hola Anonimo.

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

Un saludo.

34. Anónimo el 07 Nov 2016 a las 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

35. Lucas el 17 Nov 2016 a las 00:18:09

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

36. Lucas el 17 Nov 2016 a las 00:18:10

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

37. Danilo Castro el 17 Nov 2016 a las 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

38. Anónimo el 06 Dic 2016 a las 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??

39. Anónimo el 12 Ene 2017 a las 17:27:11

Saludos. Por que no funciona en Chrome 55?

40. Anónimo el 24 Ene 2017 a las 01:26:03

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

41. Luis el 24 Ene 2017 a las 08:47:55

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

42. JORGE ANTICOI el 26 Ene 2017 a las 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

43. JORGE ANTICOI el 26 Ene 2017 a las 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

44. David el 02 May 2017 a las 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.

45. Anónimo el 24 May 2017 a las 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?

46. Anónimo el 06 Jun 2017 a las 22:16:51

Gracias maestro exelente

47. Corina el 05 Jul 2017 a las 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)

48. Oniel el 30 Jul 2017 a las 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.

49. angel32 el 30 Sep 2017 a las 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

50. oskar el 29 Oct 2017 a las 06:15:37

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

o solo los numeros'

Comentar

Comentar de forma anónima

Puedes comentar poniendo cualquier nombre o apodo, exceptuando los nombres de usuarios registrados. Máximo de 50 caracteres.

Comentar como usuario registrado

Registrarse. ¿Has olvidado tu contraseña?