Saturday, January 18, 2025

4 min read

Como incorporar o Google Maps no seu site – 3 passos simples

Incorporar o Google Maps ao seu site permite que os usuários acessem facilmente informações de localização, exibam um marcador no mapa para um endereço específico e naveguem usando recursos como direções e Street View. Isso também impulsiona o seu SEO local.

Incorporando o Google Maps Manualmente via Código

Siga os passos abaixo para incorporar o Google Maps manualmente ou por meio de widgets do WordPress. Veja como funciona:

  1. Abrir o Google Maps
  2. Clique em Compartilhar e Incorporar um Mapa e copie o código de incorporação
  3. Cole o código de incorporação no HTML do seu site

Passo 1: Abra o Google Maps

Ir para https://www.google.com/maps/ E pesquise a localização desejada na barra de pesquisa. Você pode localizar com precisão o endereço da sua empresa, visualizar um destino ou mudar para a visão de satélite para mais detalhes.

Passo 2: Gerar o Código de Incorporação

  1. Clique no Ícone de Compartilhar na interface do mapa.
  2. No Janela de Compartilhamento, selecione a aba “Incorporar um mapa”.
  3. Copie o que foi fornecido. código de incorporação (iframe).

Etapa 3: Cole o código de incorporação no HTML do seu site.

  1. Abra o seu código HTML Crie o arquivo usando qualquer editor de código ou abra sua página do WordPress e selecione um widget HTML.
  2. Localize a seção onde você deseja que o mapa seja exibido e cole o código do iframe.
  3. Salve as alterações e atualize sua página da web para ver o mapa incorporado.

Exemplo de código de incorporação de iframe:

Copiar código Copiado Use um navegador diferente<code id="dm-code-raw" class=" no-wrap language-markup"><iframe src="https://www.google.com/maps/embed?..." width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe></code>

Tornando o Mapa Responsivo

Para garantir que o mapa tenha uma boa aparência em todos os tamanhos de tela, você pode envolver o iframe em um contêiner com CSS:

Copiar códigoCopiadoUse um navegador diferente<code id="dm-code-raw" class=" no-wrap language-markup"><div style="position:relative; padding-bottom:56.25%; height:0; overflow:hidden;"> <iframe src="https://www.google.com/maps/embed?..." style="position:absolute; top:0; left:0; width:100%; height:100%; border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe> </div></code>

Incorporando o Google Maps com Construtores de Páginas do WordPress

A maioria dos construtores de páginas do WordPress, como Elementor, Divi ou WPBakery, inclui um Google Maps widget. Este método simplifica o processo e elimina a necessidade de codificação manual. Os widgets costumam oferecer opções de personalização como níveis de zoom, tipo de mapa (padrão, visualização de satélite, etc.) e personalização de marcadores.

Por exemplo, no Elementor você pode incorporar um mapa do Google por meio de:

  1. Procurando pelo Mapas widget
  2. Arrastando o Mapas Adicione um widget à sua página
  3. Digite o nome da localização do seu negócio

Como usuário do WordPress, você também pode querer aprender mais sobre Como fazer SEO no WordPress!

Problemas Comuns e Solução de Problemas

  • Mapa não está sendo exibido: Verifique novamente se o código do iframe foi copiado e colado corretamente.
  • Problemas com a Chave de API: Algumas funcionalidades avançadas podem exigir um Chave de API para integração.
  • Restrições do Navegador: Certifique-se de que o seu site permita iframes e não tenha plugins ou scripts conflitantes.

Perguntas Frequentes

Posso incorporar o Google Maps ao meu site de graça?Sim, você pode incorporar o Google Maps gratuitamente usando o código de incorporação em iframe fornecido pelo Google Maps.

Incorporar o Google Maps ajuda no SEO?Sim, incorporar o Google Maps pode melhorar o SEO local ao fornecer dados de localização claros e ao aprimorar a experiência do usuário.

Conclusão

Incorporar o Google Maps é uma forma simples de aprimorar o seu site. Se optar por código manual ou por um widget do WordPress, você estará fornecendo aos seus visitantes informações de localização valiosas e melhorando a funcionalidade do seu site. Para usuários do WordPress, não deixe de conferir nosso tutorial vinculado, com instruções passo a passo sobre como usar os widgets do Google Maps.

About the Author
Jonas Lindemann
Jonas Lindemann

I’m an experienced SEO professional with over a decade of helping over 100 businesses rank higher online, especially local businesses, e-commerce stores and SaaS. As the co-founder of LPagery, I specialize in practical, proven strategies for regular SEO and Local SEO success.

Esta publicação pode conter links de afiliados pelos quais ganhamos uma comissão quando um produto é adquirido.

About the Author
Jonas Lindemann
Jonas Lindemann

I’m an experienced SEO professional with over a decade of helping over 100 businesses rank higher online, especially local businesses, e-commerce stores and SaaS. As the co-founder of LPagery, I specialize in practical, proven strategies for regular SEO and Local SEO success.