Como incorporar um mapa do Google Maps na página de contato

Um mapa incorporado pode ajudar na orientação, mas deve complementar endereço escrito, contato e instruções. A Maps Embed API usa iframe e chave configurada; valide restrições, responsividade, privacidade e carregamento.

Passo a passo

1. Defina o destino e escolha o modo da Maps Embed API: place para marcar endereço/empresa, directions para rota, search para uma busca ou view para mostrar uma região. Para uma página de contato, confirme o endereço antes de usar place.

2. No Google Cloud, habilite Maps Embed API, configure faturamento se solicitado e crie uma chave restrita à API necessária e aos domínios de produção e teste (HTTP referrers). Não coloque credenciais de servidor no navegador; chave usada no iframe é visível no HTML e precisa de restrições.

3. Use URL de incorporação com chave e parâmetro apropriado. Exemplo esquemático:

   <iframe
     title="Mapa de localização da empresa"
     src="https://www.google.com/maps/embed/v1/place?key=SUA_CHAVE_RESTRITA&q=ENDERECO_CODIFICADO"
     width="600" height="400" loading="lazy"
     referrerpolicy="strict-origin-when-cross-origin"
     allowfullscreen>
   </iframe>

   Substitua a chave e codifique o endereço como parâmetro de URL (espaços como +); não publique literalmente este exemplo. A referência é enviada para validar a restrição de domínio.

4. Faça o mapa responsivo com CSS (width:100%, proporção adequada), mantendo endereço e instruções em texto fora do iframe. Teste em celular, teclado e sem carregar o mapa; confirme título acessível, ausência de overflow e funcionamento quando a chave estiver restrita. A API requer ao menos 200×200 px e pode exibir publicidade.

Como comprovar que a tarefa terminou

Compare os dados com a operação real e com o conteúdo publicado no site. Registre a fonte da informação, quem pode atualizá-la e quando conferir novamente; mudanças temporárias precisam de uma data de revisão.

Checklist de revisão

• Endereço permanece escrito e o mapa não causa overflow.
• Compare a informação com o que aparece na página e com a configuração ativa.
• Registre o responsável, a data da revisão e o resultado do teste.

Limites e interpretação

O mapa incorporado não descobre nem precisa da localização do visitante para mostrar um endereço fixo. Ao carregar o iframe, o navegador conecta-se ao Google; descreva esse terceiro no aviso de privacidade aplicável e considere consentimento/adiamento de carregamento conforme a política do site. Restrições da chave erradas, Referrer-Policy: no-referrer ou same-origin podem impedir a validação; use a política de referência indicada pela documentação e confira erros do mapa e orçamento de faturamento.

Continue na biblioteca

Consulte também o hub de institucionais para aprofundar as etapas relacionadas.

Fontes oficiais: documentação de referência.