Inicia sesión


Introducción a geolocalización API de JavaScript

Introducción a geolocalización  API de jаvascriptEl API de geolocalización de jаvascript permite acceder a la información de localización geográfica del dispositivo desde el que se visita una web. Esta información se obtiene de diversas fuentes, por ejemplo, de la dirección IP, de la torre de conexión móvil o de las coordenadas GPS. jаvascript puede acceder así a la latitud y longitud del dispositivo y enviarlas al servidor web dónde se pueden utilizar con fines muy diversos, la mayoría relacionados con ofrecer recursos personalizados y cercanos al usuario.

El API de geolocalización es soportado por todos los navegadores principales, incluido microsoft edge +, Firefox 68+, Chrome 75 + y Safari 12 +. Si estás interesado en una alternativa para navegadores y plataformas que no soporten el API de forma nativa, échale un vistazo a geolocation.js en Github.

Privacidad


Antes de meternos de lleno en el tema hagamos un alto para atender a la privacidad. Hoy en día se le da mucha importancia a la privacidad del usuario y personalmente aún creo que debería protegerse más y que queda mucho por hacer. En cuánto al Geolocation API, has de saber que es de tipo opt-in, es decir, su uso es completamente opcional y ha de ser aprobado por el usuario.

En otras palabras, ningún navegador forzará al usuario a enviar su geolocalización sin preguntar primero. El navegador ha de lanzar un aviso alertando sobre una web que quiere acceder a los datos de geolocalización, decir específicamente de que web se trata y dar las opciones de aprobar o rechazar dicho acceso. La aprobación por parte del usuario ha de ser obligatoria, sin ninguna opción de que la web puede saltársela. Además, Chrome, Firefox y WebKit solo aceptan el uso de este API bajo HTTPS.

¿Cómo se utiliza y que información se puede obtener?


El API de geolocalización se basa completamente en la propiedad geolocation del objeto global navigator: navigator.geolocation. Este propiedad tiene tres métodos:

getCurrentPosition( successCallback, errorCallback, options )


El método getCurrentPosition se utiliza para acceder a la posición actual del dispositivo. Puede admitir uno, dos o tres parámetros:

  • successCallback: obligatorio. Función callback que recibe el objeto Position con la información de posición actual en caso de que se obtenga correctamente.
  • errorCallback: opcional. Función callback en caso de error. Recibe un objeto Positionerror.
  • options: opcional. objecto con opciones. Entre las opciones que se pueden especificar están timeout (tiempo máximo de espera en milisegundos para recibir la información de localización. Por defecto es infinito), enableHighAccuracy (true/false, el dispositivo intentará obtener los datos más exactos posibles, puede alargar el tiempo de respuesta. Por defecto es false) y maximumAge (tiempo de caché de la información expresado en milisegundos, por defecto es cero, valor que deshabilita la caché).

El objeto Position


Hemos dicho que sucessCallback recibe un objeto Position con la información de posición actual. La información disponible en este objeto es:

  • coords.latitude: grados decimales
  • coords.longitude: grados decimales
  • coords.altitude: metros
  • coords.accuracy: metros
  • coords.altitudeAccuracy: metros
  • coords.heading: grados en sentido horario desde el norte verdadero
  • coords.speed: metros por segundo
  • timestamp: objeto Date() con la fecha y hora del dispositivo

El objecto Positionerror


El objeto de error que recibe errorCallback tiene estas dos propiedades:

  • code: código de error
  • message: mensaje de error correspondiente

Ejemplo

var options = {
  enableHighAccuracy: true,
  timeout: 6000,
  maximumAge: 0
};

navigator.geolocation.getCurrentPosition( success, error, options );

function success(position) {
  var coordenadas = position.coords;

  console.log('Tu posición actual es:');
  console.log('Latitud : ' + coordenadas.latitude);
  console.log('Longitud: ' + coordenadas.longitude);
  console.log('Más o menos ' + coordenadas.accuracy + ' metros.');
};

function error(error) {
  console.warn('ERROR(' + error.code + '): ' + error.message);
};

watchPosition( successCallback, errorCallback, options )


El método watchPosition hace lo mismo que getCurrentPosition: registra un callback que recibe la posición y, opcionalmente, un callback en caso de error y un objeto de opciones. La diferencia es que el callback registrado por watchPosition se llama automáticamente cada vez que el dispositivo cambia de posición y genera un identificador de la operación:
var watchId = navigator.geolocation.watchPosition( success, error, options );

clearWatch( watchId )


Con este método se cancela el proceso iniciado con watchPosition e identificado con watchId:
//Inicia un proceso y se almacena el identificador
//en la variable watchId
var watchId = navigator.geolocation.watchPosition( success, error, options );

//Cancela el proceso
navigator.geolocation.clearWatch( watchId );

Ejemplo: mostrar ubicación actual en Google maps


Utilizando el Geolocation API y Google Maps API podemos mostrar la ubicación del usuario en mapa.
google.maps.event.addDomListener(window, 'load', mapInitialize);

function mapInitialize() {
  if(navigator.geolocation) {
    navigator.geolocation.getCurrentPosition( set_position_in_google_map );
   } else {
     alert("Tu navegador no soporta el API de geolocalización. Actualiza a un navegador más moderno.");
   }
}
function set_position_in_google_map( position ) {
  var crds = position.coords;
  var mapPosition = new google.maps.LatLng(crds.latitude, crds.longitude);
  var mapOptions = {
    zoom: 15,
    center: mapPosition
  };
  var map = new google.maps.Map(
    document.getElementById('map-canvas'),
    mapOptions
   );
   var infowindow = new google.maps.InfoWindow({
     map: map,
     position: mapPosition,
     content: 'Localización encontrada utilizando Geolocation API.'
   });

}

Referencias


Geolocation API specifications. W3C Recommendation.
Mark Pilgrim. «You Are Here (And So Is Everybody Else)». Dive Into HTML5, capítulo 6.


  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-08-06
  • Categorias: Diseño Web Lenguajes De Programacion javascript WebSite webmasters Noticias Tutorial




Información
Usuarios que no esten registrados no pueden dejar comentarios, te invitamos a que te registre!






Efectos jQuery - Ocultar y mostrar

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-11-17
  • Categorias: Diseño Web Lenguajes De Programacion html5 jQuery WebSite webmasters Noticias Tutorial

Como abrir un enlace con jQuery

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-11-17
  • Categorias: Diseño Web Lenguajes De Programacion html5 jQuery WebSite webmasters Noticias Tutorial

Cómo rastrear a los usuarios de Adblock usando Google Analytics

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-11-15
  • Categorias: Google WebSite Trucos y tips Noticias Tutorial

Curso de iniciación de JavaScript

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-10-21
  • Categorias: Lenguajes De Programacion javascript Cursos Noticias Tutorial

Cómo insertar código JavaScript

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-10-21
  • Categorias: Lenguajes De Programacion javascript Cursos Noticias Tutorial

Expresiones JavaScript para especificar valores de atributos en HTML

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-10-21
  • Categorias: Lenguajes De Programacion javascript Cursos Noticias Tutorial