En este tutorial conoceremos que es la API de Geolocalización de HTML5, descubrirás si es compatible con tu navegador y te mostraremos un ejemplo de Geolocation para que puedas practicar y aprender.

Siguiendo con nuestro contenido sobre API’s de HTML5 que deberías conocer, en esta ocasión hablaremos sobre Geolocation, esta API (Application Programming Interface) nos permitirá conocer la ubicación geográfica del usuario y por motivos de seguridad requiere la autorización del mismo.

Al tener identificada la zona geográfica donde se encuentra nuestro usuario podremos brindarle por ejemplo determinados productos y servicios, que podrán ser aprovechados de la mejor manera por estos.

En la actualidad todos o la gran mayoría de los navegadores más importantes son compatibles con esta API como podemos ver a continuación:

• Chrome 5
• Firefox 3.5
• Internet Explorer 9
• Safari 5
• Opera 10.60

Veamos ahora cómo podemos usar esta API.

Primero debemos saber si nuestro navegador soporta esta API, para ello en un archivo JavaScript vamos a escribir la siguiente condicional, en donde nos retornará una alerta indicándonos si nuestro navegador soporta o no esta API: Esta página te mostrará una alerta indicando si hay soporte.

Una vez seguros que nuestro navegador soporta esta API, pasaremos a encontrar nuestra ubicación usando el método getCurrentPosition() el cual consulta la posición del usuario y devuelve un objeto con coordenadas “getCurrentPosition(showPosition)”, el cual muestra la ubicación en latitud y longitud.

Para entenderlo mejor, pueden ver el siguiente ejemplo:

See the Pen mEoOEJ by Wilder Alexander Guevara Benites (@kusillus) on CodePen.

Para trabajar con el API de Geolocation sin ningún problema necesitas trabajar con HTTPS, esto es principalmente por un tema de seguridad ya que algunos navegadores no ofrecen soporte para sitios no seguros HTTP, como en el caso de Chrome a partir de la versión 50 ya no ofrece soporte a la API para sitios no seguros.

El método getCurrentPosition() maneja tres parámetros que son:

navigator.geolocation.getCurrentPosition(funcionExito, funcionError, Opciones)

• funcionExito: Se ejecuta cuando se obtiene un objeto Position como parámetro de entrada.
• funcionError: Se ejecuta cuando se obtiene un objeto PositionError como parámetro de entrada, es opcional el definirlo, pero hacerlo es considerado una buena práctica.

Opcionalmente podemos establecer tres parámetros que son.

• Timeout: Tiempo máximo que se espera para obtener las coordenadas, de exceder se ejecuta PositionError, su valor se define en milisegundos.
• enableHighAcurrency: Le indica al navegador que utilice una fuente de información exacta, los valores que maneja son TRUE o FALSE.
• maximumAge: Indica que tan vieja puede ser la información antes de volver a calcularla, al igual que Timeout el tiempo se expresa en milisegundos.

Y con esto terminamos este pequeño tutorial de como usar la API de Geolocalización, aún quedan muchas cosas por hablar y aprender sobre esta API, para esto te invitamos a registrarte en el Curso de APIs de HTML5 que tenemos en la plataforma, donde podrás aprender en detalle más sobre esta y otras APIs más de HTML5.

Espero que el tutorial te haya sido de utilidad, este fue @kusillus, nos vemos en la próxima.