El bloque Google Maps te permite incrustar un mapa interactivo de Google directamente en cualquier página de SeedProd. Tanto si deseas mostrar la ubicación de tu negocio, un lugar de reunión o un área de servicio, este bloque te permite mostrar fácilmente un mapa en tiempo real justo donde tus visitantes lo necesitan.
Con controles para la ubicación, el nivel de zoom, las dimensiones y la alineación, puedes adaptar el mapa para que encaje perfectamente en el diseño de tu página, sin necesidad de códigos de inserción ni configuración de API.
Añadir el bloque de Google Maps a tus páginas
Sigue estos pasos para añadir un bloque de Google Maps a tu página SeedProd:
Paso 1: Añadir el bloque
En Diseño > Bloques, arrastra y suelta el bloque Google Maps en la sección deseada de tu página.
Paso 2: Configurar los ajustes de contenido
Una vez añadido, haz clic en el bloque de Google Maps para abrir su configuración. En la pestaña Contenido, configura la ubicación del mapa y las dimensiones de visualización.
Google Maps:
- Ubicación: Introduzca la dirección o el nombre del lugar que desea que aparezca en el mapa. Puede utilizar una dirección completa, el nombre de una ciudad, el nombre de una empresa o cualquier ubicación reconocible por Google Maps.
- Zoom: Establezca el nivel de zoom del mapa entre 0 (vista mundial) y 20 (detalle a nivel de calle). Un valor de 10 muestra una vista a nivel de ciudad, mientras que valores más altos acercan la imagen a la ubicación especificada.
- Ancho (%): Establece el ancho del mapa como un porcentaje de su contenedor, entre 0 y 100 %.
- Altura (px): Establece la altura del mapa en píxeles, de 0 a 470 px.
- Alineación: Establezca la alineación horizontal del mapa dentro de su sección: izquierda, centrada o derecha.
Paso 3: Personalizar el diseño
En la pestaña Avanzado, puedes personalizar el aspecto visual y el espaciado de tu bloque de Google Maps.
Estilos:
- Sombra: añade una sombra alrededor del mapa incrustado. Elige entre Ninguna, Muy fina, Pequeña, Mediana, Grande, Muy grande o 2 veces más grande para añadir profundidad y separación visual del contenido circundante.
Espaciado:
- Margen: controla el espacio exterior alrededor del bloque de Google Maps (superior, derecho, inferior, izquierdo). Admite valores por dispositivo para ordenadores de sobremesa, tabletas y móviles.
- Relleno: ajusta el espaciado interior dentro del bloque de Google Maps (arriba, derecha, abajo, izquierda). Admite valores por dispositivo para ordenadores de sobremesa, tabletas y móviles.
Atributos:
- CSS ID: Muestra el identificador único generado automáticamente para tu bloque de Google Maps, creado automáticamente por SeedProd para personalizar el estilo o la orientación de JavaScript.
- Clase personalizada: añade clases CSS personalizadas para aplicar estilos específicos de tu tema o CSS personalizado.
- Atributos personalizados: añade cualquier atributo HTML al elemento contenedor del bloque. Introduce cada atributo en una nueva línea utilizando el formato: nombre-del-atributo|valor.
Visibilidad del dispositivo:
- Ocultar en el escritorio: Ocultar el bloque de Google Maps en las pantallas de escritorio.
- Ocultar en tableta: Ocultar el bloque de Google Maps en dispositivos tableta.
- Ocultar en dispositivos móviles: Ocultar el bloque de Google Maps en dispositivos móviles.
Efectos de animación:
- Animación de entrada: elige un efecto de animación que se reproduzca cuando el bloque de Google Maps aparezca en pantalla, como Rebotar, Aparecer gradualmente, Acercar, Girar y muchos más.
Paso 4: Guarde los cambios
Una vez que hayas terminado de configurar el bloque de Google Maps y personalizar su apariencia, asegúrate de guardar tu trabajo.
¡Has añadido correctamente un bloque de Google Maps a tu página! Al incrustar un mapa en tiempo real, los visitantes podrán encontrar fácilmente tu ubicación, obtener indicaciones y saber dónde te encuentras, todo ello sin salir de tu página. Prueba con diferentes niveles de zoom y dimensiones para encontrar el diseño que mejor se adapte a tu página.