Como incorporar um Google Maps usando o módulo Embed Code do Odoo

Para incorporar um Google Maps no Odoo usando o módulo Embed Code integrado, primeiro obtenha o trecho iframe do Google Maps, depois adicione o bloco Embed Code à sua página no editor de Website e cole o código. O mapa é renderizado no site publicado sem qualquer desenvolvimento personalizado.

Como funciona o bloco Embed Code

O bloco Embed Code é um recurso nativo do Odoo Website. Ele armazena qualquer trecho HTML que você colar nele. Quando um visitante carrega a página, o Odoo renderiza esse trecho diretamente no layout da página. Nenhum processamento no servidor é realizado. O bloco funciona como um contêiner para HTML bruto, incluindo iframes, scripts ou estilos personalizados.

Este bloco é perfeito para integrações de terceiros, como Google Maps, vídeos do YouTube ou widgets de reserva. Você não precisa editar arquivos de template nem escrever código Python. O bloco respeita a grade responsiva da página. Você pode colocá-lo dentro de colunas, seções ou qualquer contêiner.

O Odoo não sanitiza o trecho. Portanto, você pode colar qualquer HTML válido. Mas tenha cuidado. Código malicioso pode quebrar o seu site. Cole sempre código de fontes confiáveis, como o Google Maps.

Pré-requisitos

• Uma instância do Odoo com o aplicativo Website instalado (padrão no Odoo Online, no Odoo.sh e on-premise).
• Acesso de edição à página onde você quer o mapa.
• Um link de incorporação do Google Maps — não é necessária chave de API para o iframe básico "Incorporar um mapa".

Passo a passo (com detalhes do Source Pack)

1. Obtenha o código de incorporação do Google Maps. Abra o Google Maps em um navegador, pesquise o endereço ou local, clique em Compartilhar → Incorporar um mapa, escolha um tamanho (pequeno, médio, grande ou personalizado) e clique em Copiar HTML. A área de transferência agora contém uma tag <iframe>.
2. Faça login na sua conta Odoo e acesse o módulo "Website". No painel, clique em Website. Depois navegue até a página que deseja editar e clique no botão Editar para abrir o painel de edição.
3. Localize o módulo Embed Code. No painel de edição, role o painel Blocos até chegar à seção Conteúdo dinâmico. O bloco tem o rótulo Embed Code.
4. Arraste o bloco para a página. Solte-o onde quer que o mapa apareça — dentro de uma coluna, de uma seção ou diretamente na grade.
5. Depois de posicionar o módulo, clique no botão "Editar" localizado no painel direito para inserir o código. Uma janela pop-up é exibida.
6. Na janela pop-up que aparece, cole o trecho de código fornecido pelo Google Maps na área indicada e clique em "Salvar" para aplicar as alterações. O bloco agora contém o iframe.
7. Opcional: ajuste a visibilidade. Ainda no painel direito, abra a seção Visibilidade. Você pode ativar Ocultar no computador ou Ocultar no celular se o mapa só deve ser exibido em determinados dispositivos. Clique em Salvar novamente.
8. Publique. Saia do editor e clique em Publicar (ou Salvar se a página já estiver publicada). Visite a URL do front-end para confirmar que o mapa carrega.

Obtendo um iframe limpo do Google Maps

A caixa de diálogo "Incorporar um mapa" gera um iframe com largura e altura fixas. Para layouts responsivos, substitua as dimensões em pixels por width="100%" e uma altura razoável (por exemplo, height="400"). Exemplo:

<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>

Adicionar loading="lazy" adia o carregamento do mapa até que o visitante role a página para perto dele, o que melhora as pontuações de velocidade da página.

Problemas comuns e correções rápidas

• O mapa mostra "Esta página não consegue carregar o Google Maps corretamente". O src do iframe pode estar truncado. Copie novamente o código de incorporação completo do Google Maps; a URL é longa e fácil de cortar.
• O mapa fica pequeno demais ou transborda no celular. Verifique se o iframe tem width="100%" e se a coluna/seção pai não tem uma largura fixa em pixels que force o transbordamento.
• Bloco não encontrado em Conteúdo dinâmico. No Odoo 17+, o bloco ainda se chama Embed Code. Se você usa um tema personalizado que oculta blocos nativos, verifique a lista de blocos do tema ou mude temporariamente para o tema padrão para confirmar.
• Aviso de conteúdo misto HTTPS. As URLs de incorporação do Google Maps usam HTTPS. Se o seu site Odoo roda em HTTP localmente (por exemplo, localhost), o navegador pode bloquear o iframe. Use um domínio válido com SSL para testar.

Cenários práticos de uso do bloco Embed Code

Página de contato – Mostre a localização do seu escritório. Insira o mapa perto do formulário de contato. Os visitantes veem exatamente onde você está.

Página de evento – Incorpore um mapa do local. Os participantes podem obter rotas sem sair do seu site.

Localizador de lojas – Se você tem um único local, uma incorporação estática funciona bem. Para vários locais, você precisa de uma solução personalizada.

Anúncio imobiliário – Coloque um mapa do imóvel. Use o Street View, se disponível.

Página de informações turísticas – Mostre pontos de interesse. Use vários blocos Embed Code para lugares diferentes.

Limitações e quando usar um módulo personalizado

• Sem marcadores ou rotas dinâmicas. O iframe estático mostra um único local. Para vários marcadores, rotas ou estilo personalizado, você precisa da Maps JavaScript API e de um módulo personalizado.
• Sem controle no lado do servidor. O iframe carrega inteiramente do Google; você não pode filtrar camadas do mapa nem restringir o zoom a partir do Odoo.
• Consentimento de cookies. O iframe define cookies do Google. Se você usa um banner rigoroso de GDPR, o mapa pode não carregar até que o visitante aceite cookies de marketing/análise.
• Limites de taxa. O endpoint de incorporação gratuito é generoso, mas não ilimitado. Sites com muito tráfego (milhões de carregamentos de mapa por mês) devem migrar para a Maps JavaScript API com uma conta de faturamento.

Necessidade	Abordagem recomendada	Esforço
Local estático único, sem código	Bloco Embed Code + iframe do Google Maps (este artigo)	Baixo
Vários locais, lista filtrável	Módulo Odoo personalizado usando a Maps JavaScript API	Médio–Alto
Botão de rotas, pinos personalizados, clustering	Maps JavaScript API + widget personalizado	Alto
Localizador de lojas com geolocalização	Módulo dedicado de localizador de lojas (OCA/web_widget_google_maps ou de terceiros)	Médio

Fatos principais

Item	Detalhe
Nome do bloco no Odoo	Embed Code
Localização do bloco	Painel Blocos → Conteúdo dinâmico
Etapa de configuração	Clique em Editar no painel direito → cole o iframe → Salvar
Opções de visibilidade	Ocultar no computador, Ocultar no celular
Origem do Google Maps	Compartilhar → Incorporar um mapa → Copiar HTML
Chave de API necessária	Não (para o iframe de incorporação básico)
Dica de responsividade	Defina width="100%" e uma altura fixa no iframe

Perguntas frequentes

Preciso de uma chave de API do Google Cloud para a incorporação básica?

Não. O iframe "Incorporar um mapa" funciona sem chave de API. As chaves só são necessárias para a Maps JavaScript API, a Geocoding API ou a Places API.

Posso incorporar um panorama do Street View em vez de um mapa?

Sim. No Google Maps, abra o Street View, clique em Compartilhar → Incorporar um mapa e copie esse iframe. O mesmo bloco Embed Code lida com isso.

Por que o mapa não aparece na pré-visualização do editor no back-end?

O editor do Odoo às vezes sanitiza iframes na pré-visualização ao vivo. Publique a página e acesse a URL do front-end; o mapa será renderizado lá.

Como centralizo o mapa em uma coordenada em vez de um endereço?

No Google Maps, clique com o botão direito no ponto exato → "O que há aqui?" → copie a latitude/longitude do cartão na parte inferior → pesquise essas coordenadas → Compartilhar → Incorporar um mapa.

Posso restringir o mapa a determinados níveis de zoom?

Não com o iframe de incorporação. A Maps JavaScript API oferece suporte às opções minZoom e maxZoom, que exigem um módulo personalizado.

O código de incorporação se mantém após atualizações do Odoo?

Sim. O bloco Embed Code é um recurso nativo do Website. O iframe colado fica armazenado no conteúdo da página (ir.ui.view) e é preservado entre atualizações de versão.

E se eu precisar do mapa dentro de uma página de produto ou de um template de formulário de contato?

Edite o template QWeb correspondente (por exemplo, website_sale.product ou website.contact) no Modo Desenvolvedor, insira um <iframe> diretamente no XML, ou crie um campo computado que retorne o HTML do iframe e renderize-o com t-out="0". Isso vai além do bloco Embed Code sem código.

Posso incorporar vários mapas em uma única página?

Sim. Arraste vários blocos Embed Code para a página. Cada bloco contém um iframe. Certifique-se de que o src de cada iframe inclua IDs de local exclusivos para evitar duplicatas.

O mapa funciona em dispositivos móveis?

Sim. O iframe é responsivo se você definir width="100%". O Google Maps ajusta a visualização automaticamente para telas pequenas.

Como faço o mapa carregar mais rápido?

Adicione loading="lazy" ao iframe. Além disso, defina uma imagem placeholder de baixa resolução até o mapa carregar. Mas o código de incorporação não oferece suporte a placeholders personalizados.

Leituras adicionais e fontes de comparação

Estas fontes externas fornecem contexto adicional para avaliar o tema. A inclusão delas não constitui um endosso.

• Como incorporar o Google Maps em um campo do Odoo por meio de um novo Widget?
• Como adicionar o Google Maps ao Odoo
• Incorporar o Google Maps no seu módulo personalizado do Odoo

Leituras adicionais e fontes de comparação

Estas fontes externas fornecem contexto adicional para avaliar o tema. A inclusão delas não constitui um endosso.

• Como incorporar o Google Maps em um campo do Odoo por meio de um novo Widget?
• Como adicionar o Google Maps ao Odoo
• Incorporar o Google Maps no seu módulo personalizado do Odoo

Saiba mais

Visite o site para mais informações.