Secciones de Mapas y localización en el editor de bloques de Waclis

En este tutorial aprenderás a insertar, editar y personalizar secciones de mapas y localización utilizando los bloques prearmados del editor de bloques de Waclis.

Estas secciones se utilizan para:

• mostrar la ubicación física de un negocio

• indicar sucursales, oficinas o puntos de atención

• facilitar cómo llegar a un local

• reforzar confianza y presencia territorial

Bloques de mapas y localización disponibles

Dentro de esta categoría, Waclis incluye bloques orientados a:

• mapas embebidos (Google Maps u otros servicios)

• secciones con dirección, texto y mapa

• bloques combinados de texto + mapa

Cómo insertar un bloque de Mapas y localización

Acceso al editor de bloques

Ruta:

Configuraciones > Editar sitio > Menues

Luego, haz clic en el icono de la paleta de pintor para acceder al editor de bloques.

Insertar el bloque

1. Haz clic en el icono Sections.

2. Selecciona Sections.

3. Busca la categoría Mapas y localización.

4. Despliega la categoría si está colapsada.

5. Selecciona el bloque que deseas utilizar.

6. Haz clic en el botón “+”.

7. El mapa se insertará en la vista del sitio.

Cómo editar un bloque de Mapas y localización

Al igual que el resto de las categorías, existen tres formas principales de edición.

Forma 1: Edición directa desde la vista (visual)

Es la forma más simple y recomendada.

1. Haz clic directamente sobre:

   • el mapa

   • textos descriptivos

   • dirección o datos de contacto

2. Se abrirá el panel Properties.

3. Desde allí podrás:

   • cambiar textos visibles

   • reemplazar la URL del mapa

   • ajustar alineaciones

   • modificar tamaños o espaciados básicos

Forma 2: Edición desde el Navigator

Ideal cuando el bloque combina varios elementos.

1. Haz clic en el icono Navigator.

2. Visualiza la estructura del bloque:

   • Section

   • Container

   • Map / iframe

   • Text / Heading / Paragraph

3. Selecciona el elemento específico que deseas modificar.

4. El panel Properties se abrirá automáticamente.

Esto permite editar solo el mapa o solo el texto sin afectar todo el bloque.

Forma 3: Edición desde el Code editor (HTML)

Pensada para usuarios con conocimientos técnicos.

1. Abre el Code editor desde la parte inferior del editor.

2. Se mostrará el HTML del bloque.

3. Desde aquí puedes:

   • cambiar el iframe del mapa

   • reemplazar coordenadas

   • usar URLs personalizadas de Google Maps

   • ajustar atributos avanzados (width, height, loading, etc.)

Configurar el componente de Google Maps

No es necesario obtener ni pegar una URL de Google Maps para mostrar un mapa en tu sitio.

El mapa se configura directamente desde el editor de bloques, utilizando el componente nativo de Google Maps, que permite definir la dirección y todos los parámetros visuales desde el panel de propiedades.

Configurar el mapa desde el bloque de Mapas

Cuando insertas una sección de Mapas y localización o seleccionas un mapa existente:

1. Haz clic sobre el mapa en la vista del editor.

2. Se abre el panel Properties del componente Google Maps.

3. Desde allí puedes configurar:

• Address

  Escribe la dirección completa que deseas mostrar

  (por ejemplo: calle, ciudad, país).

  No es necesario copiar enlaces externos.

• Map type

  Selecciona el tipo de mapa:

  • Roadmap (mapa estándar)

  • Satellite

  • Hybrid

  • Terrain

• Zoom

  Ajusta el nivel de zoom usando el control deslizante:

  • valores bajos → vista general

  • valores altos → vista cercana

• Key (opcional)

  Campo para ingresar una API Key de Google Maps, solo si tu configuración lo requiere.

  En la mayoría de los casos no es obligatorio.

• Id / Class

  Permiten asignar identificadores o clases CSS para estilos avanzados.

Todos los cambios se reflejan de forma inmediata en la vista del sitio.

Insertar Google Maps como componente en cualquier bloque

Además de las secciones prearmadas, puedes insertar un mapa en cualquier parte del sitio usando los componentes del editor.

Pasos:

1. Abre el editor de bloques.

2. Haz clic en el icono Components.

3. Ingresa a la categoría Widgets.

4. Selecciona Google Maps.

5. Arrástralo o insértalo en el bloque deseado.

6. Configura la dirección y opciones desde Properties, igual que en una sección de mapas.

Esto te permite:

• agregar mapas dentro de secciones personalizadas

• combinar mapas con texto, imágenes u otros bloques

• ubicar mapas en layouts libres

Punto importante a tener en cuenta con el componente de Google maps

• No se usan iframes manuales.

• No se requiere copiar código HTML externo.

• No es necesario generar enlaces desde Google Maps.

• Todo se configura desde el panel visual del editor.

Limitaciones importantes

Los bloques de mapas:

• no detectan ubicación automática del visitante

• no cambian dinámicamente según el usuario

• no se conectan a datos del sistema

Todo el contenido es estático y configurable manualmente.

Buenas prácticas de uso

• Coloca el mapa cerca de información de contacto.

• Usa direcciones claras y completas.

• Evita mapas demasiado pequeños.

• No sobrecargues la sección con texto innecesario.

• Asegúrate de que el mapa sea visible también en móvil.

Diferencia con otras integraciones

Los bloques de mapas del editor:

• son visuales

• rápidos de implementar

• ideales para ubicación general

No reemplazan integraciones avanzadas como:

• APIs de geolocalización

• sistemas de sucursales dinámicas

• mapas interactivos complejos