Sugerencia rápida:detección de su ubicación con JavaScript

La mayoría de los dispositivos modernos son capaces de detectar su propia ubicación a través de GPS, WiFi o geolocalización IP. Los desarrolladores pueden usar esta información para brindar mejores sugerencias de búsqueda, ubicaciones de tiendas cercanas e implementar todo tipo de interacciones de mapas útiles en sus aplicaciones y sitios web.

En el siguiente artículo, vamos a echar un vistazo a una manera fácil y pura de JavaScript de acceder al paradero de un dispositivo sin depender de dependencias externas o servicios de terceros. ¡Comencemos!

Fuentes de ubicación

JavaScript ofrece una herramienta simple pero poderosa para ubicar dispositivos en forma de API de geolocalización. Consiste en un pequeño conjunto de métodos fáciles de usar que pueden obtener la posición del dispositivo a través de los tres servicios mencionados anteriormente:

  • GPS:principalmente en dispositivos móviles, muy preciso hasta 10 metros.
  • WiFi:disponible en la mayoría de los dispositivos conectados a Internet, también muy preciso.
  • Geolocalización de IP:limitada a la región y, a menudo, poco confiable, utilizada como el peor de los casos cuando fallan los otros dos.

Cuando se solicitan datos geográficos, el navegador intentará usar las tres opciones anteriores según lo que esté disponible. Los resultados de la fuente WiFi generalmente se usan, ya que es más rápido que el GPS y mucho más preciso que la geolocalización IP.

Uso de la API de geolocalización

La API de geolocalización tiene compatibilidad casi total con todos los navegadores, pero para asegurarse de que sea accesible para nuestros usuarios, es una buena idea antes de hacer nada para comprobar si el geolocation el objeto existe en el Window.navigator interfaz.

if (navigator.geolocation) {
  // geolocation is available
} 
else {
  // geolocation is not supported
}

Dentro del navigator.geolocation El objeto reside en todos los métodos para la API:

  • Geolocation.getCurrentPosition() - Determina la ubicación actual del dispositivo.
  • Geolocation.watchPosition() - Escucha los cambios en la ubicación e invoca una devolución de llamada en cada movimiento.
  • Geolocation.clearWatch() - Elimina un watchPosition controlador de eventos.

El getCurrentPosition() y watchPosition() Los métodos se utilizan de manera casi idéntica. Ambos funcionan de forma asíncrona, tratando de obtener la posición del dispositivo y, según el resultado del intento, llaman a una devolución de llamada exitosa o una devolución de llamada de error si se proporciona.

navigator.geolocation.getCurrentPosition(

    // Success callback
    function(position) {

        /*
        position is an object containing various information about
        the acquired device location:

        position = {
            coords: {
                latitude - Geographical latitude in decimal degrees.
                longitude - Geographical longitude in decimal degrees. 
                altitude - Height in meters relative to sea level.
                accuracy - Possible error margin for the coordinates in meters. 
                altitudeAccuracy - Possible error margin for the altitude in meters. 
                heading - The direction of the device in degrees relative to north. 
                speed - The velocity of the device in meters per second.
            }
            timestamp - The time at which the location was retrieved.
        }
        */

    },

    // Optional error callback
    function(error){

        /* 
        In the error object is stored the reason for the failed attempt:

        error = {
            code - Error code representing the type of error 
                    1 - PERMISSION_DENIED
                    2 - POSITION_UNAVAILABLE
                    3 - TIMEOUT

            message - Details about the error in human-readable format.
        }
        */

    }
);

Como puede ver, usar la API de Geolocalización es bastante sencillo. Solo tenemos que llamar al método correcto, esperar a que devuelva las coordenadas y luego hacer lo que queramos con ellas.

Permiso de usuario

Dado que la API de geolocalización expone información profundamente personal, cuando una aplicación intenta acceder a ella por primera vez, aparece un cuadro de diálogo solicitando permiso. Esto garantiza que los datos privados de los usuarios no se revelen a menos que lo permitan explícitamente.

El navegador generalmente se encarga de mostrar el cuadro de diálogo, pero el desarrollador también puede solicitar el permiso mediante programación. Esto a veces es necesario, ya que una vez denegado, el cuadro de diálogo original generado por el navegador no se muestra por segunda vez.

Anfitriones seguros

Otra medida de protección es el uso de una conexión HTTPS. Debido a una nueva política de seguridad web, Google Chrome (tanto en la versión de escritorio como en la móvil) ya no permite que los hosts no seguros ejecuten la API de geolocalización. En su lugar, los desarrolladores que deseen utilizar esta función deben servir sus aplicaciones a través de HTTPS, lo que minimiza los riesgos de robo o abuso de los datos de las personas.

Puede obtener más información sobre el problema en esta publicación de blog de Google Developers.

Aplicación de demostración

Para demostrar cómo funciona todo el proceso, hemos creado una aplicación muy simplificada que muestra algunas de las capacidades de la API. Consiste en un botón que, cuando se presiona, toma las coordenadas del dispositivo y las envía a este complemento de GMaps, señalando la ubicación en el mapa.

findMeButton.on('click', function(){

    navigator.geolocation.getCurrentPosition(function(position) {

        // Get the coordinates of the current position.
        var lat = position.coords.latitude;
        var lng = position.coords.longitude;

        // Create a new map and place a marker at the device location.
        var map = new GMaps({
            el: '#map',
            lat: lat,
            lng: lng
        });

        map.addMarker({
            lat: lat,
            lng: lng
        });

    });

});

La demostración, así como el código completo, están disponibles en JSFiddle:

Conclusión

La API de Gelocalización es confiable y está lista para la producción, por lo que lo alentamos a que juegue con ella y vea de lo que es capaz. Si ha visto algunos usos originales de esta tecnología en la web, o si ha creado un proyecto interesante, no dude en compartirlo en la sección de comentarios a continuación. ¡Nos encantaría verlo!