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.
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!
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.
Pingback: 99 utilidades HTML5 y CSS3 | ceslava | diseño & cursos
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
Dasandro,
1-Para centrar el mapa según los marcadores tienes que establecer los límites del mapa a partir de ellos, aquí hay un ejemplo:
http://stackoverflow.com/questions/1556921/google-map-api-v3-set-bounds-and-center
2-Para centrarlo según la posición del usuario sigue los pasos exactos del ejemplo de este tutorial, está explicado paso a paso. Recuerda que necesitas un doctype html5.
Ok, Gracias por la solucion, pues el fallo era no darle el doctype de html 5
Me lo había imaginado, me alegro que te sirviera.
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
Te remito a la respuesta al comentario de Natan (http://www.atrioweb.com/blog/html5/geolocalizacion-con-html5#comment-57): Tendrías que crear una base de datos con los sitios de interés cercanos, y cargarla en un mapa Google desde un archivo xml.
Aquí por ejemplo hay un tutorial que puede orientarte: https://developers.google.com/maps/articles/phpsqlajax?hl=es
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
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.
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.
🙂 Salu2.
Pingback: 99 + 13 recursos HTML5 y CSS3 - WordPress Random Themes
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
correcto Héctor, si copias y pegas el código en un html te funcionará. Saludos y gracias.
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?
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.
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
Bueno, en principio NO es posible pasar tal cual una variable javascript a php porque el php se ejecuta en el servidor ANTES que el javascript que se ejecuta en el navegador del visitante. Lo que tendrías que hacer es añadir una función que envíe por ejemplo mediante AJAX la variable javascript ( en este caso ) al servidor y recogerla en otra página. En el siguiente enlace tienes un ejemplo aproximativo:
http://stackoverflow.com/questions/6110140/javascript-variable-to-php-using-jquery-ajax
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
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???
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
PORQUE TT PORQE AMI ES AL UNICO QE NO LE VA BIEN?
cuando te copio eso me sale esto:error unfined: unfined
Prúebalo en un móvil, a veces en los PCs no coge la posición.
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
la razon no es esa , google chrome con varias api estan exigiendo seguridad y para que una aplicacion se ejecute se requiere una https y no http, solo a manera a prueba permiten en un servidor local localhost/prueba.html
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?
Hay que capturar los datos via AJAX y llevarlos a una página php y allí programas lo que quieras (meterlos en una base de datos. enviarlos como email…).
Tienes un ejemplo (expuesto ya en un comentario más arriba) de cómo hacerlo aqui:
http://stackoverflow.com/questions/6110140/javascript-variable-to-php-using-jquery-ajax
Las coordenadas de posición del usuario están en la variable JS
latlngTienes la opción (si usas PHP) en pasar los datos a PHP de lat y lng así…
$var_php = » document.write(variable); «;
Un saludo y espero que te sirva.
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?
isaak, la respuesta es la misma del anterior comentario,
gracias
Hola tengo una duda , estoy realizando un proyecto de geolocalizacion . lo que obtengo el valor de la latitud y longitud de una persona , para luego guardar los datos en BD . haciendo las pruebas pertinentes en mi navegador y en otros pc todo funciona bien , pero al realizar la misma función con el navegador de un dispositivo mobile no es capas de obtener las latitud ni la longitud . no ejecuta el codigo , como que no lo reconoce alguien me podria dar una mano . de antes mano muchas gracias.
Hola, todo bien, muy interesante, pero dime; si estas conectado por WIFI y ese WIFI tiene en el router una IP XX, puede que esta esté en un lugar muy diferente a donde esta uno realmente. Te cuento porque ese problema lo he tenido con el tema WIFI solamente…
Un abrazo.
Podrías explicar un poco más e tema de mandar las coordenadas por mali? Me he mirado el post a comentas y no termino de entenderlo. Sabes de algún ejemplo que pueda ver como esta hecho? Sino es así, te sabria mal hacer uno?
Muchas gracias, nuevamente un gran post!
Muy buen post. He creado uno parecido, pero que muestra la información de la posición como el cp, la ciudad y la província sacada de google maps y un link al mapa -> http://www.webcamp.es/geolocalizador-con-php-ajax-y-google-maps/
Epero que os guste 🙂
Está muy bien santiago camp, gracias por compartirlo aquí.
Excelente Post, pero el link para ver el demo no funciona. ¿Podrias abilitarlo?
Yo estoy investigando sobre geolocalizacion para mi trabajo de grado, que consiste en base a la ubicacion del usuario recomiende algunos sitios cercanos de interes.
Espero que puedas seguir publicando mas sobre geolocalizacion estare pendiente a tu respuesta.
Gracias Ana,
El link para ver el demo sí funciona correctamente.
Veo que recomiendas seguir el tutorial de vistarural.com pero ese sitio ya no existe.
Sabes si está en algún otro sitio?
Saludos.
Estoy intentando realizar un sitio que haga una búsqueda de los lugares más cercanos
Lo siento Rafa, pero vistarural.com está efectivamente offline, así que he retirado el texto correspondiente. De todas formas aquí tienes un ejemplo para hacer lo que deseas:
http://stackoverflow.com/questions/21279559/geolocation-closest-locationlat-long-from-my-position
Muchísimas gracias. Con eso quedó ya mi website.
Estuve haciendo algunas pruebas y en el ordenador no tengo ningun problema pero al momento de hacerlo por medio de un telefono movil no funciona a q se debe eso ?? el resultado es ERROR UNDEFINED
utilizo PHP y no he podido lograrlo.
cual es la forma que al recibir las coordenas de posicion de un usuario puedan ser enviadas a un e-mail?
o a un archivo.txt los logs de las ubicaciones gps.
Hace mucho tiempo estoy y no logro, tengo el mapa la aplicacion funciona todo bien pero no puedo en mi server dejar logs de las coordenadas de visita de los usuarios.
Tendrías que añadir una función que envíe por ejemplo mediante AJAX la variable javascript al servidor y recogerla en otra página. En el siguiente enlace tienes un ejemplo aproximativo:
http://stackoverflow.com/questions/6110140/javascript-variable-to-php-using-jquery-ajax
Gracias por la respuesta David!!! voy a revisarlo y te comento
saludos
Amigo, pero solo funciona bien con chrome!!! en firefox no me detecta el error!!! y en chrome si!!!! que puedo hacer?
Hola. Muy interesante el artículo. Te consulto: cual es el código javascript para obtener las coordenadas de una MAC de un router. Quiero hacer un sistema q me indique la ubicación de mis clientes. Las MAC ya las poseo. Es posible hacer esto? Gracias
porque ahora no puedo cargar el mapa en google crome?
me dice una nota
El usuario ha denegado el permiso a la localización
saludos!
Hola Luis. Está muy bueno el post. Aunque debo decirte que a mí el codigo me da un error[undefined]. Igual sirve de punto de partida. Ahora mi consulta se refiere al tipo de mapa que se puede vincular a este código. ¿Sólo sirve para Google Maps o para otros mapas on-line también?
Desde ya gracias.
saludos.
buen día, espero me puedas ayudar, requiero obtener la ciudad apartir de la geolcalizacion es para un proyecto de un buscador de casas en renta, y me gustaria que cuando el usuario entrara automaticamente lo llevara a buscar a su ciudad, por ahora lo tengo con IP pero no es exacto. saludos
трулисити казахстан – мунджаро инструкция, саксенда купить +в турции
перейдите на этот сайт https://pinup-play-game.space/ru/cash-it-crash-game-with-a-potential-win-multiplier-of-x5000/