close
close
Criador de Logotipo Grátis   /   Central de ajuda   /   Mapas   /   Como adicionar o Google Maps ao site Turbosite

Como adicionar o Google Maps ao site Turbosite

O Google Maps é o padrão mundial de cartografia. É ideal para sites com público internacional ou empresas do setor de turismo. A maneira mais fácil é incorporar um mapa via iframe diretamente da interface do Google Maps, sem necessidade de uma chave de API. É gratuito e a instalação leva 5 minutos.

O que você precisará

  • Uma conta Google (não é obrigatória para o iframe básico) — registro
  • Um site publicado no Turbosite
  • 5 minutos

Passo 1. Obter o código do mapa

  1. Acesse google.com/maps.
  2. Pesquise o endereço ou a organização desejada na barra de busca.
  3. No cartão do local, clique no botão «Compartilhar» (ícone de seta).
  4. Na janela que abrir, selecione a aba «Incorporar um mapa» (Embed a map).
  5. Escolha o tamanho do mapa: pequeno, médio, grande ou personalizado.
  6. Copie o código iframe gerado.

📷 Captura de tela: janela «Incorporar um mapa» no Google Maps com o código iframe e opções de tamanho.

Passo 2. Inserir o código no Turbosite

O mapa aparece em um local específico da página (geralmente no bloco «Contatos»), portanto, o código é inserido no corpo da página.

  1. Abra seu site no Turbosite.
  2. Adicione o bloco «Código HTML» no local desejado da página.
  3. Cole o iframe do Google Maps copiado.
  4. Salve as alterações.
  5. Publique o site.

📷 [captura de tela do Turbosite — será adicionada: bloco de código HTML no corpo da página com o mapa do Google].

Passo 3. Verificar se o mapa está funcionando

  1. Abra o site publicado.
  2. Role até o bloco do mapa — ele deve carregar em 1 ou 2 segundos.
  3. Verifique a interatividade: clique no marcador, tente dar zoom, leia o cartão do local.
  4. Abra em um dispositivo móvel — o mapa deve se adaptar.

Perguntas frequentes

O mapa é cortado em dispositivos móveis ou não ocupa toda a largura. No iframe, remova os valores fixos width="600" e height="450" e envolva o iframe em uma <div> com uma classe CSS para responsividade:

<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
  <iframe src="seu_src" 
          style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" 
          frameborder="0" allowfullscreen>
  </iframe>
</div>

Preciso de uma chave de API? Para o iframe básico do menu «Compartilhar», não. A chave de API é necessária apenas se você usar a Google Maps Embed API diretamente ou a JavaScript API para personalização (marcadores próprios, rotas, estilos).

Posso adicionar meu próprio marcador ou rota? Via iframe, apenas o que já existe no Google Maps. Para seus próprios marcadores, crie um mapa no Google My Maps e obtenha o iframe a partir de lá.

Planos do Google Maps Platform. Desde 2025, o Google Maps Platform alterou sua tarifação: em vez de um crédito gratuito geral, existem limites mensais separados para cada produto. O iframe básico do Embed funciona gratuitamente sem restrições. Se você usar a JavaScript API, verifique os limites no Cloud Console.

O mapa está em russo, mas preciso dele em inglês. O Google determina automaticamente o idioma com base na localidade do navegador. Para fixar o idioma, adicione o parâmetro &hl=en (ou outro código de idioma) à URL do iframe.

O que ver a seguir