Detectar y mostrar localización geográfica en páginas web

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:

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.

 

Detectar geolocalización y mostrar posición en Google maps directamente en nuestra web.

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.

 

Comentarios