Codificación aprenderaprogramar.com: CU01197E
GEOLOCALIZACIÓN Y MAPAS CON JAVASCRIPT
En los últimos años ha tenido un gran auge el uso de mapas interactivos, sistemas de información geográfica, aplicaciones para smartphones que ayudan a calcular rutas o que muestran información sobre una ciudad o un monumento basándose en la localización geográfica. Existen herramientas JavaScript preparadas para aplicaciones de este tipo.
Las herramientas que incorporan los navegadores modernos relacionadas con geolocalización se han llamado “Api geolocation”. Los navegadores modernos junto con herramientas que facilitan empresas como Google dan pie a que los programadores puedan incorporar esta potencialidad en desarrollos web y apps para smartphones.
EL OBJETO NAVIGATOR.GEOLOCATION
El objeto navigator.geolocation nos facilita métodos para trabajar con la geolocalización del usuario. Tener en cuenta que muchos navegadores están configurados para impedir que se aplique la geolocalización (detección de la ubicación del usuario) por motivos de privacidad. Por tanto los resultados obtenidos pueden ser:
a) Podemos obtener la geolocalización (el usuario tiene configurado el navegador para permitirlo).
b) La geolocalización se obtiene sólo si después de que se pida permiso al usuario para facilitar su localización, el usuario da una respuesta positiva.
c) No se puede obtener la geolocalización (el usuario tiene configurado el navegador para no permitirlo).
|
Método de navigator.geolocation |
Descripción aprenderaprogramar.com |
|
getCurrentPosition (funcionDeProceso, funcionDeError, configuration) |
Devuelve la información sobre la localización del navegador. Sólo es obligatorio incluir la funcionDeProceso. Esta función es la función que recibirá como parámetro la información de geolocalización devuelta por el método. Si se incluye funcionDeError, esta es la función a la que se enviará un objeto de tipo PositionError que lleva la información relativa al error que se ha producido. El parámetro configuration permite pasar un objeto con información de configuración relacionada con la geolocalización (como enableHigAccuracy para obtener máxima precisión, timeout para indicar el tiempo máximo de espera ó maximumAge para indicar el tiempo máximo que se almacenarán ubicaciones obtenidas en caché). |
|
watchPosition (funcionDeProceso, funcionDeError, configuration) |
Revisa la localización del navegador periódicamente e informa sobre cambios en la localización. Sólo es obligatorio incluir la funcionDeProceso. Esta función es la función que recibirá como parámetro la información de geolocalización devuelta por el método. Este método está pensado para smartphones o tablets donde el usuario se va desplazando y cambiando su localización. |
|
clearWatch(id) |
El valor de retorno de watchPosition puede ser almacenado en una variable de la misma forma que se hacía con setInterval(). La vigilancia puede detenerse usando el método clearWatch de forma similar a como se usa el clearInterval. |
Veamos brevemente un ejemplo que nos dé una idea de qué es y para qué sirve geolocation. Escribe este código en en editor de textos y guárdalo con un nombre de archivo como ejemplo1.html:
|
<!DOCTYPE html> <html lang="es"> <head><meta charset="utf-8"><title>Curso JavaScript aprenderaprogramar.com</title> <script type="text/javascript"> function iniciar(){ var boton=document.getElementById('obtener'); boton.addEventListener('click', obtener, false); }
function obtener(){navigator.geolocation.getCurrentPosition(mostrar, gestionarErrores);}
function mostrar(posicion){ var ubicacion=document.getElementById('localizacion'); var datos=''; datos+='Latitud: '+posicion.coords.latitude+'<br>'; datos+='Longitud: '+posicion.coords.longitude+'<br>'; datos+='Exactitud: '+posicion.coords.accuracy+' metros.<br>'; ubicacion.innerHTML=datos; }
function gestionarErrores(error){ alert('Error: '+error.code+' '+error.message+ '\n\nPor favor compruebe que está conectado '+ 'a internet y habilite la opción permitir compartir ubicación física'); }
window.addEventListener('load', iniciar, false);
</script> </head> <body> <div id="localizacion"> <button id="obtener" style="margin:30px;">Obtener mi localización</button> </div> </body> </html> |
El resultado esperado depende de la configuración del usuario: si el usuario admite facilitar su ubicación el resultado obtenido será del tipo:
|
Latitud: 67.3409361 Longitud: -52.9290236 Exactitud: 44 metros. |
Estos valores reflejan la posición geográfica del usuario. Podemos hacer uso de ellos por ejemplo para mostrar un mapa de la zona donde se encuentra el usuario. Esto lo haríamos modificando el código anterior de la siguiente manera:
Ahora bien, con el código anterior estamos mostrando una imagen. ¿Podemos incluir un mapa interactivo de Google en nuestra página web? La respuesta es que sí, como veremos a continuación.
USO DE GOOGLE MAPS PARA MOSTRAR UN MAPA INTERACTIVO
Google permite el uso de su api de mapas para mostrar mapas en páginas web. Existen multitud de posibilidades: crear mapas temáticos, cromáticos, personalizados, rutas, etc. y podemos mostrar una zona del mundo, un país, ciudad o calles. También podemos crear efectos y dibujar sobre los mapas. Nosotros en este curso no vamos a estudiar el api de Google Maps en profundidad, simplemente mostraremos un ejemplo para ejemplificar que es muy sencillo y tiene grandes posibilidades el uso de maps en nuestros sitios web.
Escribe este código en en editor de textos y guárdalo con un nombre de archivo como ejemplo2.html:
|
<!DOCTYPE html> <html> <head> <title>Simple Map</title> <meta charset="utf-8"><title>Curso JavaScript aprenderaprogramar.com</title> <style> *{font-family:sans-serif;} h1 {margin: 150px 0 30px 0; text-align:center; } #lienzoMapa {width:800px; height:600px; margin: 0 auto; border: 5px solid; } </style> <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script> <script> var map; function initialize() { var mapOptions = { zoom: 4, center: new google.maps.LatLng(9.814103, -83.118708) }; map = new google.maps.Map(document.getElementById('lienzoMapa'), mapOptions); } google.maps.event.addDomListener(window, 'load', initialize); </script> </head> <body> <h1>Utiliza el mapa</h1> <div id="lienzoMapa" ></div> </body> </html> |
El resultado esperado es que se muestre un mapa en el cual podemos desplazarnos, hacer zoom, e incluso llegar a la vista de “street view” o visión fotográfica de una localización.
Para saber las coordenadas de un lugar, podemos acceder a la web de google maps, situarnos sobre el sitio deseado, pulsar botón derecho y elegir ¿Qué hay aquí?. Se nos mostrará la dirección y coordenadas del lugar.
Hay que tener en cuenta que hemos indicado la posibilidad de obtener coordenadas del usuario o de obtener coordenadas buscándolas en Google Maps. ¿Hay más formas de obtener coordenadas? Sí. Además de JavaScript, existen otras vías para hacer geolocalización. Por ejemplo usando la IP del usuario, que puede determinarse usando lenguajes del lado del servidor como PHP, o usando servicios web de geolocalización.
PARA QUIEN QUIERA INVESTIGAR
Para quien quiera investigar y profundizar en las posibilidades del api de Google Maps puede visitar la documentación del api: https://developers.google.com/maps/documentation/javascript/
EJERCICIO
Crea una página web donde se muestre información sobre tu ciudad conteniendo un mapa interactivo de Google Maps, de acuerdo con esta estructura para el documento HTML.
|
Visita aquiElNombreDeTuCiudad |
|
|
Aquí un texto descriptivo sobre la ciudad |
|
|
Aquí una imagen de tu ciudad |
Aquí otra imagen de tu ciudad |
|
Aquí más texto descriptivo sobre la ciudad |
|
|
Aquí un mapa interactivo de Google Maps dimensiones 800x600 pixeles de tu ciudad |
|
|
Aquí un pie de página |
|
Para comprobar si tus respuestas y código son correctos puedes consultar en los foros aprenderaprogramar.com.
Para acceder a la información general sobre este curso y al listado completo de entregas pulsa en este link: Ver curso completo.
Para hacer un comentario o consulta utiliza los foros aprenderaprogramar.com, abiertos a cualquier persona independientemente de su nivel de conocimiento.
