El bloque de Google Maps te permite incrustar un mapa interactivo de Google directamente en cualquier página de SeedProd. Ya sea que desees mostrar la ubicación de tu negocio, un lugar de reunión o un área de servicio, este bloque facilita la visualización de un mapa en vivo 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 incrustació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 de 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: Introduce la dirección o el nombre del lugar que deseas que muestre el mapa. Puedes usar una dirección postal completa, el nombre de una ciudad, el nombre de un negocio o cualquier ubicación reconocible por Google Maps.
- Zoom: Establece el nivel de zoom del mapa, de 0 (vista mundial) a 20 (detalle a nivel de calle). Un valor de 10 muestra una vista a nivel de ciudad, mientras que valores más altos se acercan más a la ubicación especificada.
- Ancho (%): Establece el ancho del mapa como un porcentaje de su contenedor, de 0 a 100%.
- Alto (px): Establece la altura del mapa en píxeles, de 0 a 470px.
- Alineación: Establece la alineación horizontal del mapa dentro de su sección: Izquierda, Centro o Derecha.
Paso 3: Personaliza el Diseño
En la pestaña Avanzado, puedes personalizar la apariencia visual y el espaciado de tu bloque de Google Maps.
Estilos:
- Sombra: Añade una sombra paralela alrededor del mapa incrustado. Elige entre Ninguna, Fina, Pequeña, Mediana, Grande, Extra Grande o Doble Extra Grande para añadir profundidad y separación visual del contenido circundante.
Espaciado:
- Margen: Controla el espaciado exterior alrededor de tu bloque de Google Maps (Superior, Derecho, Inferior, Izquierdo). Admite valores por dispositivo para escritorio, tableta y móvil.
- Relleno: Ajusta el espaciado interior de tu bloque de Google Maps (Superior, Derecho, Inferior, Izquierdo). Admite valores por dispositivo para escritorio, tableta y móvil.
Atributos:
- ID CSS: Muestra el identificador único generado automáticamente para tu bloque de Google Maps, creado automáticamente por SeedProd para estilos personalizados o para apuntar con JavaScript.
- Clase Personalizada: Agregue clases CSS personalizadas para aplicar estilos específicos de su tema o CSS personalizado.
- Atributos Personalizados: Agregue cualquier atributo HTML al elemento contenedor del bloque. Ingrese cada atributo en una nueva línea usando el formato: nombre-atributo|valor.
Visibilidad del Dispositivo:
- Ocultar en Escritorio: Oculta el bloque de Google Maps en pantallas de escritorio.
- Ocultar en Tableta: Oculta el bloque de Google Maps en dispositivos tableta.
- Ocultar en Móvil: Oculta 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 la vista, como Rebote, Fundido de entrada, Zoom de entrada, Girar de entrada y muchos más.
Paso 4: Guarde sus 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 con éxito un bloque de Google Maps a tu página! Incrustar un mapa interactivo facilita a los visitantes encontrar tu ubicación, obtener indicaciones y entender dónde te encuentras, todo sin salir de tu página. Experimenta con los niveles de zoom y las dimensiones para encontrar el diseño que mejor se adapte a tu proyecto.