La geolocalización es una funcionalidad para determinar la ubicación geográfica de un usuario. Es posible usar JavaScript para obtener la ubicación para mostrar mapas, recomendaciones locales entre otros.
API de Geolocalización
La API de Geolocalización es una interfaz que permite acceder a la ubicación del usuario usando tecnologías como GPS, Wi-Fi y dirección IP. Se accede llamando a la propiedad navigator.geolocation. Por motivos de seguridad para acceder a la información de ubicación, se solicita permiso al usuario.
Métodos disponibles
getCurrentPosition(): obtiene la ubicación actual del usuario.watchPosition(): crea un listener para obtener cualquier cambio de ubicación.clearWatch(): elimina el listener que detecta los cambios de ubicación.
Ubicación del usuario
Para obtener la ubicación del usuario se usa el método getCurrentPosition():
navigator.geolocation.getCurrentPosition(success, error, options)
Donde los parámetros son:
success: Una función callback que maneja la posición obtenida.error: Una función callback que maneja posibles errores.options: Un objeto (opcional) con configuraciones adicionales:
Ejemplo:
navigator.geolocation.getCurrentPosition(
(position) => {
// success
console.log(position.coords);
console.log("Latitud:", position.coords.latitude);
console.log("Longitud:", position.coords.longitude);
},
(error) => {
// error
console.error("Error en la geolocalización:", error.message);
}
);
Con lo cual obtenemos el siguiente resultado:
Ubicación en tiempo real
Si necesitas actualizar la posición de forma continua, usa watchPosition():
navigator.geolocation.watchPosition(success, error, options)
Ejemplo:
const watchId = navigator.geolocation.watchPosition(
(position) => {
// success
console.log("Latitud:", position.coords.latitude);
console.log("Longitud:", position.coords.longitude);
},
(error) => {
// error
console.error("Error en la geolocalización:", error.message);
},
{
enableHighAccuracy: true
}
);
// Para detener el rastreo:
navigator.geolocation.clearWatch(watchId);
Manejo de errores
Si falla la geolocalización los códigos de error disponibles son:
PERMISSION_DENIED: El usuario no permitió el acceso a la ubicación.POSITION_UNAVAILABLE: El dispositivo no puede determinar la ubicación.TIMEOUT: La solicitud superó el tiempo de espera.
Ejemplo
function handleError(error) {
switch (error.code) {
case error.PERMISSION_DENIED:
console.error("Permiso denegado.");
break;
case error.POSITION_UNAVAILABLE:
console.error("Ubicación no disponible.");
break;
case error.TIMEOUT:
console.error("La solicitud expiró.");
break;
default:
console.error("Error desconocido.");
}
}
Ejemplo práctico
Vamoa a mostrar la ubicación del usuario en el mapa con el API de Google Maps.
1.- Preparar el Mapa
Lo primero es incluir un mapa con el API de Google Maps, inicialmente se mostrará todo el mundo centrado en (0, 0) y con un zoom de 2.
Notar que API_KEY es tu llave para usar Google Maps, si deseas conocer más sobre como usar el API de Google Maps puedes leer: Cómo integrar y personalizar Google Maps en tu Sitio Web.
<div id="map"></div>
<script>
let map, marker;
async function initMap() {
const { Map } = await google.maps.importLibrary("maps");
const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
map = new Map(document.getElementById("map"), {
zoom: 2,
center: { lat: 0, lng: 0 },
mapId: "custom-map-id",
});
marker = new AdvancedMarkerElement({
map,
title: "Tu ubicación"
});
}
</script>
<script
src="https://maps.googleapis.com/maps/api/js?key=API_KEY&loading=async&callback=initMap" defer>
</script>
Lo siguiente es agregar un botón para que el usuario active la geolocalización, luego centramos y hacemos zoom el mapa con la ubicación del usuario:
<button id="btLocateOnMap">Ubicarme en el Mapa</button>
<script>
let btLocateOnMap = document.getElementById('btLocateOnMap');
btLocateOnMap.addEventListener('click', () => {
navigator.geolocation.getCurrentPosition(
(position) => {
const userLocation = {
lat: position.coords.latitude,
lng: position.coords.longitude,
};
// center map on user location
map.setZoom(15);
map.setCenter(userLocation);
marker.position = userLocation;
},
(error) => {
console.error("Error en la geolocalización:", error.message);
}
);
});
</script>
Uniendo todo el código obtenemos el script para mostrar la ubicación del usuario usando la geolocalización.
<html>
<head>
<title>Geolocalización</title>
<style>#map { height: 420px; width: 640px; }</style>
</head>
<body>
<h3>Mapa de Ubicación</h3>
<button id="btLocateOnMap">Ubicarme en el Mapa</button>
<div id="map"></div>
<script>
// inicializar mapa
let map, marker;
async function initMap() {
const { Map } = await google.maps.importLibrary("maps");
const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
map = new Map(document.getElementById("map"), {
zoom: 2,
center: { lat: 0, lng: 0 },
mapId: "custom-map-id",
});
marker = new AdvancedMarkerElement({
map,
title: "Tu ubicación"
});
}
// Geolocalizar al usuario
let btLocateOnMap = document.getElementById('btLocateOnMap');
btLocateOnMap.addEventListener('click', () => {
navigator.geolocation.getCurrentPosition(
(position) => {
const userLocation = {
lat: position.coords.latitude,
lng: position.coords.longitude,
};
// center map on user location
map.setZoom(15);
map.setCenter(userLocation);
marker.position = userLocation;
},
(error) => {
console.error("Error en la geolocalización:", error.message);
}
);
});
</script>
<script
src="https://maps.googleapis.com/maps/api/js?key=API_KEY&loading=async&callback=initMap" defer>
</script>