Geolocalización HTML5

La API de Geolocalización del HTML es usada para localizar la posición del usuario.

Localizar la posición del usuario

La API de Geolocalización del HTML es usada para obtener la posición geográfica de un usuario. Dado que esto puede comprometer la privacidad, la posición no esta disponible a menos que el usuario lo apruebe.

Nota: La Geolocalización es más precisa en los dispositivos con GPS, como los smartphone.

Nota: En algunos navegadores web solo funcionará la API de Geolocalización en contextos seguros como HTTPS. En contexto no seguros como HTTP las solicitudes pueden ser ignoradas y/no funcionar.

Usando la Geolocalización HTML

El método getCurrentPosition() es usado para retornar la posición del usuario.

En el siguiente ejemplo retorna la posición en latitud y longitud del usuario:

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

Explicación del ejemplo:

• La función getLocation() primero checa si la Geolocalización es soportada, si es así, llama a la función getCurrentPosition(), si no, muestra un mensaje al usuario en elemento "demo".
• La función getCurrentPosition retorna un objeto de coordenadas a la función especificada en el parámetro (showPosition).
• La función showPosition() muestra el mensaje con la Latitud y Longitud.

Este ejemplo es script muy básico de Geolocalización, que carece de manejadores de error.

Manejando errores y rechazos

El segundo parámetro de la función getCurrentPosition(showPosition,showError) es usado para manejar errores. Esto especifica una función para correr si falla la obtención de la localización del usuario:

function showError(error){
  switch(error.code){
    case error.PERMISSION_DENIED:
      x.innerHTML = "Usuario denego la solicitud de Localización"
      break;
    case: error.POSITION_UNAVAILABLE:
      x.innerHTML = "La localización esta disponible"
      break;
    case error.TIMEOUT:
      x.innerHTML = "Error desconocido"
      break;
  }
}

Visualizar el resultado en un mapa

Para visualizar el resultado en un mapa, es necesario a un servicio de mapas, como Google Maps.

En el siguiente ejemplo, la latitud y longitud retornadas es usado para mostrar la localización en Google Map, usando una imagen estática:

function showPosition(){
  var latlon = position.coords.latitude + "," + position.coords.longitude;
  var img_url = "https://maps.googleapis.com/maps/api/"staticmap?center="
  + latlon + "&zoom=14&size=400x300&sensor=false&key=YOUR_:KEY";

  document.getElementById("mapholder").innerHTML = "<img src=" + img_url + ">";
}

Información específica de la ubicación

La Geolocalización es también muy útil para la información especifica como:

• Información local actualizada.
• Mostrar puntos de interés cerca del usuario.
• Navegación paso a paso con GPS.

La función getCurrentPosition() retorna datos

La función getCurrentPosition() retorna un objeto en caso de éxito. Las propiedades latitud, longitud y precisión siempre son retornadas. Las otras propiedades son retornadas solo si están disponibles:

Propiedad	Retorna
coords.latitude	La latitud como un número decimal (siempre retornado).
coords.longitude	La longitud como un número decimal (siempre retornado).
coords.accuracy	La precisión de la posición (siempre retornado).
coords.altitude	La altitud en metros sobre el nivel del mar (retornado si esta disponible).
coords.altitudeAccuracy	La precisión de altitud de la posición (retornado si esta disponible).
coords.heading	El rumbo en grados en sentido de las manecillas del reloj desde el norte (retornado si esta disponible).
coords.speed	La velocidad en metros por segundo (retornado si esta disponible).
timestamp	La fecha/hora de respuesta (retornado si esta disponible).

El Objeto Geolocalización y otras funciones interesantes

El objeto Geolocalización también tiene otras funciones interesantes:

• watchPosition() - Retorna la posición actual del usuario y continúa retornando la posición actualizada mediante usuario se mueve, como el GPS en un auto.
• clearWatch() - Detiene la función watchPosition().

En el siguiente ejemplo muestra la función watchPosition(). Se necesita un dispositivo GPS preciso para probar esto, como un teléfono inteligente:

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