Ejemplo de Geolocalización en HTML5


Hoy les traigo una alternativa a la localización geográfica de los usuarios en la red. Hace no muchos artículos atrás les hablé de las soluciones GeoIP, que deducen la ubicación geográfica basado en la dirección IP fuente de los clientes y una base de datos inmensa hosteada en la internet. Soluciones hay muchas y HTML5 no se queda atrás. El HTML del futuro como alguna vez le llamaron ya es presente desde hace algún tiempo. Son variadas las soluciones interesantes y APIs que nos ofrece mientras que la lucha contra la incompatibilidad de los navegadores se va ganando.

La API Geolocation de HTML5 nos devuelve latitud y longitud, es decir las coordenadas más cercanas a la ubicación del cliente. Los métodos que utiliza pueden variar según el navegador y el sistema operativo. Puede utilizar algún tipo de dispositivo GPS, triangulación GSM, resolución inversa de DNS entre otras. Básicamente es un javascript que captura coordenadas y las devuelve para su posterior uso. Hoy día la mayoría de los navegadores y dispositivos móviles lo soportan. Su uso es a través del objeto global navigator y su propiedad geolocation que a su vez devuelve un objeto(service object) con los métodos necesarios para la localización.

Actualmente según w3schools es soportado por los siguientes navegadores:

  • Internet Explorer 9+
  • Firefox
  • Chrome
  • Safari
  • Opera

Les mostraré un ejemplo básico de su uso donde retornaremos las coordenadas(latitud y longitud) del usuario que se encuentre haciendo uso de nuestros servicios.

 <body>
    <p id="salida">Obten tus coordenadas accionando el siguiente boton:</p>
    <button onclick="getLocation()">Aceptar</button>

    <script>
    var x = document.getElementById("salida");
    function getLocation()
    {
      if (navigator.geolocation) // Chequeamos que el navegador soporta geolocation
       {
         // LLama al método getCurrentPosition() el cual retorna la localización geográfica del usuario
         navigator.geolocation.getCurrentPosition(showPosition); 
       } else {
         // Reemplaza el texto original por un mensaje de error informando la incompatibilidad
         x.innerHTML="Geolocation no es soportado por el navegador actual.";} 
       }
    // Reemplaza el texto original con los datos retornados por la API
    function showPosition(position)
    {
      x.innerHTML="Latitud: " + position.coords.latitude + 
      "<br>Longitud: " + position.coords.longitude; 
    }
    </script>

  </body>

 

Ver Demo

 

El elemento salida será reemplazado por el resultado retornado una vez accionado el botón. Tenga en cuenta que en una implementación más profunda puede ser necesario el control de excepciones, es decir, control de errores y rechazos por parte de la API(el servicio no se encuentre disponible desde la localización actual, accesos denegados entre otros.) Como toda API retorna un código de error dependiendo de la problemática. Puedes leer en el siguiente enlace de w3schools un poco más sobre el tema.

El uso de esta herramienta depende completamente del desarrollador. Un ejemplo sería una vez retornada las coordenadas graficarlas con googlemap, un detalle, o simplemente mostrar el país y quizás la ciudad con googlemap también. Hay un detalle interesante, si el cliente se encuentra detrás de alguna VPN o Proxy posiblemente falle el resultado o sea incorrecto por las razones que conocemos, estos servicios ocultan la identidad y el primero encripta la comunicación. Pero solo son excepciones en una regla bastante sólida. Lo demás lo dejo a la imaginación de ustedes, me cuentan luego.

Latest posts by Leroy Ley (see all)