¿Quieres poner un mapa en tu web de WordPress sin depender de Google Maps, sin pagar por una API y sin tocar una sola línea de código? En este tutorial vamos a ver exactamente eso.
Vamos a instalar el plugin Leaflet Map, crear un mapa desde cero, añadir marcadores con popups y publicar el mapa en una página de WordPress.
Para la demo usaremos WordPress Playground, una herramienta oficial que permite tener un WordPress funcionando en el navegador sin instalar absolutamente nada. Si ya tienes tu propio WordPress, los pasos son exactamente los mismos.
Para crear tu WordPress nuevo con Playground, simplemente entra en playground.wordpress.net.
Al final del vídeo tienes el vídeo con toda la explicación.
Qué es Leaflet Map
Creo que no tengo que explicarlo. Resumiendo mucho, Leaflet Map es un plugin gratuito para WordPress que usa la librería Leaflet.js, open source y una de las más utilizadas en el mundo para mapas web interactivos.
A diferencia de Google Maps:
- No necesitas cuenta de Google.
- No necesitas tarjeta de crédito.
- No hay límite de visitas que genere coste.
Lleva más de diez años en el repositorio de WordPress, tiene más de 30.000 instalaciones activas y una valoración muy alta. Es un plugin maduro, estable y bien mantenido.
Si quieres saber más sobre qué es Leaflet.js y por qué es la mejor opción para mapas en WordPress, tienes el artículo completo aquí en el que te explico qué es Leaflet Map. Y en este otro te explico qué es Leaflet.
Instalar el plugin Leaflet Map
La instalación es la misma que la de cualquier plugin gratuito de WordPress.org:
- Ve a Plugins > Añadir nuevo.
- En el buscador escribe: Leaflet Map.
- Haz clic en Instalar ahora.
- Una vez instalado, haz clic en Activar.
Configurar los ajustes por defecto (Settings)
El primer paso es ir a Leaflet Map > Settings. Aquí se definen las opciones que se aplicarán por defecto a todos los mapas que crees.
Hay muchas opciones, pero para empezar solo necesitas tocar dos:
Coordenadas del centro por defecto
Los campos Default Latitude y Default Longitude definen el centro del mapa cuando se carga. Puedes poner las coordenadas de tu ciudad o del área geográfica que te interese.
Por ejemplo, para centrar el mapa en Granada:
- Latitud: 37.18
- Longitud: -3.60
💡 Para obtener las coordenadas de cualquier punto, entra a Google Maps, haz clic derecho sobre el lugar y copia las coordenadas que aparecen en el primer elemento del menú contextual.
Altura del mapa
Por defecto los mapas salen bastante achatados. Cambia el campo de altura a 500px para que se vean bien en la mayoría de páginas.
Una vez modificados estos valores, haz clic en Guardar cambios.
Usar el Short Code Helper para preparar el mapa
Ve a Leaflet Map > Short Code Helper. Esta sección es muy útil porque te permite:
- Ver un mapa en tiempo real mientras ajustas los parámetros.
- Generar el shortcode correcto sin escribirlo a mano.
- Copiar el shortcode listo para pegar en cualquier página o entrada.
Cuando mueves el mapa, cambian las coordenadas del centro. Cuando cambias el zoom, se actualiza el número del zoom. Cuando mueves el marcador, cambian sus coordenadas. Todo en tiempo real.
Cómo funciona el apilamiento de shortcodes
Leaflet Map funciona por apilamiento de shortcodes: el mapa base se define con un shortcode y los elementos que añades (marcadores, capas, etc.) se insertan con shortcodes adicionales debajo del primero.
Ejemplo básico para un mapa con un marcador:
[leaflet-map zoom=12 lat=37.18 lng=-3.60]
[leaflet-marker lat=37.1760 lng=-3.5880]
Añadir el mapa a una página
- Copia el shortcode del mapa que aparece en el Short Code Helper.
- Ve a Páginas > Añadir nueva.
- En el editor de bloques (Gutenberg), haz clic en + para añadir un bloque y busca el bloque Shortcode.
- Pega el shortcode del mapa dentro del bloque.
- Haz clic en Vista previa para ver el resultado.
⚠️ Si usas el editor clásico en lugar de Gutenberg, pega el shortcode directamente en el área de texto de la entrada o página. Funciona igual.
Añadir marcadores con popup
Un marcador señala un punto concreto del mapa. Puede tener un popup con texto que se abre al hacer clic.
Cómo generar el shortcode de un marcador
- En el Short Code Helper, mueve el marcador al punto exacto que quieras señalar.
- Copia el shortcode del marcador que aparece en el panel.
- En tu página, pégalo debajo del shortcode del mapa.
Para añadir un texto al popup, edita el shortcode así:
[leaflet-marker lat=37.1760 lng=-3.5880]Alhambra[/leaflet-marker]
El texto entre las etiquetas de apertura y cierre es el contenido del popup. El plugin admite HTML básico, así que puedes usar negritas, saltos de línea, etc.:
[leaflet-marker lat=37.1760 lng=-3.5880]<b>Alhambra</b><br>Monumento más visitado de España[/leaflet-marker]
Añadir más marcadores
Para añadir un segundo marcador (o los que necesites) simplemente repite el proceso y añade otro shortcode debajo:
[leaflet-map zoom=13 lat=37.18 lng=-3.60]
[leaflet-marker lat=37.1760 lng=-3.5880]&lt;b&gt;Alhambra&lt;/b&gt;[/leaflet-marker]
[leaflet-marker lat=37.1767 lng=-3.5994]<b>Catedral de Granada</b>[/leaflet-marker]
Puedes añadir tantos marcadores como necesites. El Short Code Helper facilita el proceso: mueves el marcador al punto que quieres, copias el shortcode y lo pegas en tu página.
Personalizar el mapa: opciones básicas
Leaflet Map permite personalizar el comportamiento del mapa a través de parámetros en el shortcode y opciones en Settings. Las más útiles para empezar:
Añadir o quitar el control de zoom
Por defecto el mapa no muestra los botones +/– de zoom. Para añadirlos:
[leaflet-map zoom=12 lat=37.18 lng=-3.60 zoomcontrol=1]
Scroll wheel
El scroll wheel permite hacer zoom con la rueda del ratón. Es cómodo para el usuario, pero puede ser muy molesto en páginas largas: el visitante está haciendo scroll y de repente el mapa empieza a hacer zoom.
Mi recomendación es no activarlo, a menos que el mapa ocupe toda la pantalla o sea el elemento principal de la página.
💡 En Settings puedes cambiar estas opciones para que se apliquen a todos los mapas por defecto, sin tener que añadirlas al shortcode de cada mapa.
Conclusión y próximos pasos
En este tutorial hemos visto cómo:
- Instalar el plugin Leaflet Map desde el repositorio de WordPress.
- Configurar las opciones por defecto (coordenadas de centro, altura del mapa).
- Usar el Short Code Helper para preparar el mapa y copiar el shortcode.
- Añadir el mapa en una página de WordPress con el bloque Shortcode.
- Crear marcadores con popups, incluyendo HTML básico.
- Añadir varios marcadores al mismo mapa.
- Controlar opciones básicas como el zoom y el scroll wheel.
Todo esto sin tocar una sola línea de código.
Pero, ya sabes que Leaflet Map tiene un montón de posibilidades más. Así que te invito a que explores el Shortcode Helper y empieces a explorar estas posibilidades. No obstante, hablaré más de este plugin, que tanto me gusta.
