Geolocalización con JavaScript y HTML5

Con el surgimiento de los dispositivos móviles inteligentes existen multitud de aplicaciones web que emplean la localización del usuario para ofrecer contenido acorde a la zona como lo es Twitter, Facebook y varios servicios de Google.

La geolocalización se ha vuelto una de las funciones más útiles en aplicaciones web modernas. Desde mapas interactivos hasta recomendaciones basadas en ubicación, JavaScript ofrece una forma sencilla —pero potente— de acceder a la posición del usuario mediante la Geolocation API.

En mi caso, llegué a dominar esta API porque la usé en mi tesis, donde necesitaba mostrar las obras de arte distribuidas por toda la Ciudad Universitaria. Fue ahí cuando descubrí detalles finos como permisos, precisión y comportamiento distinto entre móvil y escritorio.

¿Qué es la geolocalización en JavaScript y cómo funciona realmente?

La Geolocation API permite obtener la posición del usuario desde el navegador, siempre y cuando:

• El navegador la soporte.
• El usuario otorgue permiso.
• El sitio esté bajo HTTPS (obligatorio).

Cómo obtiene tu navegador la ubicación (GPS, WiFi y redes móviles)

El navegador combina distintas fuentes:

• GPS (muy preciso, ideal en móviles)
• Redes WiFi cercanas
• Torres celulares
• IP del usuario (menos preciso)

En mi proyecto de tesis, por ejemplo, noté que en interiores la precisión bajaba, por lo que tuve que ajustar la configuración de alta precisión para obtener mejores resultados cuando justo estaba frente a una obra.

Requisitos: HTTPS, permisos del usuario y compatibilidad

• Sin HTTPS, el navegador no devuelve ubicación.
• El usuario puede aceptar o rechazar la solicitud.
• No todos los dispositivos responden igual.

La API de geolocalización en JavaScript

Con la geolocalización podemos conocer la ubicación geográfica del usuario, siempre y cuando el navegador del usuario tenga implementada esta API y el usuario nos da el permiso de acceder a su ubicación.

¿Como utilizamos el objeto geolocation?

La API de geolocalización la podemos acceder a través del objeto navigator de la siguiente forma:

navigator.geolocation

Debemos de tener dos consideraciones antes de trabajar con esta API:

Cómo comprobar si la Geolocation API está disponible

Comprobar si el navegador del usuario tiene implementada esta API; y esto es para evitar errores de ejecución del script; lo comprobaremos de la siguiente forma:

if(navigator.geolocation){
   /* la geolocalizacion esta disponible */
}else{
   /* la geolocalizacion no esta disponible */
}

O un equivalente del mismo sería:

if ("geolocation" in navigator)
   /* la geolocalizacion esta disponible */
}else{
   /* la geolocalizacion no esta disponible */
}

El usuario puede denegar o permitir el acceso a su ubicación; por lo tanto es recomendable que esta funcionalidad no tenga que ser obligatoria para que el usuario utilice la aplicación, sólo para mejorar la experiencia del mismo.

Para ambos casos debemos de realizar las validaciones necesarias para evitar problemas en la ejecución; para validar el segundo caso (denegación de la solicitud por parte del usuario) la veremos más adelante.

Comportamientos típicos en desktop vs móvil

• Desktop: depende más de WiFi → menor precisión.
• Móvil: excelente precisión con GPS, pero consume más batería.

Cuando hice pruebas en la Ciudad Universitaria para mi Tesis, muchas veces obtuve diferencias de varios metros entre laptop y móvil. Esto importa si trabajas con puntos exactos como esculturas, murales o rutas.

¿Cómo obtener la ubicación del usuario con el objeto navigation.getCurrentPosition()?

Podemos acceder a la ubicación del usuario si y sólo si el usuario nos permitió el acceso a su ubicación y el navegador soporta dicha característica empleando el método getCurrentPosition():

navigator.geolocation.getCurrentPosition(
  mostrarUbicacion,
  manejarError,
  {
    enableHighAccuracy: true,
    timeout: 5000,
    maximumAge: 0
  }
);

Con el método getCurrentPosition() podemos recuperar la ubicación geográfica actual del usuario; la localización es expresada en coordenadas geográficas retornada en un objeto Position.

Ejemplo básico con latitud y longitud

En este ejemplo, vemos como podemos obtener la latitud y longitud en base a la ubicación del usuario:

function mostrarUbicacion(position) {
 console.log("Latitud:", position.coords.latitude);
 console.log("Longitud:", position.coords.longitude);
}

Sintaxis del método getCurrentPosition() de JavaScript

getCurrentPosition(MostrarLocalizacion, ManejadorErrores, opciones);

Parametros del metodo getCurrentPosition() de JavaScript

• MostrarLocalizacion : El método que recibirá la información de la localización del usuario; y esto mediante un objeto Position.
• ManejadorErrores : (opcional) El método que recibirá el objeto PositionError si ocurre un error en la localización del usuario.

Manejo completo de errores y permisos en la Geolocation API

El objeto PositionError puede retornar:

• PositionError.PERMISSION_DENIED: El usuario no permitió la localización.
• PositionError.POSITION_UNAVAILABLE: No es posible obtener la posición del usuario.
• PositionError.TIMEOUT: La operación se le acabó el tiempo y no puede continuar.
• opciones :(opcional) Especifica un conjunto de opciones para recuperar la data:
  • frequency: Con que frecuencia recuperaremos la posición del usuario dado en milisegundos (por defecto 10000).
  • enableHighAccuracy: Es un booleano que indica que la aplicación intentará ofrecer la estimación de localización más precisa posible.

Por defecto es falso (false); hay que tener en cuenta que si activamos este modo (true) puede incrementar el tiempo de respuesta.

• timeout: El tiempo que dejaras pasar en milisegundos para que el método geolocation.getCurrentPosition o geolocation.watchPosition nos dé una respuesta; dicho tiempo es dado en milisegundos.
• maximumAge: Especifica el tiempo transcurrido en milisegundos para la información de ubicación almacenada en caché.

Cómo mejorar la precisión sin afectar el rendimiento

Una combinación equilibrada suele ser:

{
 enableHighAccuracy: true,
 timeout: 7000,
 maximumAge: 10000
}

Geolocalización en tiempo real con watchPosition()

Si necesitas actualizar la ubicación constantemente (por ejemplo, al caminar entre edificios del campus), usa:

navigator.geolocation.watchPosition(...)

Diferencias con getCurrentPosition()

• getCurrentPosition(): solo una vez.
• watchPosition(): cada vez que cambia la ubicación.
• Casos donde sí vale la pena:
• rutas interactivas
• visitas guiadas paso a paso
• monitoreo de actividad

En la Ciudad Universitaria lo usé para pruebas internas al caminar entre obras, comprobando qué tan rápido reaccionaba el sistema.

Ejemplo 1: Geolocalización básica

Para obtener la posición del usuario mediante el método getCurrentPosition() de JavaScript podemos hacer lo siguiente:

Como podemos apreciar primero verificamos si el API de geolocalización está disponible para luego solicitar la ubicación del usuario con el método getCurrentPosition(); pasándole como parámetro la función que recibirá el objeto Position llamada MostrarLocalizacion.

Ejemplo 2: Geolocalización básica y manejo de errores

Ahora veremos un ejemplo un poco más elaborado; en donde tipificamos los errores que puedan ocurrir, veamos:

Geolocalización con JavaScript y Google Maps

Google Maps es una excelente herramienta para visualizar mapas desplazables e inclusos rutas entre distintos puntos; esta excelente herramienta esta disponible para utilizar en nuestro proyectos web, en esta entrada veremos como utilizar Google Maps en nuestros proyectos web.

Mostrar la ubicación en un mapa con JavaScript (Leaflet o Google Maps)

Una aplicación sin mapa se siente incompleta. Usé Leaflet en mi tesis por ser ligero y gratuito.

Cargar puntos estáticos en el mapa

L.marker([lat, lng]).addTo(map)
 .bindPopup("Obra de arte");

Centrar el mapa según la posición del usuario

map.setView([userLat, userLng], 16);

Google Maps

Aquí integraba tanto mi posición como los puntos de todas las obras del campus, permitiendo comparar distancias y planear recorridos.

Obtener la ubicación del usuario, tema ya explicado en el artículo pasado Geolocalización con JavaScript:

myLatlng = {
	Lat: position.coords.latitude,
	Lng: position.coords.longitude
}

Incluimos un enlace al API de Google Maps en nuestro documento HTML para poder utilizarla:

<script async defer
  src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>

• Reemplaza YOUR_API_KEY con tu clave.
• Se recomienda el uso de async y defer para la carga no bloqueante.
• Se usa el parámetro callback=initMap para que la función initMap() (la que inicializa tu mapa) se ejecute automáticamente una vez que la API se haya cargado completamente.
• El parámetro sensor=false (que solía ser común) ya no es necesario.

Luego incluimos el lienzo (canvas) en donde se dibujara el mapa:

<div id="map_canvas" style="width:500px; height:500px"></div>

Nótese que el mapa puede ser de distintos tamaños; para efectos de este ejemplo será de 500px X 500px.

El penúltimo paso consiste en construir el objeto utilizado para la manipulación de las opciones del mapa:

var mapOptions = {
  zoom: 8,
  center: { lat: myLatlng.Lat, lng: myLatlng.Lng }, // Formato preferido
  mapTypeId: google.maps.MapTypeId.ROADMAP
};

Tipos de mapas que se encuentran disponibles en el API de Google Maps:

• MapTypeId.ROADMAP muestra la vista de mapa de carretera predeterminada.
• MapTypeId.SATELLITE muestra imágenes de satélite de Google Earth.
• MapTypeId.HYBRID muestra una mezcla de vistas normales y de satélite.
• MapTypeId.TERRAIN muestra un mapa físico basado en información del relieve.

Los niveles de zoom posibles oscilan entre 0 y 21 para el más lejano.

El último paso consiste en construir el mapa:

var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

Google ahora promueve el uso de un patrón async/await en conjunto con el cargador de la API o la importación de bibliotecas. Esto es más avanzado, pero útil para evitar el uso del callback global:

let map;
async function initMap() {
 // Importa la biblioteca 'maps' y 'marker'
 const { Map } = await google.maps.importLibrary("maps"); 
 
 map = new Map(document.getElementById("map_canvas"), {
   center: { lat: myLatlng.Lat, lng: myLatlng.Lng },
   zoom: 8,
 });

Buenas prácticas de geolocalización en proyectos reales

• Pide permisos solo cuando el usuario lo necesite.
• Usa enableHighAccuracy con moderación.
• Informa al usuario por qué quieres su ubicación.
• Maneja errores siempre.
• Evita depender únicamente de la geolocalización para navegación crítica.

¿Cómo agregar markers (POIs) en Google Maps?

Veremos como agregar POIs o los llamados markers en Google Maps; en un artículo pasado titulado Geolocalización Con JavaScript Y Google Maps vimos como crear un mapa de Google Maps en una página web; básicamente necesitamos seguir los siguientes pasos:

// La función se llama automáticamente después de cargar el API.
function DibujarMapa() {
    // 1. Coordenadas (Usando 'lat' y 'lng' en minúsculas y como números)
    const myLatlng = {
        lat: 10.49063,
        lng: -66.886965
    };
    // 2. Opciones del Mapa
    var mapOptions = {
        zoom: 15,
        // El API acepta el objeto literal {lat, lng} directamente
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    // 3. Construcción del mapa
    var map = new google.maps.Map(
        document.getElementById("map"),
        mapOptions
    );
    
    // 4. (Bonus) Agregando el Marker (POI)
    // Para agregar el marker, que era el objetivo original del artículo, 
    // debes instanciar la clase Marker
    new google.maps.Marker({
        position: myLatlng, // Posición del marker
        map: map,           // El mapa donde se va a dibujar
        title: "¡Mi primera ubicación!"
    });
}

• Primero establecemos las coordenadas en donde posicionamos la cámara:     

  • // coordenadas    myLatlng = {        Lat: "10.49063",        Lng: "-66.886965"    };

Lo siguiente es configurar las opciones del mapa: zoom inicial, posición y el tipo de mapa son algunas de ellas:     // Objeto utilizado para la manipulación de las opciones del mapa.

   var mapOptions = {
        zoom: 15,
        center: new google.maps.LatLng(myLatlng.Lat, myLatlng.Lng),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

• Ahora indicamos en donde se dibujara el mapa, en el div anterior:     

  • // construyo el mapa    map = new google.maps.Map(document.getElementById("map"),mapOptions);

Conclusión

La Geolocation API es sencilla de usar, pero sacarle el máximo provecho requiere entender permisos, precisión, rendimiento y manejo de errores. En mi experiencia desarrollando la guía de obras de arte de la Ciudad Universitaria, estos detalles marcaron la diferencia entre un mapa “bonito” y una experiencia realmente útil.

Con este artículo podemos ver una de las muchas funcionalidades que nos brinda HTML5 para el desarrollo de aplicaciones web para proveer mejores experiencias para el usuario final.