DESARROLLO WEB CON HTML 5 Francisco J. Arce Anguiano
Capítulo 1 API de Geolocalización
API de Geolocalización Esta interfaz es una de las mejores, está instalada en los principales navegadores del Mercado: Esta herramienta depende mucho del navegador y del dispositivo en que se ejecute. Si cuenta con un GPS, como en el caso de los teléfonos inteligentes o la mayoría de las tabletas, su ubicación será más exacta. Si ejecuta su aplicación desde una computadora de escritorio, por lo general la ubicación es calculada entre varios nodos de la red, por lo que puede ser más inexacta. También se necesitará de un servicio de terceros, en este caso el Google Maps u otro similar.
1.1 Validar si nuestro navegador tiene el API de Geolocalización La primera actividad que necesitamos realizar es validar que nuestro navegador cuente con ella. Incluso podemos utilizar herramientas como Modernizr.com, la cual nos indicará si tenemos la API o no. Abra una página en blanco con las etiquetas necesarias para HTML5, si su codificador no genera en forma automática estas etiquetas.
Guarde su ejercicio como geolocalzacion01 Guarde su ejercicio como geolocalzacion01.html y cambie su título a “Geolocalización Coordenadas”. En el caso de esta API la validaremos con el objeto de JavaScript navigator. Abra sus etiquetas <script> para escribir el código JavaScript en la sección de <head>. Nuestra validación será muy sencilla, simplemente preguntaremos si el objeto contiene la instrucción “geolocation”. Si la respuesta es positiva, procedemos a preguntarle al usuario si acepta que obtengamos sus coordenadas, de lo contrario enviaremos un mensaje de que el navegador no soporta la API correspondiente, como se muestra en el siguiente listado: 1 <!doctype html> 2 <html> 3 <head> 4 <meta charset=”UTF-8”> 5 <title>Geolocalización Coordenadas</title> 6 <script> 7 if(navigator.geolocation){ 8 alert(“Tu navegador si soporta la Geolocalización”); 9 } else { 10 alert(“Tu navegador NO soporta la Geolocalización”); 11 } 12 </script> 13 </head> 14 <body> 15 </body> 16 </html>
Una vez que vea el resultado, modifique la línea 8 de su listado (el número de línea puede variar dependiendo de su editor) y escriba la instrucción getCurrentPosition() como se muestra en el siguiente listado:
Es obligatorio llamar a este método desde los objetos navigator Es obligatorio llamar a este método desde los objetos navigator.geolocation. Como puede observar, dentro de los paréntesis tenemos una función de call-back. Este método lanza una ventana que solicita la autorización del usuario para darle la localización a nuestra aplicación.
Antes de seguir desarrollando nuestra sencilla aplicación, vamos a agregar las etiquetas HTML con las cuales lanzaremos la solicitud de geolocalización a la computadora o dispositivo.
Pruebe el archivo anterior en todos los navegadores que tenga instalados y verifique su funcionamiento. Una vez que tenemos el esquema básico de nuestra sencilla aplicación, procederemos a obtener las coordenadas y las vaciaremos en variables llamadas lt, de latitud, e ln de longitud. Ambas coordenadas se dan en referencia al meridiano de Greenwich.
Después de recibir un parámetro llamado posicion dentro de la función muestraCoordenadas(). Estos parámetros (veremos otros más adelante) se llaman event objects y poseen información valiosa del evento, en este caso dentro del objeto se almacenan las coordenadas que el navegador calculó. Dentro de este objeto tendremos otro llamado coords, y dentro de éste, dos propiedades llamadas longitude y latitude. Aquí no tenemos la representación visual de las coordenadas, sólo dos números muy largos. Para obtener un mapa necesitamos llamar a una herramienta de terceros (HTML5 no la proporciona). La herramienta más utilizada son los mapas de Google, pero se pueden utilizar otras.
1.2 Control de los errores en la API de geolocalización Una buena API siempre nos indicará cuando las cosas no hayan salido bien. Así que con la geolocalización podremos detectar los siguientes estados:
Función call-back
Función para manejar las excepciones de la Geolocalización
1.3 Desplegar un mapa de Google con las coordenadas de HTML5 Se había comentado que para desplegar un mapa necesitaremos el servicio de un tercero, el más utilizado es el de Google, pero hay varios más. Para este servicio debemos llamar: http://maps.googleapis.com/maps/api/staticmap
Y tenemos que pasar los parámetros: center: con la longitud y la latitud. zoom: acercamiento del mapa size: tamaño del mapa en pixeles sensor: true, se utiliza el GSP, false, no lo utiliza. Este parámetro ya no es requerido. Así que se necesita añadir una división vacía que tenga como identificador mapa para vaciar ahí la imagen del mapa, y en la función muestraCoordenadas() escribir la línea que llama al mapa. Ejecute el <script> en todos los navegadores que tenga.