Recursos específicos do trabalho com o Google Maps

Assista a este tutorial sobre como adicionar o Google Maps ou leia o guia abaixo.
Com a ajuda de um mapa do site, você pode especificar a localização exata da empresa e de seus escritórios, além de criar uma rota detalhada.
Como adicionar o mapa à página
Como adicionar o endereço ao marcador do mapa
Como adicionar uma rota ao mapa
Como adicionar a chave do mapa do Google
Como adicionar o mapa à página
Abra a Block Library, selecione a categoria Contacts e escolha qualquer um dos blocos como CN401, CN402, CN402A, CN403 ou T143.
Clique na guia Content (Conteúdo). No conteúdo do bloco, localize a guia Maps and Markers (Mapas e marcadores ) e clique nela. Em seguida, selecione o serviço de mapa on-line. Por padrão, duas opções estão disponíveis: Google Maps e Yandex Maps.
No campo "Map API key", especifique a chave que você precisa criar antecipadamente nos serviços do Google e do Yandex. Em Zoom, você deve especificar a escala a ser usada para exibir o mapa. Em "Markers" (Marcadores), você precisa adicionar as coordenadas do ponto: latitude e longitude, separadas por vírgulas.
O campo Zoom atribui a escala do mapa de 0 a 19, sendo que 0 exibe o planeta inteiro e 19 permite ver ruas e casas. Por padrão, o valor é 14.

No Google Maps, a escala apropriada mais próxima é selecionada se nem todos os pontos estiverem visíveis em uma escala especificada.
Como adicionar o endereço ao marcador do mapa
No campo "Title" (Título), especifique o nome da empresa/escritório/ou ponto de partida. Adicione a latitude e a longitude no campo "Coordinates" (Coordenadas). Você pode fazer isso com duas opções: copiar dados de uma fonte aberta ou especificá-los diretamente no mapa.
O título é usado como uma dica de ferramenta ao passar o mouse sobre o marcador, além de ser exibido na dica de ferramenta ao clicar.
O que você pode especificar nas configurações adicionais do marcador
Além disso, para cada marcador, você pode selecionar o comportamento: mostrar a dica de ferramenta ao clicar, mostrar a dica de ferramenta por padrão (ao passar o mouse) e ocultar o marcador.

Se quiser alterar a aparência do marcador, use o campo Marker Style (Estilo do marcador) para selecionar as opções: ícone ou marcador colorido . Se você escolher ícone, carregue qualquer imagem. Se você selecionar marcador colorido, especifique a cor necessária do marcador.
Como adicionar uma rota ao mapa
Para criar uma rota no mapa, clique em "Settings" (Configurações). Na lista de configurações de blocos, selecione a guia "Route settings" (Configurações de rota). Marque a caixa de seleção "Connect markers" (Conectar marcadores).

Você também pode personalizar a rota - altere o tamanho (largura) e a cor da linha.
Como adicionar a chave do mapa do Google
Para conectar um mapa do Google em seu site, é necessário obter uma chave de API JavaScript e especificá-la nas configurações do bloco com o mapa e, no lado do Google, é necessário vincular um cartão de pagamento.
Para começar a trabalhar no Google Cloud Console, você precisa criar uma conta de faturamento, caso ainda não a tenha criado, e vincular um cartão bancário. Para fazer isso, vá para a guia Faturamento: https://console.cloud.google.com/billing
Vá para a guia Overview (Visão geral) e crie um novo projeto: clique aqui.
Vá para o Tilda, adicione um bloco com o mapa (como T143, a categoria Outros), abra o menu na guia Conteúdo, especifique a chave recebida no campo Chave da API do Google Map, inclua as coordenadas do endereço, salve e publique a página.
Um momento importante: Depois de adicionar restrições e alterar o nome da chave de API, elas entrarão em vigor em cinco minutos e, antes disso, você poderá ver um erro no modo de edição e na página publicada.
Se o mapa do Google não funcionar
Se você seguiu exatamente o guia, o mapa deverá funcionar corretamente.
Portanto, se o mapa não funcionar, tente novamente. Se ele não funcionar, vá para o Console do Google Cloud para API e verifique se você ativou a API JavaScript do Google Maps - você encontrará uma marca verde ao lado do texto API Enabled (API ativada). Se você não conseguir encontrar a marca, clique no botão Ativar.
Se você não conseguir encontrar a API JavaScript do Google Maps nas APIs ativadas (APIs habilitadas), selecione a API JavaScript do Google Maps na lista abaixo, clique nela e clique em Ativar.
Verifique também se a conta de faturamento está conectada ao seu projeto: clique aqui.
Como alterar o estilo do mapa
No Tilda, há três configurações de estilo de mapa - padrão, P&B claro e P&B escuro. Você pode alterar esses estilos nas configurações do bloco de mapas → Estilo do mapa.
Se esses estilos não forem suficientes, você pode usar o serviço Snazzymaps e incorporar um mapa por conta própria.

Para criar um mapa, primeiro é necessário se inscrever no site.
Depois de se inscrever, você precisa acessar o link Build a Map (Construir um mapa) no menu na parte superior do site.
Na página que se abre, você precisa especificar o nome do mapa e colar a chave da API do Google Maps que pode ser obtida neste link.
Depois de salvar, você precisa selecionar as configurações do mapa usando as quatro seções. Na primeira seção, você pode escolher o estilo do mapa, clique no botão Choose a Snazzy Maps style (Escolha um estilo Snazzy Maps).
Depois de selecionar o estilo do mapa e as configurações adicionais nas seções (adicionar marcadores, escolher o idioma e o tamanho), clique no botão View Code (Exibir código) para obter o código do mapa.
Copie o código do mapa
Volte para o Tilda e cole o código no bloco HTML T123 da categoria Other (Outros).
Depois de concluir isso, o mapa com o estilo selecionado será adicionado à página.
Fabricado em
Tilda