Te lo muestro: Leaflet – un mapa gratis
Leaflet es una biblioteca que usan millones de webs para mostrar mapas. Es gratis y se añade con dos líneas en el <head>:
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>Luego solo necesitas un recuadro para el mapa y unas líneas de JavaScript:
<div id="mapa" style="height: 400px; border-radius: 12px;"></div>
<script>
// Coordinates for the map's center and zoom level (bigger number = closer)
const mapa = L.map('mapa').setView([49.19, 16.61], 13);
// Map tiles from OpenStreetMap (free)
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap',
}).addTo(mapa);
// A pin with a popup
L.marker([49.19, 16.61])
.addTo(mapa)
.bindPopup('<strong>We are here!</strong>');
</script>Tres pasos: crear el mapa, añadir la capa base, poner una chincheta. Puedes añadir tantas como quieras – solo repite L.marker.
Una biblioteca es código que escribió otra persona y que tú «prestas», para no tener que escribirlo todo tú. Leaflet se encarga del arrastre, el zoom y los gestos táctiles en móvil. Tú solo le dices al mapa qué mostrar.
Más chinchetas desde una lista
Cuando tienes varios sitios, guárdalos en un array y recórrelo – igual que con el tiempo:
const mista = [
{ nazev: 'Šumava 2025', lat: 49.06, lng: 13.61 },
{ nazev: 'Lipno – camping trip', lat: 48.63, lng: 14.23 },
{ nazev: 'Prague – school trip', lat: 50.09, lng: 14.42 },
];
for (const misto of mista) {
L.marker([misto.lat, misto.lng]).addTo(mapa).bindPopup(misto.nazev);
}Ahora tú 💪
🏫 Web del cole – solución
Un mapa con la ubicación del cole en la página «Contacto». Extra: una segunda chincheta para el gimnasio o el campo de educación física.
🙋 Web personal – solución
Un mapa «Mis sitios»: dónde vives (solo aproximado – ¡basta con la ciudad!), tu parque favorito, dónde vas de vacaciones.
🌍 Diario de viajes – solución
Esta es tu lección estrella: un mapa de todos tus viajes con chinchetas desde una lista. Cada popup puede enlazar a un relato del viaje.
⚽ Web del club – solución
Un mapa «Dónde jugamos»: campo local + campos rivales. A los padres visitantes les encantará.
Privacidad: nunca pongas tu dirección exacta en una web. Una chincheta en la plaza principal de tu pueblo es más que suficiente.
Compruébalo: Tu web tiene un mapa que se puede mover y hacer zoom, con al menos dos chinchetas con popups.
Lo que te llevas de esta lección
- Las bibliotecas (como Leaflet) te prestan superpoderes listos para usar.
- Un mapa = mapa + capa base + chinchetas.
- Una lista de sitios en un array + un bucle = un mapa de cualquier tamaño.
© 2026 Ing. Martin Polak / AlgoRhino · Condiciones de uso del contenido