El Editor de bloques de Waclis permite incorporar mapas dentro de una Página web utilizando componentes específicos.

Dentro de:

Componentes → Widgets

encontrarás:

• Google Maps

• Open Street Map

Estos componentes pueden utilizarse para mostrar visualmente:

• la ubicación de un negocio;

• una oficina;

• un showroom;

• una sucursal;

• un punto de retiro;

• un espacio para eventos;

• otra ubicación relevante para el visitante.

En este tutorial aprenderás:

• qué diferencia existe entre Google Maps y Open Street Map;

• cuándo utilizar cada uno;

• por qué un mapa no sustituye la dirección escrita;

• cómo acompañar el mapa con nombre, dirección y datos de contacto;

• cómo verificar que el punto mostrado sea correcto;

• cómo trabajar con una o varias ubicaciones;

• cómo adaptar el mapa a celular;

• cómo definir una altura adecuada;

• cómo evitar Width y Height rígidos problemáticos;

• qué relación existe entre mapas, Iframe y Links;

• cómo utilizar Navigator;

• cómo mantener el mapa actualizado;

• qué aspectos de privacidad y rendimiento conviene tener en cuenta;

• qué errores frecuentes debes evitar.

¿Qué componente debería utilizar?

Waclis dispone de dos opciones específicas:

Google Maps

y:

Open Street Map

Ambas permiten incorporar información geográfica dentro de una Página web, aunque utilizan proveedores y tecnologías diferentes.

Google Maps

Puede ser apropiado cuando quieres trabajar con una ubicación utilizando el ecosistema de mapas de Google y la configuración disponible en el componente.

Open Street Map

Permite incorporar mapas basados en OpenStreetMap mediante el componente correspondiente.

¿Cuál conviene?

No existe una respuesta universal.

Puedes elegir según:

• el componente que mejor funcione para tu ubicación;

• la presentación que prefieras;

• la configuración disponible;

• el proveedor que quieras utilizar.

No necesitas utilizar ambos para la misma dirección

Por ejemplo:

Google Maps
+
Open Street Map

mostrando exactamente el mismo lugar normalmente agrega contenido redundante.

Elige uno

y acompáñalo con información escrita clara.

El mapa es una ayuda visual

Este es el principio más importante del tutorial.

Un visitante no debería depender exclusivamente del mapa para descubrir dónde se encuentra tu negocio.

Ejemplo incompleto

¿DÓNDE ESTAMOS?

[ MAPA ]

Ejemplo recomendado

¿DÓNDE ESTAMOS?

Showroom Central

Av. Ejemplo 1234, Ciudad

[ MAPA ]

[ CÓMO LLEGAR ]

¿Por qué conviene mostrar la dirección escrita?

Porque el visitante puede:

• querer copiarla;

• enviarla a otra persona;

• reconocer la ciudad;

• buscarla en su aplicación de navegación;

• utilizar un lector de pantalla;

• no poder cargar el mapa;

• navegar con una conexión limitada.

El mapa complementa la dirección

No la reemplaza.

Una buena estructura

puede ser:

Heading
↓
Nombre del lugar
↓
Dirección
↓
Información adicional
↓
Mapa
↓
CTA Cómo llegar

O:

[ INFORMACIÓN ][ MAPA ]

en desktop.

Y en celular:

INFORMACIÓN

MAPA

¿Dónde encuentro Google Maps y Open Street Map?

Dentro del Editor de bloques:

1. abre Componentes;

2. localiza la categoría Widgets;

3. selecciona:

   • Google Maps, o

   • Open Street Map;

4. arrastra o incorpora el componente en la Section correspondiente.

Después utiliza Navigator

El mapa puede estar dentro de una estructura como:

Section
└── Container
    └── Google Maps

O:

Section
└── Container
    └── Grid Row
        ├── Column
        │   ├── Heading
        │   ├── Paragraph
        │   └── Link
        └── Column
            └── Open Street Map

La estructura exacta dependerá de tu diseño

Por eso utiliza:

Navigator

para identificar correctamente:

• Section;

• Container;

• Column;

• componente de mapa.

No confundas mapa con Section

Si quieres eliminar solamente el mapa:

selecciona el componente.

No elimines:

Section

completa por error.

Recuerda

Waclis no solicita confirmación al eliminar.

Si eliminas el nivel incorrecto:

Deshacer

1. ¿Cómo utilizar Google Maps?

Agrega:

Componentes → Widgets → Google Maps

dentro de la ubicación correspondiente.

Después selecciona el componente

y abre:

Contenido

Revisa las opciones disponibles

El componente puede ofrecer configuraciones relacionadas con la ubicación o visualización.

Las opciones exactas pueden variar según la versión o estructura del componente utilizado.

No inventes datos de ubicación

Si el componente solicita información como:

• dirección;

• coordenadas;

• ubicación;

• otro identificador;

utiliza datos reales y comprobados.

Verifica la ubicación antes de guardar

Nunca supongas que:

“Av. Principal 100”

corresponde automáticamente al lugar correcto.

Puede existir la misma dirección en

• otra ciudad;

• otra provincia;

• otro país.

Utiliza información suficientemente específica

Por ejemplo:

Av. Ejemplo 1234, Ciudad, Provincia, País

cuando sea necesario para evitar ambigüedad.

Comprueba el marcador

Si el mapa muestra un punto o marcador:

verifica visualmente que corresponda al lugar real.

No basta con que aparezca:

un pin

Debe aparecer:

el pin correcto

Un error de ubicación es especialmente grave

porque el visitante puede:

• viajar al sitio equivocado;

• llegar a otra sucursal;

• perder tiempo;

• asumir que la información de la Página web es incorrecta.

Verificación recomendada

Antes de finalizar:

1. abre el mapa;

2. identifica el marcador;

3. comprueba calles cercanas;

4. comprueba ciudad;

5. compara con la dirección escrita;

6. utiliza Ver página;

7. prueba la ubicación nuevamente.

No publiques el mapa sin esta comprobación

Google Maps y dirección escrita

Ejemplo:

Showroom Waclis

Av. Ejemplo 1234
Ciudad, Provincia

[ GOOGLE MAPS ]

[ CÓMO LLEGAR ]

El visitante obtiene

• contexto textual;

• visualización;

• acceso a indicaciones.

Esto es más completo que mostrar solamente el mapa.

2. ¿Cómo utilizar Open Street Map?

Agrega:

Componentes → Widgets → Open Street Map

Después:

1. selecciona el componente;

2. abre Contenido;

3. revisa las opciones disponibles;

4. configura la ubicación correspondiente;

5. verifica el resultado real.

El mismo principio fundamental aplica

el punto mostrado debe coincidir con la dirección escrita.

Ejemplo

Punto de retiro

Calle Ejemplo 456

[ OPEN STREET MAP ]

Horarios:
Lunes a viernes...

No asumas que Open Street Map y Google Maps mostrarán exactamente la misma información visual

Los proveedores pueden:

• representar calles de forma diferente;

• mostrar distintos datos;

• actualizarse en momentos diferentes.

Lo importante

es que la ubicación principal sea correcta.

Google Maps vs Open Street Map

Una comparación conceptual:

En ambos casos

debes revisar:

• ubicación;

• responsive;

• disponibilidad;

• resultado final.

No elijas únicamente por apariencia dentro del Editor

Prueba mediante:

Ver página

Mapa vs Iframe

En el tutorial anterior vimos el componente:

Iframe

También es posible que determinados proveedores entreguen mapas mediante código incrustado.

Sin embargo

Waclis ya dispone de componentes específicos:

• Google Maps;

• Open Street Map.

Por eso

cuando necesites un mapa:

comienza evaluando los Widgets específicos.

Iframe puede ser útil

cuando:

• el proveedor ofrece una integración concreta;

• necesitas una visualización que los Widgets disponibles no cubren.

Pero no reconstruyas manualmente algo que ya resuelve un componente dedicado

Mapa vs Image

Una captura de pantalla de un mapa:

[ IMAGE DEL MAPA ]

no ofrece la misma experiencia que un mapa interactivo.

Puede quedar desactualizada

y no permite interacción.

Pero una Image puede ser adecuada

si solo quieres mostrar:

• un esquema;

• un plano interno;

• una ilustración de acceso.

Para una ubicación geográfica real

un mapa puede ser más útil.

No utilices una captura como sustituto de dirección exacta

Mapa vs Link “Cómo llegar”

También son complementarios.

Mapa

permite visualizar.

Link:

[ CÓMO LLEGAR ]

puede permitir abrir una aplicación o servicio de navegación.

Una buena página puede utilizar ambos.

Crear un CTA “Cómo llegar”

Puedes utilizar:

Link

y darle apariencia de Button.

Ejemplo:

Cómo llegar

Configura una URL real hacia el destino correspondiente.

No utilices:

#

Después prueba el Link.

Si clonas una ubicación

revisa también:

CTA
→ dirección

Error frecuente

Sucursal Norte:

Av. Norte 100

pero Button:

Cómo llegar
→ Sucursal Centro

Siempre revisa texto + mapa + Link como una unidad

Nombre de la ubicación

Si tienes varias ubicaciones:

no muestres solamente:

Dirección:
Calle 123

Puede ser mejor:

Sucursal Centro

Calle 123
Ciudad

Esto ayuda al visitante a distinguirla.

Una sola ubicación

Ejemplo:

VISÍTANOS

Showroom Principal

Av. Ejemplo 1234
Ciudad

Lunes a viernes de 9 a 18 h

[ MAPA ]

[ CÓMO LLEGAR ]

Si los horarios son manuales

manténlos actualizados.

El mapa no conoce tus horarios automáticamente

Dos ubicaciones

Puedes utilizar:

[ SUCURSAL A ][ SUCURSAL B ]

en desktop.

Cada una puede contener:

Heading
Dirección
Mapa
CTA

Conceptualmente:

Grid Row
├── Column 6
│   └── Location A
└── Column 6
    └── Location B

Mobile

puede transformarse en:

SUCURSAL A

[ MAPA ]

SUCURSAL B

[ MAPA ]

Pero pregunta si necesitas mostrar dos mapas simultáneamente

Cada mapa agrega

• espacio;

• recursos;

• carga.

Para muchas sucursales

por ejemplo:

15 ubicaciones

mostrar:

15 mapas

en una misma página puede resultar excesivo.

Puede ser más claro utilizar

• lista de sucursales;

• Cards;

• dirección;

• CTA Cómo llegar;

• un mapa principal;

según la necesidad.

No incrustes un mapa por cada ubicación automáticamente

Tres o más sucursales

Una estructura puede ser:

NUESTRAS SUCURSALES

Sucursal Centro
Dirección
Cómo llegar

Sucursal Norte
Dirección
Cómo llegar

Sucursal Sur
Dirección
Cómo llegar

[ MAPA GENERAL ]

Esto puede reducir la carga

y mantener información clara.

No existe una única composición correcta

La decisión depende de

• cantidad de ubicaciones;

• importancia del mapa;

• experiencia mobile.

Mapas dentro de Cards

Puedes crear:

╭──────────────────────────────╮
│ Sucursal Centro              │
│                              │
│ Av. Ejemplo 1234             │
│                              │
│ [ MAPA ]                     │
│                              │
│ [ CÓMO LLEGAR ]              │
╰──────────────────────────────╯

Revisa el Padding

No dejes el mapa:

pegado al borde

si la Card necesita espacio interno.

Pero tampoco agregues Padding al propio mapa

si debería ocupar todo el ancho interno.

Puedes controlar espacios en el wrapper.

Width del mapa

Normalmente debe adaptarse a su contenedor.

Evita:

width: 900px;

si el componente debe funcionar en celular.

Puede ser más apropiado:

100 % del Container

Pero utiliza las opciones del componente antes de escribir CSS manual.

Si necesitas CSS

utiliza una Class localizada.

Por ejemplo:

location-map-section

Y:

.location-map-section .map-wrapper {
    width: 100%;
}

Estos nombres son ejemplos.

Height del mapa

La altura es uno de los ajustes visuales más importantes.

Mapa demasiado bajo

80 px

puede ser difícil de utilizar.

Mapa demasiado alto

1000 px

puede ocupar gran parte de la página sin necesidad.

Una altura equilibrada

debe permitir:

• reconocer calles;

• interactuar;

• comprender la ubicación.

No existe una altura universal

Un mapa principal puede ser más alto

que un pequeño mapa dentro de una Card.

Ejemplo conceptual

Mapa principal:

400–500 px

puede ser razonable en determinados diseños.

Mapa secundario

podría necesitar menos.

Estos valores son solamente referencias de diseño

No son medidas obligatorias.

Siempre comprueba el resultado real.

Height y mobile

No necesariamente necesitas la misma altura en todas las pantallas.

Desktop:

450 px

Mobile:

podría funcionar mejor con:

300–350 px

según el diseño.

Nuevamente:

son referencias,

no valores obligatorios.

Lo importante es probar.

No utilices 100vh automáticamente

Por ejemplo:

height: 100vh;

puede hacer que el mapa ocupe toda la pantalla.

Esto puede ser apropiado para una aplicación cartográfica,

pero normalmente no para una sección de contacto.

Mapa responsive

Desktop:

[ INFORMACIÓN ][          MAPA          ]

Mobile:

INFORMACIÓN

MAPA

Utiliza:

Grid Row

para la estructura.

No utilices:

margin-left: 500px;

para posicionar el mapa.

Tampoco:

position: absolute;

como primera solución.

El mapa debe permanecer dentro del flujo de la página.

¿Información primero o mapa primero en mobile?

Depende de la necesidad.

Muchas veces puede ser útil:

Nombre
Dirección
Horario
CTA
Mapa

porque el visitante conoce inmediatamente:

dónde está el lugar.

Pero otra composición puede priorizar el mapa.

Lo importante

es mantener un orden lógico.

Comprueba Navigator

Mapa y teléfonos móviles

Un mapa interactivo puede capturar gestos.

El visitante puede intentar:

• desplazarse por la página;

• mover el mapa;

• hacer zoom.

Por eso

no hagas el mapa tan grande que ocupe toda la pantalla móvil sin necesidad.

Puede dificultar seguir desplazándose por la página.

Prueba realmente el scroll

mediante Ver página.

No basta con ver el mapa estático.

Zoom

Los mapas pueden presentar diferentes niveles de aproximación.

No existe un Zoom ideal universal.

Una ubicación puntual

debe permitir reconocer:

• calles cercanas;

• zona.

Un Zoom demasiado lejano

puede mostrar:

toda una provincia

cuando quieres mostrar un local.

Uno demasiado cercano

puede impedir comprender cómo llegar desde las calles principales.

Ajusta según la ubicación

si el componente ofrece esta opción.

No asumiremos un control específico

si no está visible en tu configuración.

Marcador

Si el componente utiliza marcador:

comprueba:

• que exista;

• que esté en el lugar correcto;

• que no apunte a una esquina equivocada.

Especial cuidado en

• centros comerciales;

• parques industriales;

• edificios grandes;

• barrios privados;

• predios;

• campus.

La dirección postal puede llevar al centro del predio

pero la entrada real puede estar en otro punto.

En estos casos

puede ser útil agregar texto:

Ingreso por acceso norte

o:

Local 12, primer piso

cuando sea información real.

El mapa por sí solo puede no alcanzar

Edificios con varias empresas

Ejemplo:

Edificio Corporativo

Av. Ejemplo 1000
Piso 4, Oficina 402

El mapa muestra el edificio.

La información escrita muestra:

Piso 4
Oficina 402

No esperes que el mapa comunique información interna del edificio.

Centros comerciales

Mismo principio.

Puede ser:

Shopping Ejemplo

Local 125
Nivel 1

Agrega el detalle escrito.

Mapas y horarios

Puedes complementar:

Lunes a viernes
9:00 a 18:00

Pero recuerda:

los horarios escritos en un bloque son contenido manual.

No asumas que:

horario de Google Maps

se sincroniza automáticamente con:

horario del bloque

Si cambias uno:

actualiza el otro cuando corresponda.

Mapas y teléfono

Puedes agregar:

Teléfono

cerca de la ubicación.

Utiliza Link si quieres que sea clicable.

Ejemplo conceptual:

Sucursal Centro

Av. Ejemplo 1234

Tel.: ...

[ MAPA ]

[ CÓMO LLEGAR ]

Mapas y WhatsApp

También puedes acompañar con CTA:

[ CONSULTAR POR WHATSAPP ]

si corresponde al negocio.

No necesitas hacer que el mapa resuelva todas las acciones.

Mapas y formulario de contacto

Una composición habitual:

[ FORMULARIO ][ MAPA ]

Puede funcionar muy bien en desktop.

Mobile:

FORMULARIO

MAPA

O:

MAPA

FORMULARIO

Revisa qué tarea es más importante.

Si el objetivo principal es enviar consulta

puede ser mejor presentar primero el Form.

Si el objetivo es visitar el local

puede ser mejor presentar primero ubicación.

No existe una regla universal.

Mapa en Contacto

Waclis permite agregar bloques:

debajo del menú

y:

arriba del menú inferior

en la página de Contacto.

Puedes utilizar esas áreas para incorporar una composición de mapa,

sin modificar el contenido central de Contacto.

Recuerda

estas posiciones son áreas independientes.

Mapa en Home

También puede agregarse dentro de uno de los bloques editables disponibles en Home.

Pero pregunta si realmente necesitas mostrar el mapa en la portada.

Puede ser suficiente un CTA:

Ver ubicación

hacia Contacto.

No agregues un mapa pesado en Home

si no aporta valor inmediato.

Mapa en Footer

El Footer no se edita mediante el Editor de bloques.

Pero existe una posición:

arriba del menú inferior

que permite colocar un bloque antes del Footer.

Puedes utilizar allí:

• dirección;

• mapa;

• CTA;

si el diseño lo necesita.

No confundas:

arriba del Footer

con:

editar Footer

Mapas y contenido externo

Google Maps y Open Street Map dependen de recursos externos.

Esto significa que el mapa puede verse afectado por:

• disponibilidad del proveedor;

• cambios del servicio;

• conexión del visitante;

• configuración de terceros.

El mapa puede tardar más en aparecer

que:

• texto;

• una Image.

Por eso la dirección escrita es también una alternativa útil.

Mapa que no carga

Si ocurre:

[ espacio vacío ]

el visitante todavía debería poder leer:

Av. Ejemplo 1234, Ciudad

Esta es otra razón para no depender exclusivamente del mapa.

Privacidad

Un mapa externo puede cargar recursos desde el proveedor correspondiente.

Dependiendo del proveedor y su configuración

puede existir comunicación entre el navegador del visitante y servicios externos.

Evalúa qué herramientas de terceros utilizas

y mantén actualizadas las políticas de tu Página web cuando corresponda.

Este tutorial no sustituye asesoramiento legal.

No copies textos legales de otro sitio

sin verificar que correspondan a tu caso.

Rendimiento

Un mapa interactivo suele consumir más recursos que una imagen estática.

Por eso

evita mostrar:

10 mapas

si:

1 mapa
+
lista de ubicaciones

resuelve mejor la tarea.

Especialmente en mobile

esto puede marcar una diferencia importante.

Mapas y carga inicial

Si el mapa se encuentra:

muy abajo en la página

pregúntate si realmente necesita ser una de las primeras cosas que se cargan.

No agregues Widgets innecesarios.

Mantén la página enfocada.

Múltiples ubicaciones: patrón recomendado

Ejemplo:

NUESTRAS SUCURSALES

CENTRO
Av. A 123
[ CÓMO LLEGAR ]

NORTE
Av. B 456
[ CÓMO LLEGAR ]

SUR
Av. C 789
[ CÓMO LLEGAR ]

[ MAPA ]

Este patrón puede ser más eficiente

que tres mapas completos.

Pero si las ubicaciones necesitan visualizarse individualmente

puedes utilizar Cards separadas.

Evalúa según el contenido.

Mapas y direcciones internacionales

Si la Página web recibe visitantes de diferentes países:

es especialmente importante incluir:

Ciudad
Provincia / Región
País

cuando sea necesario.

Una dirección como:

San Martín 500

puede existir en muchas ciudades.

Evita ambigüedad.

Código postal

Puede ser útil

si:

• forma parte habitual de la dirección;

• ayuda al sistema de navegación.

No es obligatorio mostrarlo siempre.

Mapas y coordenadas

En determinados casos:

una ubicación puede no tener una dirección postal precisa.

Por ejemplo

• predio;

• campo;

• punto de encuentro;

• acceso;

• sitio turístico.

Si el componente admite coordenadas

pueden ser útiles.

Pero:

verifica las coordenadas antes de publicarlas.

Un pequeño error puede desplazar el punto cientos de metros o más.

No copies coordenadas sin comprobar.

Mapas y eventos

Para un evento puedes mostrar:

Lugar del evento
Nombre del espacio
Dirección
Mapa
Cómo llegar

Pero si el evento termina

esa información puede quedar desactualizada.

Retira o actualiza el bloque posteriormente.

Mapas y contenido temporal

Mismo principio para:

• eventos;

• pop-up stores;

• puntos temporales de retiro;

• ferias.

No mantengas:

ESTAMOS AQUÍ ESTA SEMANA

meses después.

Mapas y cambios de domicilio

Si el negocio se muda:

debes revisar:

• dirección escrita;

• mapa;

• marcador;

• CTA Cómo llegar;

• Breadcrumbs o contenido relacionado;

• otras páginas que mencionen el domicilio.

No actualices únicamente el mapa.

Puede quedar:

Texto:
Av. Vieja 100

Mapa:
Av. Nueva 500

Esa inconsistencia es especialmente peligrosa.

Mantén todo sincronizado manualmente cuando corresponda.

Clonar una ubicación

Supongamos:

Sucursal Centro
Dirección A
Mapa A
Cómo llegar A

La clonas para crear:

Sucursal Norte

Debes actualizar:

1. nombre;

2. dirección;

3. mapa;

4. ubicación o marcador;

5. Link Cómo llegar;

6. teléfono;

7. horarios;

8. IDs personalizados.

No cambies solamente el Heading.

Este es uno de los errores más importantes a evitar.

Clonar mapa vs clonar Card

Si toda la unidad es:

Location Card
├── Heading
├── Address
├── Map
└── Link

clona:

Location Card

No solamente Map.

Después actualiza todo el contenido.

Eliminar una ubicación

Selecciona la Card o unidad completa.

No elimines solamente el mapa

si después quedan:

Sucursal Norte
Av. ...
Cómo llegar

sin contexto suficiente.

A menos que quieras conservar esa ubicación como información textual.

Decide según el diseño.

IDs

Aplica la regla habitual:

ID
→ único

Si clonas:

id="map-centro"

no dejes:

id="map-centro"

en la segunda ubicación.

Puedes utilizar:

map-centro

map-norte

como ejemplos conceptuales.

No son IDs obligatorios.

Classes

Pueden compartirse.

Por ejemplo:

location-card

en todas las sucursales.

Esto permite mantener:

• mismo Padding;

• misma Typography;

• mismo Border.

Linked styles

Puede ser útil para:

• Cards;

• Headings;

• mapas;

• CTAs.

Si cambias el Border radius de una Card

y cambian todas:

puede ser correcto.

Si una ubicación necesita una excepción:

agrega una Class adicional.

No utilices IDs individuales solamente para estilos que deberían compartirse.

CSS localizado para mapa

Ejemplo conceptual:

.location-section .map-wrapper {
    width: 100%;
    min-height: 360px;
}

Si existe un Iframe interno:

.location-section .map-wrapper iframe {
    width: 100%;
    height: 100%;
}

Pero:

verifica primero la estructura real del componente.

Google Maps y Open Street Map pueden no utilizar exactamente el mismo HTML interno.

No copies el mismo selector a ciegas.

CSS global peligroso

Evita:

iframe {
    height: 450px;
}

porque puedes afectar:

• videos;

• calendarios;

• documentos;

• formularios externos.

Evita también:

.map {
    height: 500px;
}

si .map aparece en varios componentes.

Utiliza scope.

Por ejemplo:

.contact-location-section .map {
}

solo si esa es la Class real.

No utilices Height rígida global

Mapas diferentes pueden necesitar alturas diferentes.

overflow

Ten cuidado con:

overflow: hidden;

Puede ser útil en un wrapper con Border radius,

pero también podría cortar:

• controles;

• elementos externos;

dependiendo de la estructura.

Prueba.

pointer-events

No desactives:

pointer-events: none;

globalmente sobre mapas

si quieres permitir interacción.

Algunas personas utilizan esta técnica para evitar que el mapa capture el scroll,

pero también impide:

• mover;

• hacer zoom;

• seleccionar controles.

No la utilices sin una razón.

Si el mapa dificulta el scroll mobile

primero revisa:

• altura;

• ubicación;

• tamaño.

No elimines toda la interacción automáticamente.

position

Evita:

position: absolute;

para colocar el mapa en la página.

Puede superponerse con:

• Footer;

• texto;

• formularios.

Utiliza Grid.

z-index

No utilices:

z-index: 99999;

sin necesidad.

Los controles internos del mapa pueden tener su propia estructura.

Soluciona primero la jerarquía.

Border radius

Puede mejorar la integración visual.

Por ejemplo:

Mapa con esquinas redondeadas

dentro de una Card.

Puedes aplicarlo a un wrapper.

Pero si la imagen/mapa sobresale:

puede ser necesario ajustar Overflow.

Prueba los controles después.

Sombra

Una sombra suave puede utilizarse si coincide con el diseño.

No es necesaria para que el mapa funcione.

Mantén la funcionalidad por encima del efecto.

Background alrededor del mapa

Una Section puede utilizar:

• Background;

• Padding.

Ejemplo:

FONDO SUAVE

¿Dónde estamos?

Dirección

[ MAPA ]

Puede ayudar a separar Contacto del resto de la página.

No agregues Background al propio mapa si ya contiene su visualización.

Navigator y niveles

Antes de aplicar Background:

pregunta:

¿quiero afectar:
Section?
Card?
Map wrapper?

Selecciona el nivel correcto.

Responsive: desktop

Ejemplo:

┌──────────────────┬────────────────────────────┐
│                  │                            │
│ DATOS            │           MAPA             │
│                  │                            │
└──────────────────┴────────────────────────────┘

Puede utilizar:

5 + 7

O:

4 + 8

según el contenido.

No es obligatorio 6 + 6.

Si el mapa necesita más espacio

puede utilizar una columna mayor.

Responsive: tablet

Comprueba:

• dirección;

• CTA;

• mapa.

Puede mantener dos columnas

si existe espacio.

O apilar.

Diseña con el contenido real.

Responsive: mobile

Normalmente:

DATOS

MAPA

es una estructura robusta.

Asegúrate de que:

• dirección no se corte;

• Button no desborde;

• mapa no sea demasiado bajo;

• mapa no ocupe toda la experiencia.

Prueba con un teléfono real cuando sea posible

Los controles superiores del Editor

sirven para previsualizar.

La comprobación final es:

Ver página

Mapa y orientación de pantalla

Un usuario puede utilizar el teléfono:

• vertical;

• horizontal.

Un mapa muy estrecho puede funcionar mejor al girar la pantalla,

pero tu diseño principal debería seguir siendo usable en orientación vertical.

No obligues al visitante a girar el teléfono.

Mapa y accesibilidad

El mapa no debería ser la única fuente de información.

Proporciona:

• nombre;

• dirección;

• ciudad;

• detalles relevantes.

Esto permite comprender la ubicación incluso si el componente no puede utilizarse.

Links con textos claros

Utiliza:

Cómo llegar

en lugar de:

Haz clic aquí

El texto comunica mejor la acción.

No dependas únicamente de un icono

como:

📍

sin texto.

Puede acompañar,

pero no reemplazar la información.

Dirección y legibilidad

No escribas:

Av.Ejemplo1234Piso4Of402CiudadProvincia

Utiliza una estructura legible.

Por ejemplo:

Av. Ejemplo 1234
Piso 4, Oficina 402
Ciudad, Provincia

Puede ser más fácil de copiar y comprender.

Mapa y precisión

Evita frases como:

Estamos por el centro

como única indicación.

Agrega la dirección completa.

Si el lugar no tiene numeración

puedes describir:

• intersección;

• acceso;

• referencia;

cuando sea necesario.

Ejemplo:

Av. A y Calle B
Ingreso por Calle B

Siempre que esa información sea real.

Mapas y referencias

Una referencia puede ayudar:

A 200 metros de...

pero no sustituye la dirección.

Además

las referencias pueden cambiar.

No dependas únicamente de:

“al lado del local X”

si ese local puede cerrar.

Dirección estructural primero.

¿Qué hacer si el marcador aparece en otra ciudad?

Revisa la ubicación configurada.

Utiliza información más específica.

No intentes corregir visualmente moviendo el mapa con CSS.

Es un problema de datos,

no de diseño.

¿Qué hacer si el marcador está a una cuadra?

Comprueba:

• dirección;

• numeración;

• coordenadas;

• entrada real.

Si el proveedor geocodifica de forma aproximada:

puede ser necesario utilizar una ubicación más precisa si el componente lo permite.

No publiques hasta verificar.

¿Qué hacer si el negocio está dentro de un shopping?

Agrega:

• nombre del shopping;

• local;

• nivel;

• acceso;

además del mapa.

¿Qué hacer si está dentro de un parque industrial?

Agrega:

• parque;

• lote;

• nave;

• acceso;

cuando corresponda.

¿Qué hacer si solo atiendo con cita previa?

Puedes comunicar:

Atención con cita previa

junto a la ubicación.

No hagas que el visitante interprete:

“puedo ir en cualquier momento”

si no es así.

¿Qué hacer si no atiendo al público?

Pregunta si necesitas mostrar una dirección física.

No publiques una ubicación privada solamente porque puedes agregar un mapa.

Muestra únicamente información que realmente quieras hacer pública.

¿Qué hacer si trabajo solo online?

No necesitas un mapa.

Puedes utilizar:

• Formulario;

• WhatsApp;

• Email;

• información de atención.

No agregues un mapa decorativo.

¿Qué hacer si tengo un área de cobertura y no un local?

Un único pin puede ser engañoso.

Puede ser mejor:

• texto;

• lista de localidades;

• una imagen o recurso específico de cobertura;

según el caso.

No presentes un punto como si fuera una sucursal

si solo representa una zona.

¿Qué hacer si quiero mostrar una región completa?

Un mapa puede servir,

pero configura un nivel de visualización adecuado si el componente lo permite.

Y acompaña con texto:

Atendemos en...

No obligues al visitante a inferir el área por el Zoom.

¿Qué hacer si Google Maps no carga?

Revisa:

1. configuración del componente;

2. recurso externo;

3. conexión;

4. errores en la página;

5. cambios realizados.

No cambies inmediatamente a Iframe

sin identificar el problema.

¿Qué hacer si Open Street Map no carga?

Mismo procedimiento.

Verifica primero:

• ubicación;

• configuración;

• estructura;

• CSS.

¿Qué hacer si el mapa desapareció después de agregar CSS?

Busca reglas como:

display: none

height: 0

overflow

position

Un mapa puede existir

pero su contenedor tener:

height: 0

Resultado:

parece que desapareció.

No reconstruyas el mapa antes de revisar el Container.

¿Qué hacer si el mapa aparece cortado?

Revisa:

• Width;

• Height;

• wrapper;

• Overflow;

• Column.

¿Qué hacer si aparece scroll horizontal?

Revisa Width fija.

No utilices:

body {
    overflow-x: hidden;
}

para esconder el problema.

¿Qué hacer si el mapa es demasiado pequeño?

Puede ser:

• Column pequeña;

• Height baja;

• Container limitado.

Revisa la estructura antes de escribir CSS.

¿Qué hacer si es demasiado grande?

Mismo principio.

No reduzcas el mapa mediante:

transform: scale(.7);

como primera solución.

Modifica el tamaño del contenedor.

¿Qué hacer si el mapa ocupa todo el ancho pero quiero contenido Boxed?

Utiliza una Section con:

Container width → Boxed

según tu composición.

¿Qué hacer si quiero el mapa Full?

Puedes utilizar:

Container width → Full

cuando el diseño lo requiera.

Pero no significa que todos los textos deban quedar Full.

Puedes tener:

Section Full
├── texto contenido
└── mapa amplio

según la estructura.

¿Qué hacer si quiero mapa Full y Card de información superpuesta?

Es una composición más avanzada.

Antes de utilizar:

position: absolute

pregunta si:

Grid

puede resolverlo de forma más robusta.

Una Card junto al mapa suele ser más responsive.

Superposiciones requieren mayor cuidado.

¿Qué hacer si el mapa captura el scroll del usuario?

Primero evalúa:

• altura del mapa;

• posición;

• mobile.

Puede que simplemente sea demasiado grande.

No desactives la interacción completa sin necesidad.

¿Qué hacer si el CTA Cómo llegar no funciona?

Selecciona el Link.

Revisa:

Url

Comprueba que no sea:

#

Después prueba mediante Ver página.

¿Qué hacer si abre otra sucursal?

Actualiza la URL.

Este error suele aparecer al clonar Cards.

¿Qué hacer si quiero abrir indicaciones en una nueva pestaña?

Revisa:

Target

del Link.

Elige un comportamiento coherente con tu Página web.

¿Qué hacer si tengo dos Buttons diferentes?

Por ejemplo:

[ CÓMO LLEGAR ]
[ CONTACTAR ]

Deben tener acciones claramente diferentes.

No hagas que ambos lleven al mapa.

¿Qué hacer si el mapa muestra datos externos que cambiaron?

Recuerda:

el proveedor puede actualizar:

• nombres;

• calles;

• información.

Revisa periódicamente.

Si detectas un dato incorrecto en el proveedor

puede necesitar corregirse desde el servicio correspondiente,

no desde el Editor de bloques.

Waclis controla el bloque,

pero no necesariamente los datos cartográficos externos.

¿Qué hacer si quiero personalizar los colores del mapa?

Eso depende de las capacidades específicas del componente o proveedor.

No afirmaremos una opción de estilo del mapa

si no aparece en tu configuración.

Puedes personalizar:

• Section;

• Card;

• wrapper;

sin necesidad de cambiar el contenido cartográfico interno.

¿Qué hacer si quiero ocultar controles del mapa?

No lo hagas solo por estética.

Los controles pueden ayudar a:

• hacer Zoom;

• navegar.

Si la opción existe en el componente

evalúa la experiencia antes de modificarla.

No ocultes funcionalidad necesaria.

HTML del elemento

Para usuarios avanzados:

Editar código HTML <>

puede ayudarte a identificar la estructura del componente.

Pero no necesitas HTML

para cambiar:

• Heading;

• dirección;

• Padding;

• ubicación del bloque.

Utiliza primero las herramientas visuales.

Si el componente utiliza un Iframe interno

no elimines:

• src;

• atributos;

• wrappers;

sin comprender su función.

Si utiliza otra estructura

mismo principio.

Code editor global

No lo utilices para cambiar:

dirección A

por:

dirección B

si el componente ofrece configuración visual.

JavaScript

No agregues JavaScript para:

• centrar el mapa;

• cambiar Width;

• modificar Border radius.

Utiliza:

• Grid;

• Estilo;

• CSS.

Tampoco agregues una segunda biblioteca de mapas

si el Widget existente ya resuelve la necesidad.

Puede generar:

• carga adicional;

• conflictos;

• mantenimiento innecesario.

Inteligencia artificial para elegir composición

Puedes utilizar ChatGPT, Claude o Gemini.

Por ejemplo:

Tengo una página de Contacto en Waclis.

Necesito mostrar:
- nombre del local;
- dirección;
- teléfono;
- horarios;
- mapa;
- botón Cómo llegar.

Propón una estructura:
- desktop;
- mobile.

Utiliza Container y Grid Row.

No uses position:absolute.
No inventes información.

IA para varias sucursales

Tengo estas sucursales:

[lista]

Necesito decidir si conviene mostrar:
- un mapa por sucursal;
- un mapa general + lista;
- Cards con dirección + Link.

Analiza:
- cantidad de sucursales;
- claridad;
- mobile;
- rendimiento.

No inventes ubicaciones.

IA para revisar direcciones

Tengo estas ubicaciones:

[pegar nombres y direcciones]

Revisa solamente:
- consistencia de formato;
- si falta ciudad/provincia en alguna;
- diferencias de abreviaturas.

No corrijas ni inventes direcciones.

IA para verificar estructura de una Card

Tengo esta estructura en Waclis:

[pegar HTML de una Card de ubicación]

Identifica:
- nombre;
- dirección;
- mapa;
- Link Cómo llegar;
- IDs;
- Classes.

No modifiques nada.

IA para revisar una Card clonada

Cloné esta Card para una segunda sucursal:

[HTML]

Compara ambas y busca contenido que haya quedado duplicado:
- dirección;
- Link;
- ID;
- teléfono;
- horario.

No inventes valores nuevos.

IA para CSS responsive

Tengo una sección de ubicación en Waclis.

Raíz:
.location-section

Mapa:
.location-map

Necesito:
- ancho 100 % de su columna;
- altura 420 px desktop;
- 320 px mobile;
- Border radius 12 px;
- no modificar otros mapas, videos o Iframes.

Waclis utiliza Bootstrap 4.

No cambies HTML.
No agregues JavaScript.

Devuélveme solamente CSS limitado a .location-section.

IA para detectar overflow

Este mapa genera scroll horizontal en celular.

HTML:
[pegar]

CSS:
[pegar]

Busca:
- width fija;
- min-width;
- margin lateral;
- position;
- iframe demasiado ancho;
- Grid Column incorrecta.

No utilices overflow-x:hidden como solución.

IA para detectar CSS global peligroso

Revisa este CSS de Waclis:

[pegar]

Busca reglas globales que puedan afectar mapas, especialmente:

iframe
.map
.google-map
.openstreetmap
width
height
position
overflow
pointer-events
z-index

Indica qué reglas tienen demasiado alcance.

No modifiques el código.

IA para mejorar texto de ubicación

Tengo estos datos reales:

Nombre:
[nombre]

Dirección:
[dirección]

Horario:
[horario]

Información adicional:
[datos]

Redacta una sección breve de ubicación para una Página web.

No inventes referencias, transporte, distancias ni horarios.

IA para revisar claridad

Esta es la información de ubicación que verá el usuario:

[pegar]

Comprueba si permite identificar claramente:
- nombre del lugar;
- calle;
- numeración;
- ciudad;
- información de acceso.

No completes datos faltantes.
Solo indícame qué falta.

IA para decidir mapa vs Link

Tengo esta situación:

[describir ubicación/página]

Analiza si necesito:
- mapa interactivo;
- dirección + botón Cómo llegar;
- ambos.

Considera:
- importancia de la visita física;
- cantidad de ubicaciones;
- rendimiento;
- mobile.

No inventes funciones de Waclis.

Buenas prácticas para Google Maps

Recomendamos:

• utilizar datos reales;

• comprobar el marcador;

• acompañar con dirección escrita;

• utilizar CTA Cómo llegar cuando aporte;

• revisar mobile;

• controlar altura;

• evitar múltiples mapas innecesarios;

• mantener la información actualizada.

Buenas prácticas para Open Street Map

Recomendamos:

• verificar la ubicación;

• acompañar con dirección escrita;

• revisar el resultado final;

• probar interacción;

• adaptar Height y Width;

• mantener contenido actualizado;

• no depender exclusivamente del mapa.

Buenas prácticas generales para mapas

• utiliza un mapa solamente si ayuda;

• muestra nombre de la ubicación;

• muestra dirección escrita;

• incluye ciudad o región cuando sea necesario;

• comprueba el marcador;

• agrega instrucciones de acceso cuando aporten;

• utiliza un Link real para Cómo llegar;

• revisa Links después de clonar;

• utiliza Navigator;

• utiliza Grid para layout;

• adapta mobile;

• evita Width rígido;

• evita mapas excesivamente altos;

• limita cantidad de mapas;

• considera privacidad y rendimiento;

• prueba el frontend real.

Errores frecuentes

Mostrar solamente el mapa

Agrega la dirección escrita.

Confiar en que el pin es correcto sin comprobarlo

Verifica.

Mostrar una dirección y un mapa de otra

Es un error crítico.

Clonar una sucursal y actualizar solo el nombre

Actualiza todos los datos.

Dejar el CTA Cómo llegar de la sucursal anterior

Prueba cada Link.

Utilizar un mapa para una empresa que solo trabaja online

No es necesario.

Mostrar una ubicación privada que no debería ser pública

Publica únicamente información apropiada.

Mostrar 15 mapas cuando una lista sería más clara

Simplifica.

Utilizar un mapa demasiado bajo

Puede ser difícil de utilizar.

Utilizar un mapa de 1000 px de alto sin necesidad

Puede dominar toda la página.

Utilizar height:100vh automáticamente

No suele ser necesario en una sección de Contacto.

Utilizar Width fijo

Puede romper mobile.

Posicionar el mapa mediante margin-left

Utiliza Grid.

Utilizar Position absolute para la maquetación principal

Puede romper responsive.

Aplicar CSS global a iframe

Puede afectar otros Widgets.

Utilizar overflow-x:hidden para ocultar un mapa demasiado ancho

Corrige el elemento.

Desactivar pointer-events sin evaluar la interacción

Puede impedir utilizar el mapa.

Hacer el mapa tan grande en mobile que capture toda la navegación

Ajusta altura.

No comprobar el scroll en celular

Pruébalo realmente.

Creer que el mapa reemplaza información de piso o local

Agrégala como texto.

Creer que los horarios del bloque se actualizan desde el mapa

No asumas sincronización.

Mantener una dirección antigua después de una mudanza

Actualiza toda la Página web.

Utilizar una captura de mapa desactualizada

Utiliza recursos adecuados.

Incrustar mapas desconocidos mediante código externo sin necesidad

Utiliza Widgets específicos.

Agregar otra biblioteca de mapas mediante JavaScript

Evita dependencias innecesarias.

No utilizar Ver página

La comprobación final debe hacerse en el frontend.

Flujo recomendado para una ubicación

1. DEFINIR LA UBICACIÓN REAL
↓
2. CONFIRMAR LA DIRECCIÓN
↓
3. ELEGIR GOOGLE MAPS U OPEN STREET MAP
↓
4. AGREGAR EL WIDGET
↓
5. ABRIR NAVIGATOR
↓
6. CONFIGURAR LA UBICACIÓN
↓
7. VERIFICAR EL MARCADOR
↓
8. AGREGAR NOMBRE DEL LUGAR
↓
9. AGREGAR DIRECCIÓN ESCRITA
↓
10. AGREGAR INFORMACIÓN DE ACCESO SI CORRESPONDE
↓
11. AGREGAR CTA CÓMO LLEGAR
↓
12. CONFIGURAR GRID
↓
13. REVISAR WIDTH / HEIGHT
↓
14. REVISAR DESKTOP
↓
15. REVISAR TABLET
↓
16. REVISAR CELULAR
↓
17. GUARDAR CAMBIOS
↓
18. VER PÁGINA
↓
19. PROBAR EL MAPA
↓
20. PROBAR CÓMO LLEGAR

Flujo recomendado para varias sucursales

1. LISTAR TODAS LAS UBICACIONES
↓
2. DECIDIR SI NECESITAS UNO O VARIOS MAPAS
↓
3. CREAR LA ESTRUCTURA DE SUCURSAL
↓
4. COMPLETAR NOMBRE
↓
5. COMPLETAR DIRECCIÓN
↓
6. CONFIGURAR MAPA
↓
7. CONFIGURAR CTA
↓
8. CLONAR LA UNIDAD COMPLETA
↓
9. REEMPLAZAR TODOS LOS DATOS
↓
10. REVISAR IDS
↓
11. REVISAR TODOS LOS LINKS
↓
12. REVISAR RESPONSIVE
↓
13. GUARDAR CAMBIOS
↓
14. VER PÁGINA
↓
15. PROBAR CADA UBICACIÓN

Checklist de ubicación

• El nombre del lugar es correcto.

• La calle es correcta.

• La numeración es correcta.

• La ciudad es correcta.

• La provincia/región es correcta cuando corresponde.

• El país está indicado cuando es necesario.

• Piso, oficina o local están indicados cuando corresponden.

• La información de acceso es correcta.

• El marcador corresponde a la ubicación.

• No existe otra dirección con la que pueda confundirse.

• La dirección escrita coincide con el mapa.

• Cómo llegar apunta al mismo lugar.

• Los horarios son correctos si los publico.

• El teléfono es correcto si lo publico.

Checklist del mapa

• Elegí Google Maps u Open Street Map conscientemente.

• No agregué ambos sin necesidad.

• El mapa aporta valor.

• Utilicé Navigator.

• El componente está dentro de la Section correcta.

• El mapa tiene un ancho apropiado.

• La altura permite utilizarlo.

• No existe Width fijo problemático.

• No existe Height excesiva.

• Desktop se ve correctamente.

• Tablet se ve correctamente.

• Celular se ve correctamente.

• Puedo desplazar la página en celular.

• Los controles del mapa pueden utilizarse.

• No existe scroll horizontal inesperado.

• No apliqué CSS global sobre Iframes o mapas.

• No desactivé interacción sin necesidad.

• El proveedor externo carga correctamente.

Checklist para varias sucursales

• Cada sucursal tiene un nombre diferente y correcto.

• Cada dirección corresponde a su mapa.

• Cada CTA Cómo llegar corresponde a la sucursal correcta.

• No quedan IDs duplicados.

• No quedan teléfonos del bloque original.

• No quedan horarios del bloque original.

• No quedan marcadores de otra sucursal.

• La cantidad de mapas es razonable.

• La página sigue siendo fácil de recorrer.

• Mobile no se vuelve excesivamente largo o pesado.

• Probé todos los Links individualmente.

Checklist general

• El mapa no es la única forma de conocer la ubicación.

• La dirección aparece como texto.

• No inventé datos.

• No mostré una ubicación privada innecesariamente.

• No asumí actualización automática.

• No asumí que el mapa controla los horarios del bloque.

• No asumí que Waclis controla los datos del proveedor externo.

• Utilicé Grid para el layout.

• No utilicé Position absolute innecesariamente.

• No utilicé Margin rígido para posicionar el mapa.

• No utilicé overflow-x:hidden para ocultar errores.

• No agregué JavaScript innecesario.

• Revisé privacidad y rendimiento.

• Guardé los cambios.

• Revisé mediante Ver página.

• Utilicé realmente el mapa y los Links.

En resumen

Waclis incluye dos componentes específicos para incorporar mapas:

GOOGLE MAPS

y:

OPEN STREET MAP

Puedes utilizarlos para mostrar:

• sucursales;

• oficinas;

• showrooms;

• puntos de retiro;

• lugares de eventos;

• otras ubicaciones.

Pero la regla más importante es:

el mapa no sustituye la dirección escrita.

Una estructura recomendable puede ser:

NOMBRE DEL LUGAR

DIRECCIÓN

INFORMACIÓN DE ACCESO

[ MAPA ]

[ CÓMO LLEGAR ]

La segunda regla fundamental

comprueba siempre el marcador.

No basta con que el componente cargue.

Debe mostrar:

la ubicación correcta

Especialmente después de clonar

revisa:

NOMBRE
+
DIRECCIÓN
+
MAPA
+
LINK
+
HORARIOS
+
TELÉFONO
+
ID

Para responsive

utiliza:

Container + Grid Row

por ejemplo:

Desktop

[ INFORMACIÓN ][       MAPA       ]

Y:

Mobile

INFORMACIÓN

MAPA

Evita:

width: 900px;
margin-left: 400px;
position: absolute;

para organizar la ubicación.

Utiliza la estructura del Editor.

También recuerda

Google Maps y Open Street Map dependen de servicios externos.

Eso significa que:

• pueden tardar en cargar;

• pueden cambiar;

• pueden quedar temporalmente no disponibles.

Por eso:

DIRECCIÓN ESCRITA

sigue siendo fundamental.

Si tienes muchas sucursales

no es obligatorio mostrar un mapa completo por cada una.

Puedes utilizar:

lista de ubicaciones
+
Links Cómo llegar
+
mapa principal

cuando resulte más claro y liviano.

Finalmente

la verificación correcta es:

CONFIGURAR
↓
COMPROBAR MARCADOR
↓
REVISAR DIRECCIÓN
↓
GUARDAR CAMBIOS
↓
VER PÁGINA
↓
PROBAR MAPA
↓
PROBAR CÓMO LLEGAR
↓
REVISAR EN CELULAR

En una sección de ubicación, la precisión es más importante que cualquier efecto visual.

Un Border radius imperfecto es un detalle estético.

Un pin colocado en la dirección equivocada puede hacer que un cliente vaya al lugar incorrecto.

Por eso, antes de considerar terminada una sección de mapa, comprueba siempre:

“Si una persona nunca estuvo aquí, ¿podría encontrar correctamente el lugar utilizando la información que acabamos de publicar?”

Si la respuesta es sí, la ubicación está bien preparada.