Integrar geolocalizacion en una web HTML5

Actualizado el domingo, 19 junio, 2016

Hay varias formas de determinar la localización y ubicación geográfica de las personas cuando acceden a internet. Es sumamente útil para los sitios y empresas en internet que ofrecen servicios que difieren de acuerdo a la ubicación de los visitantes. Podemos determinar y mostrar la localización de nuestros lectores en las páginas de nuestro blog o sitio de internet, para realizar distintas acciones, ofrecer contenido o mensajes de acuerdo al país, un formato o lenguaje diferente, etc. y de esa forma hacerlas más útiles, dinámicas y atractivas.

Con el API podemos acceder al objeto navigator.geolocation, el cual se encarga de la mayoría del trabajo “sucio” por nosotros. Simplemente debemos verificar si el browser soporta la geolocalización de HTML5 y automáticamente solicitará permiso al usuario para obtener su ubicación. Si el usuario acepta, llamamos a la función navigator.geolocation.getCurrentPosition con los siguientes parámetros:

1. Función a ejecutar si se pudo acceder a la ubicación del usuario.
2. Función a ejecutar si ocurrió algún error.
3. Objeto que brinda opciones para activar el modo de máxima exactitud, tiempo de espera en milisegundos y cada cuanto refrescar la cache de la última posición encontrada.

El código necesario para obtener la longitud y latitud de la posición del usuario sería:

<script type="text/javascript">// <![CDATA[
if (navigator.geolocation) {
  var tiempo_de_espera = 3000;
  navigator.geolocation.getCurrentPosition(mostrarCoordenadas, mostrarError, { 
  enableHighAccuracy: true, timeout: tiempo_de_espera, maximumAge: 0 } );
   }
   else {
     alert("La Geolocalización no es soportada por este navegador");
   }
   
   function mostrarCoordenadas(position) {
     alert("Latitud: " + position.coords.latitude + ", Longitud: " + position.coords.longitude);
   }
   
   function mostrarError(error) {
     var errores = {1: 'Permiso denegado', 2: 'Posición no disponible', 3: 'Expiró el tiempo de respuesta'};
     alert("Error: " + errores[error.code]);
   }
   // ]]></script>

 

Agregar comentario