WP Manifestindependent plugin directory
manifest / content / mapa-interactivo

Mapa Interactivo

Shortcode [proba_mapa] que muestra la ubicación del proyecto y cambia de dirección al pulsar un lugar cercano del repeater de ACF.

by Lucuma Agency · github.com/lucumaagency/mapa-interactivo · website

★ 0stars

Install

Download source zip No release zip yet

This is the repository archive. It installs, but the folder name will carry the branch suffix and updates will not flow.

Install straight from GitHub with WP-CLI:

wp plugin install https://github.com/lucumaagency/mapa-interactivo/archive/refs/heads/main.zip
No built-in updater. New versions won't appear under Dashboard → Updates. Install new releases yourself, or let Git Updater track the repository.
Readme github.com/lucumaagency/mapa-interactivo ↗

Plugin de WordPress para fichas de proyecto inmobiliario. Muestra la ubicación del proyecto en un mapa y, al pulsar un lugar cercano de la lista, cambia el mapa a esa dirección. El punto del proyecto es el estado inicial y siempre se puede volver a él.

No usa la API de Google Maps: el mapa es un iframe del embed público, así que no hace falta API key, cuenta ni facturación.

Requisitos

  • WordPress 6.0 o superior, PHP 7.4 o superior.
  • Advanced Custom Fields (el plugin no hace nada si get_field() no existe).

Campos de ACF

En el post type del proyecto:

Campo Tipo Descripción
direccion Texto Dirección del proyecto. Obligatorio.

Dentro del repeater lugares_cercanos:

Subcampo Tipo Descripción
lugar_cercano Texto Nombre del lugar.
direccion Texto Dirección del lugar. Si está vacío, el ítem no es clicable.

Uso

Coloca el shortcode donde deba aparecer el mapa:

[proba_mapa]

La lista de lugares cercanos se construye aparte, con el query loop de Bricks sobre el repeater. Cada ítem necesita:

  • la clase lugar-item;
  • el atributo data-index="{query_loop_index}".

El emparejamiento entre la lista y el mapa se hace por ese índice, así que ambos recorren el repeater en el mismo orden.

Atributos

Atributo Por defecto Descripción
direccion direccion Campo de dirección del proyecto.
repeater lugares_cercanos Repeater de lugares cercanos.
sub_dir direccion Subcampo de dirección del lugar.
sub_nombre lugar_cercano Subcampo de nombre del lugar.
zoom 16 Zoom del mapa.
item .lugar-item Selector de los ítems de la lista.
boton Ver el proyecto Texto del botón de vuelta al inicio.
post_id actual Forzar otro post.

Ejemplo con otros nombres de campo:

[proba_mapa repeater="cercanias" sub_dir="ubicacion" zoom="15"]

Comportamiento

  • Carga con la dirección del proyecto.
  • Un clic en un lugar cambia el mapa a su dirección y resalta el ítem. El cambio es inmediato: cada destino tiene su propio iframe, precargado cuando el navegador queda ocioso, y al pulsar solo se alterna cuál está visible.
  • Se vuelve al proyecto con el botón o con un segundo clic en el ítem activo.
  • Los lugares sin dirección quedan atenuados y no responden.
  • El botón de volver está siempre presente, deshabilitado en el estado inicial, para que la altura del bloque no cambie al aparecer.
  • Los ítems clicables son accesibles por teclado (Enter y Espacio).

Personalización

Los colores salen de custom properties, así que se repintan sin tocar el CSS del plugin:

.mapa-interactivo {
    --mapa-acento: #fbb900;
    --mapa-alto: 500px;
}

Estructura

mapa-interactivo.php                 arranque y constantes
includes/
  class-mapa-interactivo.php         registro de assets
  class-mapa-interactivo-shortcode.php  shortcode y render
assets/
  css/mapa-interactivo.css
  js/mapa-interactivo.js

Los assets se registran siempre pero solo se encolan cuando el shortcode se usa de verdad en la página.