Como criar um mapa interativo no WordPress

Embora a presença digital tenha se tornado uma necessidade para a maioria das empresas, nem é preciso dizer que um mapa de sua localização física ainda é mais do que útil. Para obter o máximo dele, você pode até projetar seu mapa do Google para se ajustar ao design geral de seu site. No entanto, com um mapa interativo, você vai um passo além: ele permite que seus usuários tenham mais liberdade para descobrir suas próprias maneiras de se comunicar com você e planejar suas viagens de acordo com sua conveniência. Sem falar que a interação torna a experiência do usuário mais satisfatória, atraindo seus visitantes para sessões de usuário mais longas. Neste artigo, mostraremos duas maneiras de adicionar um mapa interativo ao seu site WordPress: usando o Google My Maps e usando um plugin especializado.

Como adicionar um mapa interativo no WordPress usando o Google My Maps

A maneira mais fácil de instalar um mapa interativo é usando o serviço Meus Mapas do Google. A primeira coisa que você deve fazer é ir para Google My Maps e clique no + Crie um novo mapa.

Crie um novo mapa

Isso o levará ao editor de mapas. Usando o menu na parte superior, você pode adicionar rotas, marcadores, linhas, direções e medir distâncias. Cada mapa pode ter até 10.000 linhas, formas ou lugares. A seção principal à esquerda permite que você adicione camadas (com até 2.000 linhas, formas ou lugares por camada), escolha uma Mapa base entre nove opções e, finalmente, nomeie seu mapa.

Crie um novo mapa

Chamaremos nosso mapa de “Como chegar até nós” e adicionaremos uma breve descrição, após a qual salvaremos nossas alterações.

Título e descrição do mapa
Localização no mapa

A seguir, traçaremos algumas linhas do ponto de ônibus local e da estação ferroviária, apenas para mostrar como chegar lá a partir dos pontos de transporte públicos mais próximos, usando preto para o trem e vermelho para o ponto de ônibus.

Linhas do mapa

Finalmente, precisamos incorporá-lo em nosso site. Para isso, devemos primeiro tornar nosso mapa público. Entrando no menu de compartilhamento do painel de comando principal, vamos configurar o controle de acesso Restrito para Qualquer pessoa com o link. Isso torna o mapa público.

Compartilhar link

Em seguida, você precisa acessar o código de incorporação no painel de edição principal. Clique no três pontos ao lado do nome do mapa, selecione Incorporar no meu sitee copie o HTML obtido.

Inserir mapa de código

Para incorporá-lo ao seu site, se você estiver usando o Gutenberg, vá para a página à qual deseja adicionar o mapa (ou crie um novo), basta clicar no + sinal para adicionar um bloco e selecione o HTML personalizado bloquear e colar o código no campo de bloco.

Bloco HTML

Se você está trabalhando com Elementor, você precisa arrastar o HTML personalizado widget e cole o código em seu campo. Se você estiver usando o WPBakery Page Builder, você precisa usar o HTML bruto elemento e forneça o código que você colou. Para o Clássico editor, apenas certifique-se de que seu editor está definido para o Texto e apenas cole o código onde quiser.

E seu mapa está pronto, assim como você o configurou.

Antevisão do mapa

Como adicionar um mapa interativo no WordPress usando um plugin

Você também pode usar um plugin para criar um mapa interativo. Existem muitos plug-ins do WordPress com essa funcionalidade ou semelhante, muitos dos quais discutimos em nosso artigo sobre os melhores plug-ins do Google Maps. Para esta demonstração, usaremos WP Google Maps, mas você pode escolher o que deseja. Depois de instalar e ativar o plug-in, encontre as configurações do plug-in na sua lista de Plugins instalados e encontrar o Editor de mapas para criar um mapa.

Leia Também:  Como indexar o novo conteúdo do WordPress mais rápido no Google
WP Google Maps Map Editor

Uma vez lá, você encontrará o mapa editável exclusivo que o plug-in permite. Você vai precisar Editar isso.

Editor do My Maps

Você pode mudar o Nome do mapa, como temos, onde estamos. Também moveremos o Nível de zoom controle um pouco para a direita, aumentando o zoom para que nosso mapa seja útil para quem procura direções. Não usaremos o resto das opções para os fins desta demonstração, mas chamaremos sua atenção para o Largura ao controle. Se você quiser que seu mapa responda, você deve deixá-lo em 100%.

Criando mapa

A seguir, rolaremos para baixo até a seção Seus favoritos e removeremos o favorito padrão. Você pode fazer isso selecionando-o no menu e clicando no ícone da lata de lixo. A seguir, configuraremos nosso próprio marcador centralizado na Bridge Street em Saint Matthews, Carolina do Sul, encontrando o local e clicando com o botão direito do mouse no mapa. Finalmente vamos Salve  ambos nossos Marcador e nosso Mapa, naquela ordem.

Configurações da marca

Rolando de volta para o Crie seu mapa seção novamente, você encontrará o código curto para o seu mapa no Configuração geral língua. Clique para copiá-lo para sua área de transferência e usá-lo em uma postagem.

Depois de ter seu shortcode pronto para colar, abra uma postagem ou página onde deseja incorporar seu mapa. Mostraremos como fazer isso em um post, usando Gutenberg. Primeiro, clique no + Cadastre-se para adicionar um bloco de shortcode e, em seguida, cole o shortcode do mapa no campo de bloco.

Cole o código curto

E seu mapa aparecerá em sua postagem, conforme configurado.

Antevisão do mapa
Em conclusão

Se você deseja que seus visitantes saibam onde você está no mundo físico, você pode facilmente fazer isso adicionando um mapa interativo ao seu site usando qualquer um dos métodos que demonstramos. Um mapa interativo permitirá que eles desloquem e apliquem zoom para encontrar a melhor rota para chegar até você, mas com apenas alguns cliques, você pode tornar ainda mais fácil apontando-os na direção certa. Se você tem algum tipo de localização física, por que não tornar muito fácil para seus visitantes encontrá-la?

Compartilhe este Link:

Compartilhar no facebook
Compartilhar no twitter
Compartilhar no linkedin
Compartilhar no pinterest
Compartilhar no email
Compartilhar no whatsapp
Compartilhar no telegram

Deixe um comentário

Receba nossos preços
e condções direto no seu email

Por favor, preencha os campos abaixo:

Preferência de contato: