by En ocasiones necesitamos saber la ubicación de un usuario que visita una página web. Aquí te mostraremos como hacer una función mediante la API de geolocalización del W3C.
La API de geolocalización permite al usuario compartir su ubicación a las aplicaciones web si así lo desea. Por razones de privacidad, al usuario se le pide que confirme el permiso para proporcionar información de ubicación.
La función «navigator.geolocation.getCurrentPosition()» devuelve las siguientes variables:
- position.coords.latitude – latitud
- position.coords.longitude – longitud
- position.coords.altitude – altura
- position.coords.accuracy – exactitud estimada
Ejemplo para detectar y mostrar localización geográfica.
Con un editor de texto como bloc de notas, creamos un archivo llamado index.html e ingresamos el siguiente código:
| 123456789101112131415161718192021222324252627282930 | <!DOCTYPE HTML><html> <head> <title> Geolocalización </title> <!– Script para mostrar las coordenadas–> <script type=»text/javascript»> if (navigator.geolocation) { //Validar si hay acceso web a la ubicación navigator.geolocation.getCurrentPosition(mostrarUbicacion); //Obtiene la posición } else { alert(«¡Error! Este navegador no soporta la Geolocalización.»); } //Funcion para obtener latitud y longitud function mostrarUbicacion(position) { var latitud = position.coords.latitude; //Obtener latitud var longitud = position.coords.longitude; //Obtener longitud var div = document.getElementById(«coordenadas»); div.innerHTML = «<br>Latitud: » + latitud + «<br>Longitud: » + longitud; //Imprime latitud y longitud } </script> </head> <body> <!– División o secciona para mostrar coordenadas –> <div id=’coordenadas’></div> </body></html> |
En el ejemplo anterior creamos una función para obtener las coordenadas y las mostramos en un div.
Abrimos el archivo index.html con un navegador y nos solicitara permiso para acceder a nuestra ubicación.
Al permitir el acceso a nuestra ubicación nos mostrara la latitud y longitud geográfica, expresada en grados (WGS84).
Abrimos Google Maps e introducimos la latitud y longitud en el cuadro de búsqueda y presionamos buscar. Nos mostrara nuestra ubicación en el mapa.
En este ejemplo vamos a detectar la latitud, longitud y mostrar la ubicación en Google Maps utilizando la API.
En este ejemplo utilizamos la API de Google maps solo para mostrar la ubicación en el mapa sin embargo la localización es obtenida mediante la API de Geolocalización del W3C.
Nota: A partir de Chrome 50, la API de geolocalización sólo funcionará en contextos seguros, como HTTPS. Si su sitio está alojado en un origen no seguro (como HTTP) las solicitudes para obtener la función de la ubicación de los usuarios ya no.
