--- url: 'https://dxpr.com/es/hc/documentacion/aprender-dxpr-builder/elementos/mapa' title: 'Añadir un mapa | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T00:13:36+00:00' updated: '2026-10-24T19:36:26+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: 'Muestras a las visitas dónde encontrarte con un mapa de Google de cualquier dirección. Úsalo en páginas de contacto, eventos y cómo llegar.' tags: - 'Data and motion' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T19:36:26+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Añadir un mapa' description: 'Muestras a las visitas dónde encontrarte con un mapa de Google de cualquier dirección. Úsalo en páginas de contacto, eventos y cómo llegar.' image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T00:13:36+0000' dateModified: '2026-10-24T19:36:26+0000' author: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' mainEntityOfPage: 'https://dxpr.com/es/hc/documentacion/aprender-dxpr-builder/elementos/mapa' articleSection: 'Datos y animación' - '@type': WebPage '@id': 'https://dxpr.com/es/hc/documentacion/aprender-dxpr-builder/elementos/mapa' description: 'Muestras a las visitas dónde encontrarte con un mapa de Google de cualquier dirección. Úsalo en páginas de contacto, eventos y cómo llegar.' breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: Inicio item: 'https://dxpr.com/es' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: es --- [Centro de ayuda](/es/hc)/[Documentación](/es/hc/documentacion) /[Aprende DXPR Builder](/es/hc/documentation/learn-dxpr-builder) /[Crear páginas](/es/hc/documentation/learn-dxpr-builder/build) /[Añadir contenido](/es/hc/documentation/learn-dxpr-builder/elements) /[Datos y animación](/es/hc/documentation/learn-dxpr-builder/elements/data-and-motion) # Añadir un mapa. Aprende DXPR BuilderCrear páginasAñadir contenidoDatos y animación ## En esta guía Guías relacionadas - [Cambia el aspecto de un elemento en el panel Style](/es/hc/documentacion/aprender-dxpr-builder/ajustes-elemento/pestana-style) Muestras a las visitas dónde encontrarte con un mapa de Google de cualquier dirección. Úsalo en páginas de contacto, eventos y cómo llegar. ## Añade un mapa Abre tu página con la sesión iniciada: los controles del constructor aparecen cuando pasas el cursor sobre la zona de contenido. [Crea tu primera página](/es/hc/documentacion/aprender-dxpr-builder/primeros-pasos/primera-pagina) muestra lo básico. 1. Pasa el cursor sobre la columna y haz clic en **+** en su barra de controles, o haz clic en **Add Elements** en una página vacía. Abre la pestaña **Content** y haz clic en **Map**. Queda arriba de la columna y su diálogo de ajustes se abre. 2. En el diálogo, escribe el **Address** con la ciudad y el país. 3. Define el **Map height** si quieres otro. El valor predeterminado es `400px`, y un número simple como 360 cuenta como píxeles. 4. Haz clic en **Save** en el diálogo. Luego haz clic en **Save** en la barra de herramientas arriba de la zona de contenido para guardar la página. ## Lo que ves Un mapa de Google centrado en la dirección que escribiste llena la columna, y las visitas pueden ampliarlo y arrastrarlo. En el vídeo, muestra Rue de la Loi 200 en Bruselas con 360 píxeles de alto. Las visitas lo ven cuando guardas la página y está publicada. ## Configura tu mapa Pasa el cursor sobre el elemento y abre **More > Settings** en su barra de controles. Opciones: - **Address:** el lugar a mostrar. Va a Google Maps como una búsqueda, así que escríbelo como lo harías en Google Maps. - **Map width:** `100%` por defecto, que rellena la columna. Un número simple cuenta como píxeles, y valores CSS como `600px` también sirven. - **Map height:** `400px` por defecto. Un número simple cuenta como píxeles. El mapa no necesita clave de API de Google. ## Si no lo ves - **Map no está en la pestaña Content.** Tu perfil de usuario lo oculta. Pide a una cuenta administradora que lo active en [User profiles](/es/hc/documentacion/aprender-dxpr-builder/administracion/perfiles-usuario-administracion). - **Ya no está tras recargar.** La página no se guardó. Añádelo de nuevo y haz clic en **Save** en la barra de herramientas arriba de la zona de contenido. - **El recuadro del mapa está vacío, gris o muestra un error de conexión.** El mapa carga en un marco desde maps.google.com, y algo bloquea ese marco: una extensión de privacidad del navegador, una herramienta de consentimiento de cookies o la política de seguridad de tu sitio. Permite maps.google.com, o comprueba la página en otro navegador. - **El mapa muestra el lugar equivocado.** Google asoció otro lugar al **Address**. Añade el número de calle, ciudad y país. - **El mapa es muy pequeño.** **Map width** o **Map height** está bajo. Pasa el cursor sobre el elemento y abre **More > Settings**, y prueba `100%` y `400px`. ## ¿Qué sigue? [Panel Style](/es/hc/documentacion/aprender-dxpr-builder/ajustes-elemento/pestana-style) para cambiar espaciado y fondo de tu mapa.