Insertar bloque Mapa de entorno
Con el bloque de Gutenberg Mapa de ubicación del inmueble individual (immomakler/single-map) integra el mapa de un inmueble directamente en plantillas de bloque o en cualquier página. El bloque tiene el mismo alcance funcional y resultado que el widget de Elementor del mismo nombre, “Mapa de ubicación del inmueble individual”.
Requisitos
Sección titulada «Requisitos»- WordPress con editor Gutenberg (desde WordPress 5.0)
- WP-ImmoMakler (cualquier edición)
- Debe haber un proveedor de mapas seleccionado en el Customizer, en WP-ImmoMakler → Mapas. Si con él no se puede dibujar ningún mapa, entra en acción el mapa Embed de Google Maps, siempre que esté activado como solución de respaldo
- El inmueble debe tener una dirección o geocoordenadas guardadas
Insertar el bloque
Sección titulada «Insertar el bloque»-
Editar inmueble o abrir plantilla
Abra un inmueble existente en el editor o una plantilla basada en bloques para el tipo de contenido Inmueble (requiere un tema de bloques o el editor de sitio).
-
Insertar el bloque
Haga clic en el símbolo + y busque Mapa de entorno o navegue a la categoría Widgets. Inserte el bloque.
-
Comprobar vista previa
En el editor se muestra una vista previa en tiempo real con los datos de un inmueble de muestra existente. El mapa aparece incluyendo la funcionalidad de consentimiento configurada. En la página real del inmueble se muestra el mapa del objeto correspondiente.
Configurar la altura del mapa
Sección titulada «Configurar la altura del mapa»En el panel del bloque Apariencia establece la altura del mapa:
| Configuración | Descripción |
|---|---|
| Unidad | Unidad para la altura del mapa: px, %, vh o vw. Predeterminado: px. |
| Altura del mapa | Altura del mapa en la unidad seleccionada. Predeterminado: 350 px. |
Rangos disponibles según la unidad:
| Unidad | Mínimo | Máximo |
|---|---|---|
| px | 100 | 1200 |
| % | 10 | 100 |
| vh | 10 | 100 |
| vw | 10 | 100 |
La altura configurada se aplica como CSS en línea con alcance a los selectores del contenedor de mapa .immomakler-map-iframe, .immomakler-map-iframe iframe.map e iframe.immomakler-map-iframe.
Clases CSS para personalizaciones propias
Sección titulada «Clases CSS para personalizaciones propias»Para una personalización más avanzada puede usar reglas CSS propias en su tema:
/* Envoltorio del bloque */.wp-block-immomakler-single-map .immomakler-single-map { }
/* Contenedor del mapa (iframe o div de la API JS) */.immomakler-map-iframe { }
/* Elemento iframe incrustado */.immomakler-map-iframe iframe.map { }