La API de geolocalización de javascript le permite a los sitios web tener acceso a la ubicación de los usuarios, pero no te preocupes, tu ubicación no es revelada si tú no das permisos para que el sitio web pueda verla. De seguro has visto estas notificaciones al abrir un sitio.
¿Qué necesitamos saber para obtener la ubicación del usuario? Primeramente si el navegador soporta la API. Aquí puedes ver una lista de los navegadores que actualmente si soportan la API.
- Chrome 5
- Firefox (Gecko) 3.5(1.9.1)
- Internet Explorer 9
- Opera 10.60
- Safari 5
Para saber si tu navegador soporta la API puedes ejecutar navigator.geolocation.
Para comenzar a programar utilizando la API vamos a validar que el navegador la soporte de la siguiente manera :
if ("geolocation" in navigator) { /* Yeih! habemus geolocalización */ } else { /* el navegador no soporta la geolocalización*/ }
Una vez que sabemos que el navegador soporta la API, ¿Cómo sabemos cuál es la ubicación del usuario? Fácil, con la función getCurrentPosition() la cual puede recibir hasta 3 parámetros, de los cuales, los dos últimos son opcionales.
La función getCurrentPosition() inicia una solicitud asincrónica para detectar la ubicación del usuario. Cuando se ha determinado la posición del usuario se ejecuta la primer función, que se envía como parámetro y si se desea se puede agregar una segunda función que será ejecutada al ocurrir un error. El tercer parámetro, también opcional, es un objeto, en el cual, se especifican el tiempo de espera para la solicitud, la precisión y la edad máxima de una posición devuelta.
Además notifica al usuario que se quiere tener acceso a su ubicación para que este pueda permitir o rechazar la solicitud, como vimos en la primer imagen.
Aquí tenemos un ejemplo muy sencillo para acceder a la ubicación:
/* se ejecuta si los permisos son concedidos y se encuentra una ubicación*/ function onSucccess(position) { console.log(position.coords.latitude, position.coords.longitude); } /*se ejecuta si el permiso fue denegado o no se puede encontrar una ubicación*/ function onError() { console.log("ocurrio un error o no hay permisos para ver la ubicación"); } var config = { enableHighAccuracy: true, maximumAge : 30000, timeout : 27000 }; /*así llamamos la función getCurrentPosition*/ navigator.geolocation.getCurrentPosition(onSucccess, onError, config );
El objeto recibido en la función onSuccess tiene la siguiente estructura:
position:{ coords: { accuracy: 259897 altitude: null altitudeAccuracy: null heading: null latitude: 32.4852472 longitude: -116.9163936 speed: null } timestamp: 1549735567865 }
La primera vez que se ejecute la función getCurrentPosition se mostrará la alerta para que el usuario decida si quiere dar permiso de ubicación al sitio. Si el usuario no permite el acceso a la ubicación y en su lugar lo bloquea, no importa cuantas veces trates de ejecutar la función getCurrentPosition el navegador guardará la configuración de bloqueo para el sitio y será el usuario quien deberá cambiar sus preferencias para el sitio manualmente.
Ahora ya tienes las herramientas para divertirte con la API de geolocation.
Puedes revisar la documentación oficial aqui API GEOLOCATION
