Geolocalización HTML5

HTML5 Geolocation (geolocalización) se utiliza para localizar la ubicación del usuario.

Pruebe usted mismo: muestre su ubicación en Google Maps

Ubicar la ubicación del usuario

La API de geolocalización de HTML5 se utiliza para obtener la ubicación geográfica del usuario.

Dado que esta característica puede violar la privacidad del usuario, la información de ubicación del usuario no está disponible a menos que el usuario lo apruebe.

Compatibilidad del navegador

Internet Explorer 9, Firefox, Chrome, Safari y Opera admiten la geolocalización.

Nota:Para dispositivos con GPS, como el iPhone, la geolocalización es más precisa.

HTML5 - Uso de geolocalización

Utilice el método getCurrentPosition() para obtener la ubicación del usuario.

El siguiente ejemplo es una instancia simple de geolocalización que puede devolver la latitud y longitud de la ubicación del usuario.

Ejemplo

<script>
var x=document.getElementById("demo");
function getLocation()
  {
  if (navigator.geolocation)
    {
    navigator.geolocation.getCurrentPosition(showPosition);
    }
  else{x.innerHTML="Geolocalización no es compatible con este navegador.";}
  }
function showPosition(position)
  {
  x.innerHTML="Latitud: " + position.coords.latitude +
  "<br />Longitud: " + position.coords.longitude;
  }
</script>

Prueba en vivo

Explicación del ejemplo:

  • Detectar si se admite la geolocalización
  • Si se admite, se ejecuta el método getCurrentPosition(). Si no se admite, se muestra un mensaje al usuario.
  • Si getCurrentPosition() se ejecuta con éxito, devuelve un objeto coordinates al función especificada en el parámetro showPosition
  • La función showPosition() obtiene y muestra la latitud y longitud

El ejemplo anterior es un script básico de geolocalización sin manejo de errores.

Manejo de errores y denegación

El segundo parámetro del método getCurrentPosition() se utiliza para manejar errores. Especifica la función que se ejecutará cuando se falla en obtener la ubicación del usuario:

Ejemplo

function showError(error)
  {
  switch(error.code)
    {
    case error.PERMISSION_DENIED:
      x.innerHTML="El usuario ha denegado la solicitud de geolocalización."
      break;
    case error.POSITION_UNAVAILABLE:
      x.innerHTML="La información de ubicación no está disponible."
      break;
    case error.TIMEOUT:
      x.innerHTML="El tiempo de solicitud para obtener la ubicación del usuario se agotó."
      break;
    case error.UNKNOWN_ERROR:
      x.innerHTML="Ocurrió un error desconocido."
      break;
    }
  }

Prueba en vivo

Código de error:

  • Permiso denegado - El usuario no permite la geolocalización
  • Ubicación no disponible - No se puede obtener la ubicación actual
  • Timeout - Operación timeout

Mostrar resultados en el mapa

Para mostrar los resultados en el mapa, debe acceder a un servicio de mapas que utilice coordenadas, como Google Maps o Baidu Maps:

Ejemplo

function showPosition(position)
{
var latlon=position.coords.latitude+","+position.coords.longitude;
var img_url="http://maps.googleapis.com/maps/api/staticmap?center="
+latlon+"&zoom=14&size=400x300&sensor=false";
document.getElementById("mapholder").innerHTML="<img src='"+img_url+"' />";
}

Prueba en vivo

En el ejemplo anterior, usamos los datos de longitud y latitud devueltos para mostrar la ubicación en Google Maps (usando imágenes estáticas).

Script de Google Maps

El siguiente enlace le muestra cómo usar un script para mostrar un mapa interactivo con opciones de marcador, escala y arrastrar.

Información sobre el punto de ubicación

Esta página muestra cómo mostrar la ubicación del usuario en el mapa. Sin embargo, la geolocalización es igualmente útil para obtener información sobre un punto específico.

Ejemplo:

  • Actualiza la información local
  • Muestra los puntos de interés cercanos al usuario
  • Sistema de navegación vehicular interactivo (GPS)

Método getCurrentPosition() - Datos devueltos

Si tiene éxito, el método getCurrentPosition() devuelve un objeto. Siempre se devuelven los atributos latitude, longitude y accuracy. Si están disponibles, también se devuelven las siguientes propiedades.

Atributo Descripción
coords.latitude Latitud decimal
coords.longitude Longitud decimal
coords.accuracy Precisión de ubicación
coords.altitude Altitud, medida en metros sobre el nivel del mar
coords.altitudeAccuracy Precisión del altitud de la ubicación
coords.heading Dirección, desde el norte magnético en grados
coords.speed Velocidad, en metros por segundo
timestamp Fecha/hora de respuesta

Objeto Geolocalización - Otros métodos interesantes

watchPosition() - Devuelve la posición actual del usuario y sigue devolviendo actualizaciones de posición del usuario mientras se mueve (como un GPS en un coche).

clearWatch() - Detener el método watchPosition()

El siguiente ejemplo muestra el método watchPosition(). Necesitarás un dispositivo GPS preciso para probar este ejemplo (por ejemplo, iPhone):

Ejemplo

<script>
var x=document.getElementById("demo");
function getLocation()
  {
  if (navigator.geolocation)
    {
    navigator.geolocation.watchPosition(showPosition);
    }
  else{x.innerHTML="Geolocalización no es compatible con este navegador.";}
  }
function showPosition(position)
  {
  x.innerHTML="Latitud: " + position.coords.latitude +
  "<br />Longitud: " + position.coords.longitude;
  }
</script>

Prueba en vivo