Mapaprop

Inserir um mapa do Google

Este tutorial ensina como inserir um mapa interativo do Google Maps dentro de uma página ou publicação do blog. É ideal para mostrar a localização do seu escritório, um empreendimento em destaque, uma área de cobertura, etc.

O mapa ficará interativo: o visitante poderá dar zoom, mover, ver o Street View, etc. — sem sair do seu site. Também funciona com Bing Maps, OpenStreetMap e qualquer provedor que ofereça um código <iframe> para incorporar.

O que você vai conseguir

Uma página do seu site que mostra um mapa do Google Maps centralizado na localização que você escolher, com o endereço exato marcado.

Passo 1 — Gere o código do mapa no Google Maps

  1. Abra o Google Maps no seu navegador.
  2. Busque o endereço ou localização que deseja mostrar.
  3. Quando o resultado aparecer, pressione Compartilhar (geralmente está no painel lateral ou abaixo do endereço).
  4. Na caixa de diálogo, escolha a aba "Incorporar um mapa".
  5. Escolha o tamanho do mapa (Pequeno, Médio, Grande, Personalizado) e copie o código HTML que aparece.

O código terá esta forma:

<iframe src="https://www.google.com/maps/embed?pb=!1m18!..." width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>

Se o Google Maps não oferecer a opção "Incorporar um mapa", você pode estar vendo a versão para celular. Abra o Google Maps em um computador ou use a opção "Ver versão completa".

Passo 2 — Ative o Modo HTML na sua página

No editor de uma página ou publicação:

  1. Vá até a aba Edição de conteúdo.
  2. Posicione o cursor no local onde deseja que o mapa apareça.
  3. Na barra de ferramentas, pressione o botão </> (último grupo de ícones).
  4. Confirme o aviso que aparece.

O editor muda para o modo de código HTML.

Passo 3 — Cole o código do mapa

Cole o código <iframe ...> que você copiou do Google Maps exatamente onde deseja que o mapa apareça. Por exemplo, se for depois de um parágrafo:

<p>Nosso escritório principal está localizado em:</p>

<iframe src="https://www.google.com/maps/embed?pb=!1m18!..." width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>

<p>Esperamos você de segunda a sexta, das 9h às 18h.</p>

Passo 4 — Ajustar o tamanho (opcional)

Se o mapa ficar muito pequeno ou muito grande, modifique os atributos width (largura) e height (altura) do <iframe>.

ValorSignificado
width="600"Largura fixa em pixels
height="450"Altura fixa em pixels
width="100%"Ocupa toda a largura disponível (recomendado para celular)

Recomendação geral:

<iframe src="..." width="100%" height="400" style="border:0;"></iframe>

Assim o mapa se adapta a qualquer tamanho de tela (computador, tablet, celular).

Passo 5 — Salve a página

  1. Pressione o botão </> para voltar ao editor visual (opcional).
  2. Pressione Salvar.
  3. Abra seu site em uma nova aba e verifique se o mapa aparece e funciona.

Se o mapa não aparecer, volte ao Modo HTML e verifique:

  • Se você copiou todo o código <iframe> completo (incluindo o fechamento </iframe>).
  • Se as aspas são retas (") e não curvas (" ").
  • Se o código do iframe não foi cortado ao colar.

Alternativas ao Google Maps

O mesmo procedimento funciona com outros serviços de mapas que fornecem um código <iframe>:

  • Bing Maps: opção "Compartilhar > Incorporar um mapa".
  • OpenStreetMap: opção "Compartilhar > HTML" (é grátis e não precisa de conta).
  • Mapbox: para casos profissionais com mapas personalizados.

Ajudas relacionadas