Cómo insertar un mapa de Google usando el módulo de código de inserción de Odoo
Copia el código de inserción iframe de Google Maps, abre el editor de tu sitio web de Odoo, arrastra el bloque de Código de inserción de la sección Contenido dinámico a tu página, pega...
Para insertar un mapa de Google en Odoo usando el módulo integrado de Código de inserción, primero obtén el fragmento iframe de Google Maps, luego agrega el bloque de Código de inserción a tu página en el editor de sitio web y pega el código. El mapa se renderiza en el sitio en vivo sin ningún desarrollo personalizado.
Cómo funciona el bloque de Código de inserción
El bloque de Código de inserción es una característica principal del sitio web de Odoo. Almacena cualquier fragmento HTML que pegues en él. Cuando un visitante carga la página, Odoo renderiza ese fragmento directamente en el diseño de la página. No se realiza ningún procesamiento en el servidor. El bloque actúa como un contenedor para HTML sin procesar, incluidos iframes, scripts o estilos personalizados.
Este bloque es perfecto para integraciones de terceros como Google Maps, videos de YouTube o widgets de reservas. No necesitas editar archivos de plantilla ni escribir código Python. El bloque respeta la cuadrícula responsiva de la página. Puedes colocarlo dentro de columnas, secciones o cualquier contenedor.
Odoo no sanitiza el fragmento. Por lo tanto, puedes pegar cualquier HTML válido. Pero ten cuidado. El código malicioso podría romper tu sitio. Siempre pega código de fuentes confiables como Google Maps.
Requisitos previos
- Una instancia de Odoo con la aplicación Sitio web instalada (estándar en Odoo Online, Odoo.sh y en las instalaciones locales).
- Acceso de editor a la página donde deseas el mapa.
- Un enlace de inserción de Google Maps: no se requiere clave API para el iframe básico de "Insertar un mapa".
Guía paso a paso (con detalles del paquete fuente)
- Obtén el código de inserción de Google Maps. Abre Google Maps en un navegador, busca la dirección o el lugar, haz clic en Compartir → Insertar un mapa, elige un tamaño (pequeño, mediano, grande o personalizado) y luego haz clic en Copiar HTML. El portapapeles ahora contiene una etiqueta
<iframe>. - Inicia sesión en tu cuenta de Odoo y accede al módulo "Sitio web". Desde el panel de control, haz clic en Sitio web. Luego navega a la página que deseas editar y haz clic en el botón Editar para abrir el panel de edición.
- Localiza el módulo de Código de inserción. En el panel de edición, desplázate por el panel de Bloques hasta llegar a la sección Contenido dinámico. El bloque está etiquetado como Código de inserción.
- Arrastra el bloque a la página. Suéltalo donde deseas que aparezca el mapa: dentro de una columna, una sección o directamente en la cuadrícula.
- Una vez colocado el módulo, haz clic en el botón "Editar" ubicado en el panel derecho para ingresar el código. Aparece una ventana emergente.
- En la ventana emergente que aparece, pega el fragmento de código proporcionado por Google Maps en el área designada y luego haz clic en "Guardar" para aplicar los cambios. El bloque ahora contiene el iframe.
- Opcional: Ajusta la visibilidad. Aún en el panel derecho, abre la sección Visibilidad. Puedes habilitar Ocultar en escritorio o Ocultar en móvil si el mapa solo debe mostrarse en ciertos dispositivos. Haz clic en Guardar nuevamente.
- Publica. Sal del editor y haz clic en Publicar (o Guardar si la página ya está en vivo). Visita la URL del front-end para confirmar que el mapa carga.
Obtener un iframe limpio de Google Maps
El diálogo "Insertar un mapa" produce un iframe con un ancho y alto fijos. Para diseños responsivos, reemplaza las dimensiones en píxeles con width="100%" y una altura razonable (por ejemplo, height="400"). Ejemplo:
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3..."
width="100%"
height="400"
style="border:0;"
allowfullscreen=""
loading="lazy"
referrerpolicy="no-referrer-when-downgrade"></iframe>Agregar loading="lazy" difiere el mapa hasta que el visitante se desplaza cerca de él, mejorando las puntuaciones de velocidad de página.
Problemas comunes y soluciones rápidas
- El mapa muestra "Esta página no puede cargar Google Maps correctamente". El src del iframe puede estar truncado. Recopia el código de inserción completo de Google Maps; la URL es larga y fácil de cortar.
- El mapa es demasiado pequeño o se desborda en móvil. Asegúrate de que el iframe tenga
width="100%"y que la columna/sección padre no tenga un ancho fijo en píxeles que fuerce el desbordamiento. - Bloque no encontrado en Contenido dinámico. En Odoo 17+, el bloque todavía se llama Código de inserción. Si usas un tema personalizado que oculta bloques principales, verifica la lista de bloques del tema o cambia temporalmente al tema predeterminado para verificar.
- Advertencia de contenido mixto HTTPS. Las URL de inserción de Google Maps son HTTPS. Si tu sitio de Odoo se ejecuta en HTTP localmente (por ejemplo,
localhost), el navegador puede bloquear el iframe. Usa un dominio válido con SSL para probar.
Escenarios prácticos para usar el bloque de Código de inserción
Página de contacto – Muestra la ubicación de tu oficina. Coloca el mapa cerca del formulario de contacto. Los visitantes pueden ver exactamente dónde estás.
Página de evento – Inserta un mapa del lugar. Los asistentes pueden obtener indicaciones sin salir de tu sitio.
Localizador de tiendas – Si tienes una ubicación, una inserción estática funciona bien. Para múltiples ubicaciones, necesitas una solución personalizada.
Listado de bienes raíces – Coloca un mapa de la propiedad. Usa Street View si está disponible.
Página de información turística – Muestra puntos de interés. Usa múltiples bloques de inserción para diferentes lugares.
Limitaciones y cuándo usar un módulo personalizado
- Sin marcadores dinámicos ni rutas. El iframe estático muestra una ubicación. Para múltiples marcadores, indicaciones o estilos personalizados, necesitas la API de JavaScript de Maps y un módulo personalizado.
- Sin control del lado del servidor. El iframe se carga completamente desde Google; no puedes filtrar capas de mapa ni restringir el zoom desde Odoo.
- Consentimiento de cookies. El iframe establece cookies de Google. Si ejecutas un banner estricto de GDPR, el mapa puede no cargar hasta que el visitante acepte las cookies de marketing/análisis.
- Límites de tasa. El endpoint de inserción gratuito es generoso pero no ilimitado. Los sitios de alto tráfico (millones de cargas de mapa por mes) deben migrar a la API de JavaScript de Maps con una cuenta de facturación.
| Necesidad | Enfoque recomendado | Esfuerzo |
|---|---|---|
| Ubicación estática única, cero código | Bloque de Código de inserción + iframe de Google Maps (este artículo) | Bajo |
| Múltiples ubicaciones, lista filtrable | Módulo personalizado de Odoo usando la API de JavaScript de Maps | Medio–Alto |
| Botón de indicaciones, pines personalizados, agrupación | API de JavaScript de Maps + widget personalizado | Alto |
| Localizador de tiendas con geolocalización | Módulo dedicado de localizador de tiendas (OCA/web_widget_google_maps o de terceros) | Medio |
Datos clave
| Elemento | Detalle |
|---|---|
| Nombre del bloque en Odoo | Código de inserción |
| Ubicación del bloque | Panel de Bloques → Contenido dinámico |
| Paso de configuración | Haz clic en Editar en el panel derecho → pega el iframe → Guardar |
| Opciones de visibilidad | Ocultar en escritorio, Ocultar en móvil |
| Fuente de Google Maps | Compartir → Insertar un mapa → Copiar HTML |
| Clave API requerida | No (para iframe de inserción básico) |
| Consejo responsivo | Establece iframe width="100%" y altura fija |
Preguntas frecuentes
¿Necesito una clave API de Google Cloud para la inserción básica?
No. El iframe de "Insertar un mapa" funciona sin una clave API. Las claves solo se requieren para la API de JavaScript de Maps, la API de Geocodificación o la API de Places.
¿Puedo insertar un panorama de Street View en lugar de un mapa?
Sí. En Google Maps, abre Street View, haz clic en Compartir → Insertar un mapa y copia ese iframe. El mismo bloque de Código de inserción lo maneja.
¿Por qué el mapa no aparece en la vista previa del editor backend?
El editor de Odoo a veces sanitiza los iframes en la vista previa en vivo. Publica la página y ve la URL del front-end; el mapa se renderizará allí.
¿Cómo centro el mapa en una coordenada en lugar de una dirección?
En Google Maps, haz clic derecho en el punto exacto → "¿Qué hay aquí?" → copia la latitud/longitud de la tarjeta inferior → busca esas coordenadas → Compartir → Insertar un mapa.
¿Puedo restringir el mapa a ciertos niveles de zoom?
No con el iframe de inserción. La API de JavaScript de Maps admite opciones minZoom y maxZoom, que requieren un módulo personalizado.
¿El código de inserción sobrevivirá a las actualizaciones de Odoo?
Sí. El bloque de Código de inserción es una característica principal del sitio web. Tu iframe pegado se almacena en el contenido de la página (ir.ui.view) y se conserva a través de las actualizaciones de versión.
¿Qué pasa si necesito el mapa dentro de una página de producto o una plantilla de formulario de contacto?
Edita la plantilla QWeb relevante (por ejemplo, website_sale.product o website.contact) en modo desarrollador, coloca un <iframe> directamente en el XML, o crea un campo calculado que devuelva el HTML del iframe y renderízalo con t-out="0". Eso va más allá del bloque de Código de inserción sin código.
¿Puedo insertar múltiples mapas en una página?
Sí. Arrastra múltiples bloques de Código de inserción a la página. Cada bloque contiene un iframe. Asegúrate de que el src del iframe incluya identificadores de lugar únicos para evitar duplicados.
¿El mapa funciona en dispositivos móviles?
Sí. El iframe es responsivo si estableces width="100%". Google Maps ajusta la vista automáticamente para pantallas pequeñas.
¿Cómo hago que el mapa cargue más rápido?
Agrega loading="lazy" al iframe. También, establece una imagen de marcador de posición de baja resolución hasta que el mapa cargue. Pero el código de inserción no admite marcadores de posición personalizados.
Lecturas adicionales y fuentes de comparación
Estas fuentes externas proporcionan contexto adicional para evaluar el tema. Su inclusión no es un respaldo.
Lecturas adicionales y fuentes de comparación
Estas fuentes externas proporcionan contexto adicional para evaluar el tema. Su inclusión no es un respaldo.
Aprende más
Visita el sitio web para obtener más información.
Ready to Take the Next Step?
See how our verified tools and services help you put this guide into practice.