Con el surgimiento de los dispositivos móviles inteligentes, existe una multitud de aplicaciones web que emplean la geolocalización del usuario para ofrecer contenido acorde a su zona, como 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 el comportamiento diferente entre dispositivos móviles y de escritorio.
¿Qué es la geolocalización en JavaScript y cómo funciona realmente?
La Geolocation API de HTML5 permite obtener la posición geográfica del usuario directamente desde el navegador, siempre y cuando se cumplan tres condiciones fundamentales:
- El navegador la soporte (todos los modernos lo hacen).
- El usuario otorgue permiso explícito.
- El sitio esté bajo HTTPS (obligatorio en navegadores modernos).
Cómo obtiene tu navegador la ubicación (GPS, WiFi y redes móviles)
El navegador no depende de una sola fuente: combina varias tecnologías para estimar la posición del usuario con la mayor precisión posible. Las fuentes que utiliza, de mayor a menor precisión, son:
- GPS: muy preciso, ideal en dispositivos móviles con chip GPS.
- Redes WiFi cercanas: buena precisión en interiores y zonas urbanas densas.
- Torres celulares: precisión media, útil cuando no hay GPS ni WiFi disponibles.
- Dirección IP del usuario: la menos precisa, solo aproxima la ciudad o región.
En mi proyecto de tesis, por ejemplo, noté que en interiores la precisión bajaba considerablemente, por lo que tuve que activar el modo de alta precisión (enableHighAccuracy: true) para obtener mejores resultados justo cuando estaba frente a una obra de arte.
Requisitos: HTTPS, permisos del usuario y compatibilidad
- Sin HTTPS, los navegadores modernos bloquean completamente el acceso a la API.
- El usuario puede aceptar o rechazar la solicitud de ubicación en cualquier momento.
- No todos los dispositivos responden igual ni con la misma precisión.
La API de geolocalización en JavaScript
Con la Geolocation API podemos conocer la ubicación geográfica del usuario, siempre y cuando el navegador tenga implementada esta API y el usuario conceda el permiso de acceder a su posición. El acceso a esta API se realiza a través del objeto global navigator.
¿Cómo utilizamos el objeto geolocation?
La API de geolocalización es accesible mediante el objeto navigator de la siguiente forma:
navigator.geolocation
Antes de trabajar con esta API, debemos tener en cuenta dos consideraciones importantes: verificar si el navegador la soporta y estar preparados para gestionar la denegación de permisos por parte del usuario.
Cómo comprobar si la Geolocation API está disponible
Comprobar si el navegador del usuario implementa esta API es esencial para evitar errores de ejecución en el script. La verificación se realiza de la siguiente forma:
if (navigator.geolocation) {
/* la geolocalización está disponible */
} else {
/* la geolocalización no está disponible */
}Un equivalente igualmente válido, usando el operador in, sería:
if ("geolocation" in navigator) {
/* la geolocalización está disponible */
} else {
/* la geolocalización no está disponible */
}El usuario puede denegar o permitir el acceso a su ubicación en cualquier momento. Por este motivo, es recomendable que la geolocalización no sea una función obligatoria para usar la aplicación, sino una mejora progresiva de la experiencia.
Para ambos casos es necesario realizar las validaciones correspondientes. El manejo del segundo escenario (denegación de la solicitud) lo veremos en detalle más adelante, en la sección de manejo de errores.
Comportamientos típicos en desktop vs. móvil
- Desktop: depende más de WiFi y la dirección IP, por lo que la precisión suele ser menor.
- Móvil: excelente precisión gracias al GPS integrado, aunque consume más batería cuando
enableHighAccuracyestá activo.
Cuando hice pruebas en la Ciudad Universitaria para mi tesis, obtuve diferencias de varios metros entre la laptop y el móvil. Este detalle es crítico si trabajas con puntos exactos como esculturas, murales o rutas guiadas.
¿Cómo obtener la ubicación del usuario con navigator.geolocation.getCurrentPosition()?
Podemos acceder a la ubicación del usuario si y solo si el usuario nos ha permitido el acceso y el navegador soporta la API. Esto se realiza mediante el método getCurrentPosition():
navigator.geolocation.getCurrentPosition(
mostrarUbicacion,
manejarError,
{
enableHighAccuracy: true,
timeout: 5000,
maximumAge: 0
}
);Con el método getCurrentPosition() recuperamos la ubicación geográfica actual del usuario. La localización se expresa en coordenadas geográficas y se retorna dentro de un objeto GeolocationPosition (antes denominado Position).
Ejemplo básico: obtener latitud y longitud
En este ejemplo vemos cómo extraer la latitud y la longitud a partir del objeto position que recibe el callback de éxito:
function mostrarUbicacion(position) {
console.log("Latitud:", position.coords.latitude);
console.log("Longitud:", position.coords.longitude);
}Sintaxis del método getCurrentPosition()
navigator.geolocation.getCurrentPosition(callbackExito, callbackError, opciones);Parámetros del método getCurrentPosition()
callbackExito: función que recibirá la información de la localización del usuario mediante un objetoGeolocationPosition. Es el único parámetro obligatorio.callbackError: (opcional) función que recibirá un objetoGeolocationPositionErrorsi ocurre algún error durante la obtención de la localización.opciones: (opcional) objeto de configuración que acepta las siguientes propiedades:enableHighAccuracy: booleano que indica si la aplicación intentará obtener la estimación de localización más precisa posible. Por defecto esfalse; activarlo entruepuede incrementar el tiempo de respuesta y el consumo de batería.timeout: tiempo máximo en milisegundos que el método esperará antes de invocar elcallbackError. Aplica tanto agetCurrentPosition()como awatchPosition().maximumAge: tiempo máximo en milisegundos durante el cual se puede reutilizar una posición almacenada en caché. Si es0, el navegador siempre intentará obtener una posición fresca.
Manejo completo de errores y permisos en la Geolocation API
El objeto GeolocationPositionError que recibe el callbackError expone una propiedad code con tres posibles valores constantes que permiten identificar exactamente qué salió mal:
GeolocationPositionError.PERMISSION_DENIED(código1): el usuario denegó el permiso de acceso a la ubicación.GeolocationPositionError.POSITION_UNAVAILABLE(código2): no es posible determinar la posición del usuario (sin GPS, sin WiFi, etc.).GeolocationPositionError.TIMEOUT(código3): la operación superó el tiempo máximo definido entimeoutsin obtener una posición.
Un manejador de errores completo se vería así:
function manejarError(error) {
switch (error.code) {
case error.PERMISSION_DENIED:
console.error("El usuario denegó el acceso a la ubicación.");
break;
case error.POSITION_UNAVAILABLE:
console.error("La información de ubicación no está disponible.");
break;
case error.TIMEOUT:
console.error("La solicitud de ubicación expiró.");
break;
default:
console.error("Ocurrió un error desconocido.");
}
}Cómo mejorar la precisión sin afectar el rendimiento
Activar enableHighAccuracy: true fuerza al dispositivo a usar el GPS, lo que mejora la precisión pero puede ralentizar la respuesta. Una combinación equilibrada para la mayoría de los casos de uso es:
{
enableHighAccuracy: true,
timeout: 7000,
maximumAge: 10000
}Con esta configuración le damos al dispositivo hasta 7 segundos para responder y permitimos reutilizar una posición que tenga hasta 10 segundos de antigüedad, evitando llamadas GPS innecesarias.
Geolocalización en tiempo real con watchPosition()
Si necesitas rastrear la ubicación de forma continua (por ejemplo, al caminar entre edificios de un campus o durante una navegación paso a paso), el método watchPosition() es tu aliado. A diferencia de getCurrentPosition(), este método continúa ejecutando el callback cada vez que la posición del usuario cambia:
const watchId = navigator.geolocation.watchPosition(
mostrarUbicacion,
manejarError,
{ enableHighAccuracy: true, timeout: 7000, maximumAge: 0 }
);Para detener el seguimiento cuando ya no sea necesario, usa clearWatch() pasándole el ID devuelto:
navigator.geolocation.clearWatch(watchId);Diferencias clave entre getCurrentPosition() y watchPosition()
getCurrentPosition(): obtiene la posición una sola vez y detiene la ejecución.watchPosition(): continúa escuchando y dispara el callback cada vez que la posición cambia.
Casos donde watchPosition() realmente vale la pena:
- Rutas interactivas y navegación en tiempo real.
- Visitas guiadas paso a paso (como la guía de obras de arte que desarrollé).
- Monitoreo de actividad física o deportiva.
En la Ciudad Universitaria usé
watchPosition()durante las pruebas internas para comprobar qué tan rápido reaccionaba el sistema al caminar de una obra a otra. El resultado: en móvil con GPS activo, la respuesta era casi inmediata.
Ejemplo 1: Geolocalización básica con JavaScript
Para obtener la posición del usuario con getCurrentPosition(), primero verificamos que la API esté disponible y luego la invocamos, pasándole como callback la función que recibirá el objeto GeolocationPosition:
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) {
const lat = position.coords.latitude;
const lng = position.coords.longitude;
console.log("Latitud:", lat);
console.log("Longitud:", lng);
});
} else {
console.warn("La Geolocation API no está disponible en este navegador.");
}Como puedes apreciar, primero verificamos si la API de geolocalización está disponible para luego solicitar la ubicación del usuario. Solo si el navegador la soporta procedemos a llamar a getCurrentPosition(), pasándole la función anónima que recibirá el objeto position con las coordenadas.
Ejemplo 2: Geolocalización con manejo completo de errores
En este ejemplo más elaborado tipificamos los errores que pueden ocurrir para ofrecer retroalimentación clara al usuario. Este es el patrón que deberías usar siempre en un proyecto real:
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
function (position) {
console.log("Latitud:", position.coords.latitude);
console.log("Longitud:", position.coords.longitude);
},
function (error) {
switch (error.code) {
case error.PERMISSION_DENIED:
alert("Permiso denegado. Por favor, activa la ubicación en tu navegador.");
break;
case error.POSITION_UNAVAILABLE:
alert("No se pudo determinar tu ubicación.");
break;
case error.TIMEOUT:
alert("La solicitud tardó demasiado. Inténtalo de nuevo.");
break;
}
},
{
enableHighAccuracy: true,
timeout: 7000,
maximumAge: 10000
}
);
} else {
alert("Tu navegador no soporta la Geolocation API.");
}Geolocalización con JavaScript y Google Maps
Google Maps es una herramienta excepcional para visualizar mapas desplazables, calcular rutas entre distintos puntos e integrar puntos de interés. Su API JavaScript está disponible para nuestros proyectos web y se integra perfectamente con la Geolocation API para crear experiencias de mapa ricas y contextuales.
Mostrar la ubicación del usuario en un mapa (Leaflet o Google Maps)
Una aplicación de geolocalización sin mapa se siente incompleta. Existen dos opciones principales para integrarlo: Leaflet (ligero, gratuito y open-source) o la Google Maps JavaScript API (más potente, requiere clave de API). En mi tesis usé Leaflet por su facilidad de uso y porque no requiere ningún coste.
Cargar un marcador en un punto estático con Leaflet:
L.marker([lat, lng]).addTo(map)
.bindPopup("Obra de arte");Centrar el mapa en la posición actual del usuario:
map.setView([userLat, userLng], 16);Integración con Google Maps JavaScript API
En mi proyecto integraba tanto mi posición actual como los puntos de todas las obras del campus, lo que permitía comparar distancias y planear recorridos de forma intuitiva.
Primero, obtenemos la ubicación del usuario y la almacenamos en un objeto de coordenadas:
const myLatlng = {
lat: position.coords.latitude,
lng: position.coords.longitude
};Luego incluimos el script de la Google Maps JavaScript API en nuestro documento HTML. Reemplaza YOUR_API_KEY con tu clave de API real:
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>- Los atributos
asyncydefergarantizan una carga no bloqueante del script. - El parámetro
callback=initMapindica que la funcióninitMap()se ejecutará automáticamente una vez que la API haya terminado de cargarse. - El antiguo parámetro
sensor=falseya no es necesario y puede omitirse.
A continuación, incluimos el contenedor HTML donde se renderizará el mapa:
<div id="map_canvas" style="width:500px; height:500px"></div>El mapa puede tener cualquier dimensión; para este ejemplo usamos 500px × 500px. Lo importante es que el div tenga dimensiones explícitas, de lo contrario el mapa no se renderizará.
Luego construimos el objeto de opciones del mapa:
var mapOptions = {
zoom: 8,
center: { lat: myLatlng.lat, lng: myLatlng.lng },
mapTypeId: google.maps.MapTypeId.ROADMAP
};Los tipos de mapa disponibles en la Google Maps JavaScript API son:
MapTypeId.ROADMAP: muestra la vista de mapa de carretera predeterminada.MapTypeId.SATELLITE: muestra imágenes de satélite de Google Earth.MapTypeId.HYBRID: combina la vista de carretera con imágenes de satélite.MapTypeId.TERRAIN: muestra un mapa físico basado en la topografía del relieve.
Los niveles de zoom disponibles van de 0 (vista más alejada, el mundo entero) a 21 (máximo detalle).
Finalmente, construimos e inicializamos el mapa:
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);Google también promueve un patrón más moderno usando async/await con importación dinámica de bibliotecas, que evita el uso del callback global y es la forma recomendada en proyectos nuevos:
let map;
async function initMap() {
// Importa dinámicamente la biblioteca 'maps'
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
Más allá de hacer funcionar la API, estas son las prácticas que marcan la diferencia en un proyecto profesional:
- Pide permisos en contexto: solicita la ubicación solo cuando el usuario realice una acción que la requiera (ej. al hacer clic en "Ver tiendas cerca de mí"), no al cargar la página.
- Usa
enableHighAccuracycon moderación: actívalo solo cuando la precisión sea crítica para la funcionalidad. - Explica por qué la necesitas: informa al usuario el motivo antes de lanzar el prompt del navegador. Esto aumenta la tasa de aceptación.
- Maneja todos los errores siempre: nunca dejes el
callbackErrorvacío o sin implementar. - No hagas la geolocalización obligatoria: si el usuario la deniega, tu aplicación debe seguir funcionando, aunque con funciones reducidas.
¿Cómo agregar markers (POIs) en Google Maps?
Veremos cómo agregar POIs o markers en Google Maps. Básicamente debemos seguir los pasos que ya conocemos (crear el mapa, definir coordenadas y opciones) y luego instanciar la clase google.maps.Marker. A continuación, un ejemplo completo:
// 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,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// 3. Construcción del mapa
var map = new google.maps.Map(
document.getElementById("map"),
mapOptions
);
// 4. Agregar un Marker (POI)
new google.maps.Marker({
position: myLatlng, // Posición del marker
map: map, // El mapa donde se va a dibujar
title: "¡Mi primera ubicación!"
});
}El flujo es siempre el mismo: establecemos las coordenadas, configuramos las opciones del mapa (zoom inicial, centro y tipo con mapTypeId), construimos el mapa pasándole el div contenedor mediante document.getElementById("map"), y finalmente instanciamos el Marker con su position, el objeto map destino y un title descriptivo.
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 herramienta realmente útil para el visitante.
Con este artículo hemos cubierto desde el acceso básico a navigator.geolocation hasta la integración con Google Maps y el rastreo en tiempo real con watchPosition(). Esta es una de las muchas funcionalidades que nos brinda HTML5 para construir aplicaciones web más inteligentes y contextuales, orientadas a proveer mejores experiencias para el usuario final.
Geolocation API en JavaScript: Guía Completa con Ejemplos Prácticos Aprende a usar la Geolocation API de JavaScript y HTML5 para obtener la ubicación del usuario con navigator.geolocation. Ejemplos reales con getCurrentPosition(), watchPosition() y Google Maps.