Central de Ajuda

Como adicionar o Google Maps

Assista a este tutorial sobre como adicionar o Google Maps ou leia o guia abaixo.

O Google alterou as regras de uso do Google Maps. Para adicionar um mapa do Google ao seu site, agora é necessário obter uma chave para a API JavaScript, especificá-la nas configurações do bloco de mapas e vincular um cartão de banda à sua conta do Google.

Vá para a página:
https://console.cloud.google.com/google/maps-apis/overview.
Crie um novo projeto ou selecione um já existente. Clique em Create (Criar).

Google Cloud Platform, the "New Project" page: the "Project name *" field and the "CREATE" button.

Selecione Maps JavaScript API.

Google Cloud Platform: the "Maps JavaScript API" card in the "Maps APIs and Services" section.

Ative o serviço clicando em Enable (Ativar).

In Google Cloud Platform, the "ENABLE" button on the "Maps JavaScript API" page in the API Library.

Vá para a guia "Credentials" (Credenciais) e clique em Credentials in APIs & Services (Credenciais em APIs e serviços).

In Google Cloud Platform, the "Credentials in APIs & Services" link at the top of the "Credentials" section.

Em seguida, clique em Create Credentials (Criar credenciais ) e selecione API key (Chave de API ) na lista suspensa.

In Google Cloud Platform under "Credentials": the "API key" option in the "+ CREATE CREDENTIALS" drop-down menu.

Clique em Restrict Key (Restringir chave ) em uma janela pop-up.

In the Google Cloud Platform console, the "RESTRICT KEY" button in the "API key created" pop-up window.

Marque acaixa de seleção "HTTP referrers (web sites)" , digite seu nome de domínio na caixa de referência para autorizar o mapa e, em seguida, selecione a opção "Restrict key" e, em seguida, marque a caixa de seleção "Restringir chave".

In Google Cloud Platform under "Restrict and rename API key": select "HTTP referrers (web sites)", add domain URLs in "Website restrictions", and select "Restrict key" under "API restrictions".

Dicas e truques: a entrada tilda é opcional. Ela ativa uma visualização do mapa no Tilda Editor. Caso contrário, um mapa só poderá ser acessado por meio de um link de domínio.

Quando terminar de editar o site, remova a segunda entrada por motivos de segurança. Saiba mais sobre como proteger uma chave de API.

Na lista suspensa, selecione Maps JavaScript API e salve as alterações.

Google Cloud Platform: The "Maps JavaScript API" checkbox in the dropdown list and the "SAVE" button at the bottom.

Observação: O Google Maps alterou recentemente sua política, portanto, agora é necessário ativar o faturamento em sua conta antes de obter uma chave. Saiba mais sobre os preços do Google Maps.

Vá para a guia "Billing" (Faturamento) para vincular um cartão bancário à sua conta.

In the Google Cloud Platform console, the "Billing" item in the navigation menu on the left.

Quando terminar, vá para Credentials (Credenciais) e copie a chave.

Google Cloud Platform "Credentials" page: copy icon next to the key value under "API Keys".

Vá para seu projeto no Tilda, adicione um bloco com um mapa da categoria "Other" à página (por exemplo, Т143), abra o painel Content (Conteúdo) do bloco e cole a chave no campo "Map API Key" (Chave da API do mapa). Salve as alterações e publique a página.

Block Content panel: Google Maps configuration fields including "ONLINE MAP SERVICE", "MAP API KEY", and geo point settings.

Solução de problemas

P: Inseri a chave de API no bloco do mapa, mas o mapa só aparece na versão publicada da página. No editor, ocorre o erro "Oops! Algo deu errado". Como faço para resolver isso?

Page editor: the "Content" button on the panel of the T143 block with a Google Maps loading error.

R: Esse erro geralmente ocorre depois que a chave de API foi restringida. Para evitar que terceiros usem sua chave de API no site deles, recomendamos que você forneça acesso apenas ao seu nome de domínio. Saiba mais sobre como proteger uma chave de API.

Para ativar temporariamente uma visualização de mapa no Tilda Editor, autorize tilda na Google Maps Platform e revogue o acesso posteriormente.