Día #16 Geolocalización Parte-1 Obteniendo las coordenadas del usuario

Seguimos con la serie de tutoriales de HTML5 y vamos a ver cómo funciona el Localizador en html5. La Geolocalización permitirá a sus visitantes a compartir su ubicación actual por medio de su latitud y longitud (esto si el usuario lo permite), dependiendo de cómo se está visitando su sitio su ubicación puede ser determinada por cualquiera de las siguientes maneras:

  • dirección IP (IP address)
  • Conexión de red inalámbrica (wireless network connection)
  • GPS (GPS hardware on the device)
  • GSM/CDMA Cell IDs

Bueno también el éxito de la Geolocation también depende del navegador que se esté usando, así que vamos a ver cuáles de ellos lo soportan.

Geolocation-soporte-navegadores

La geolocalización es mucho más preciso para los dispositivos con GPS, como el iPhone.

Propiedades de la ubicación:

La posición especifica la ubicación geográfica actual del dispositivo, esta se expresa como un conjunto de coordenadas geográficas junto con la información de partida y velocidad

Geolocation-propiedades

Geolocation nos proporciona los siguientes métodos

Los métodos JavaScript que utiliza para la ubicación de un usuario los hace a través del Geolocation object contenido en window.navigator.geolocation.

Metodos-Geolocalizacion

Bueno, pienso que haciendo más práctico este asunto vamos a entender mejor el funcionamiento de la geolocalización en html5, solo vamos a obtener las coordenadas del usuario y el el segundo tutorial veremos como traducir esto en un mapa de Googlemaps. Vamos a ver el codigo completo y luego vamos a analizarlo.

Ok, vamos a ver qué significa todo este código, vamos a verlo parte por parte.

1 Rutina que obtiene la ubicación del usuario

// Dentro de las etiquetas de <script> Creamos una función llamada localizar, y dentro de ella colocamos navigator.geolocation.getCurrentPosition(mapa,error);que lo que hacemos es llamar la función localización del navegador del usuario y nos va a devolver la longitud y latitud del mismo.

Dentro de getCurrentPosition tenemos la opción de incluir dos funciones que luego ampliaremos, pero la primera se cumple si es posible ubicar a el usuario y la segunda si no se puede, a la primera le llamamos ubicación y la segunda error.

2 Rutina que imprime las coordenadas

// En el código anterior creamos la función ubicación, que nos mostrara la ubicación siempre y cuando no haya algún error, dentro creamos tres variables, que por medio de las coordenadas de las propiedades de ubicación vamos a obtener la ubicación exacta, la primera para obtener la latitud, después la longitud y luego la precisión, esto lo mostramos en una ventana emergente de javascript por medio de un alert. Así, ya podemos obtener la ubicación del usuario.

3 Rutina de error

// Creamos la función error, que es la que tomara el papel principal cuando el método getCurrentPosition tenga problemas para obtener la ubicación. Vemos que tenemos unos errores del 0 al 3,

  • 0: Error desconocido
  • 1: Permiso denegado, el usuario no permite que el navegador envíe datos de geolocalización.
  • 2: No se ha podido obtener una ubicación.
  • 3: Se ha superado el tiempo de espera máximo para obtener la ubicación.

Lo que hacemos es especificar los errores cada uno con su respectivo mensaje a mostrar en caso de que se de alguno.

4

// Luego en el body creamos un botón con el atributo onClick=”localizar()” que lo que hacemos es que cuando la persona de click al botón se ponga en marcha la función madre de todo el código de geolocalizar que hemos creado.



Ten en cuenta que debes de decidir si aceptar o no aceptar el acceso de la geolocalización en tu navegador y si ocurre algún problema revisa los permisos de tu navegador.

Bueno, ya sabemos cómo obtener la ubicación del usuario por medio de coordenadas, En el próximo tutorial veremos cómo utilizar el API de GoogleMaps para ver la ubicación de manera visual por medio de un mapa.

Nos vemos en la segunda parte.

About the author

Johan Ricardo Niebles. Administrador y creador de este blog, Front-end (HTML + CSS + JS).con mas de 4 años de experiencia en el magico mundo web. Johan Ricardo