Añadir un mapa a las páginas

Tanto si estás guiando a tus clientes hacia un taller local para ver la puesta de sol, marcando la ubicación exacta de una sesión fotográfica de paisajes en un lugar remoto o indicando a los visitantes cómo llegar a tu galería, el bloque Mapa te ofrece un elemento de diseño fluido e interactivo para tu sitio web.

El bloque «Mapa» utiliza un iframe integrado y seguro para mostrarse en tu sitio web público y en vivo. A diferencia de los temas de WordPress que consumen muchos recursos y dependen de complejas API de JavaScript, este enfoque garantiza que las páginas se carguen rápidamente y sean compatibles con dispositivos móviles.

Requisitos previos: elige tu opción

Opción A: Sin configuración (pega una URL de incrustación directa)

Ideal si solo necesitas un mapa puntual en una página específica y no quieres utilizar la Consola de Google Cloud.

1. Ve a Google Maps.
2. Busca tu ubicación y, a continuación, haz clic en Compartir.
3. Selecciona la pestaña Incrustar un mapa.
4. Copia solo la URL de origen que aparece dentro del atributo src="..." del fragmento de código iframe generado. Tendrá un aspecto similar a este:
   https://www.google.com/maps/embed?pb=!1m18!1m12...
5. Puedes pegar esa URL en el panel Attr del bloque (ver más abajo); no se necesita ninguna clave de API.

Opción B: Generación directa (guardar una clave de API global)

Recomendado para anfitriones de talleres y organizadores de eventos activos. Guarda una clave de desarrollador en ArtInStack y, a continuación, genera mapas incrustados a partir de una dirección postal directamente en el editor de páginas.

1. Abre Configuración → Integraciones → Mapas en tu panel de control.
2. Selecciona Google Maps como proveedor.
3. Pega tu clave de la API de incrustación de Google Maps.
   • Consejo profesional: Activa la API de incrustación de mapas en Google Cloud y añade una restricción de referente HTTP para tu dominio con el fin de evitar el uso no autorizado de tu clave.

Añadir el bloque

1. Abre Páginas → Editar → Editor de páginas.
2. En la barra lateral derecha, haz clic en Bloques (icono «+»).
3. En Multimedia, arrastra Mapa a una columna (o deja que el editor lo coloque en Sección → Fila → Columna).
4. Guarda la página y publícala cuando estés listo.

Configura en «Attr»

Selecciona el bloque «Mapa» → Editar → Attr:

Configuración	Qué hace
Dirección o ubicación	Escribe una dirección física (p. ej., Reserva Natural Estatal de Mono Lake Tufa o 123 Main St, Atlanta, GA) y haz clic en Actualizar para generar un código de incrustación (Ruta B — requiere una clave API guardada)
O pegar URL de incrustación	Pega una URL sin formato https://www.google.com/maps/embed?.... Tiene prioridad; funciona sin una clave API guardada (Ruta A)
Nivel de zoom	Se aplica al generar a partir de una dirección (Ruta B)
Tipo de mapa	Mapa de carreteras o satélite
Altura	Bloquea la altura de la ventana de visualización (p. ej., 400 px) para que se adapte a tu diseño

Cuando utilices una URL de incrustación de Google pb= pegada, el zoom y el encuadre provendrán de la exportación que hayas creado en Google Maps, no del control deslizante de zoom.

> ¿Buscas el mapa de impacto? El bloque estándar Mapa sirve para una única ubicación en una página. Para mostrar un portafolio geolocalizado con marcadores en distintas regiones, utiliza en su lugar el bloque Mapa de impacto: Añadir un mapa de impacto a una página.

Solución de problemas

Síntoma	Qué comprobar
Actualizar (generar) está desactivado	No hay ninguna clave de API guardada: abre Configuración → Integraciones → Mapas, o pega una URL de incrustación directa (Ruta A)
Mapa en blanco o advertencia de la API de Google	API de incrustación de mapas habilitada en Google Cloud; las restricciones de referenciador HTTP incluyen tu dominio de producción (y localhost al realizar pruebas localmente)
El mapa se ve mal tras pegarlo	Vuelve a exportarlo desde la opción Incrustar un mapa de Google Maps y vuelve a pegar la URL src completa
El bloque funciona en el editor pero no en la versión pública	Guarda la página, publícala y prueba la URL pública

Para los bloques de diseño alrededor del mapa, consulta Referencia de bloques del editor y diseño.

Comprobación de la configuración

1. Publica una página de prueba con un bloque Mapa.
2. Comprueba que el mapa se carga en la URL pública (tanto en ordenador como en móvil).
3. Si utilizas la Opción B, cambia la dirección en Atributo, haz clic en Actualizar, guarda y comprueba que la incrustación se actualiza.