Como Adicionar um Mapa Interativo no WordPress

Adicionar um mapa ao seu site WordPress é importante quando você tem um negócio com um local físico ou está criando conteúdo sobre lugares específicos.

Pode parecer complicado no início, mas encontramos algumas ferramentas úteis que tornam o processo muito mais fácil. Neste artigo, mostraremos dois métodos simples para adicionar um mapa interativo ao seu site WordPress.

Vamos guiá-lo por cada etapa, desde a escolha da ferramenta certa até a incorporação do mapa em sua página.

Quando Adicionar um Mapa Interativo no WordPress

Se você tem um negócio físico, como uma loja ou um café, um mapa interativo pode ajudar potenciais visitantes a encontrar seu local. Isso pode trazer mais clientes, vendas e até mesmo agendamentos e reservas presenciais.

Também pode melhorar a experiência do usuário, pois os visitantes podem planejar sua jornada sem precisar usar um aplicativo ou site de mapas separado.

Dependendo do seu site, um mapa interativo pode até fornecer conteúdo útil. Por exemplo, se você tem um blog de fitness, pode mostrar rotas de corrida ou trilhas recomendadas aos seus leitores.

Da mesma forma, se você tem um blog familiar, pode destacar todas as atrações adequadas para crianças onde seu público pode levar suas famílias.

Dito isso, vamos ver duas maneiras fáceis para iniciantes de adicionar um mapa interativo no WordPress. Use os links rápidos abaixo para ir direto para o método que você deseja usar:

• Método 1. Adicionar um Mapa Mundi Interativo Usando um Page Builder (Páginas Personalizadas com Mapas)
• Método 2. Criar Mapas Personalizados Interativos Gratuitamente Usando o Google My Maps

Método 1. Adicionar um Mapa Mundi Interativo Usando um Page Builder (Páginas Personalizadas com Mapas)

A maneira mais fácil de adicionar um mapa interativo simples no WordPress é usando o Google Maps e o plugin SeedProd.

Este plugin page builder avançado permite que você crie páginas com design profissional sem ter que escrever uma única linha de código.

Ele também vem com um bloco de Google Maps pronto que você pode simplesmente arrastar e soltar em seu layout. Os visitantes podem interagir com seu mapa usando os botões de zoom, ou podem arrastar para explorar outras áreas.

O SeedProd facilita o design de páginas independentes com um design exclusivo, portanto, esta também é uma ótima opção se você quiser adicionar um mapa interativo a uma página inicial personalizada ou landing page.

A primeira coisa que você precisa fazer é instalar e ativar o SeedProd. Para mais detalhes, veja nosso guia passo a passo sobre como instalar um plugin do WordPress.

Após a ativação, você precisa inserir uma chave de licença.

Você pode encontrar essas informações em sua conta no site do SeedProd. Após adicionar a chave de licença, clique em ‘Verificar Chave’.

Com isso feito, vá para SeedProd » Landing Pages e clique em ‘Adicionar Nova Landing Page’.

O SeedProd agora mostrará todos os modelos que você pode usar para criar belas landing pages, páginas de vendas e muito mais. Para ajudá-lo a encontrar o modelo certo para o seu site, os modelos do SeedProd são divididos em categorias como modo de manutenção, em breve, webinar e muito mais.

Para dar uma olhada mais de perto em qualquer design, basta passar o mouse sobre esse modelo. Em seguida, clique no ícone de lupa.

Isso abrirá o modelo em uma nova aba.

Quando encontrar um design que deseja usar em seu site WordPress, basta clicar em ‘Escolher este modelo’.

Agora você pode digitar um nome para sua página de destino no campo ‘Nome da Página’. Isso é apenas para sua referência, então você pode usar o que quiser.

O SeedProd criará automaticamente uma ‘URL da Página’ usando o nome da página, mas você pode alterar essa URL gerada automaticamente.

Quando estiver satisfeito com as informações que digitou, clique em 'Salvar e Começar a Editar a Página'. Isso carregará a interface do construtor de páginas do SeedProd.

Este construtor simples de arrastar e soltar mostra uma prévia ao vivo da página à direita. À esquerda, há um menu que mostra os diferentes blocos e seções que você pode adicionar ao seu blog WordPress ou site.

O SeedProd vem com mais de 90 blocos prontos que podem ajudá-lo a criar um design de página bonito e rápido. Isso inclui blocos avançados como contadores regressivos e incorporações como um reprodutor de áudio do SoundCloud ou vídeos do TikTok.

Você também pode usar blocos do SeedProd como espaçadores, colunas e divisores para estruturar a página. Isso pode ajudar os visitantes a navegar pela página e encontrar as informações que desejam.

Quando encontrar um bloco que deseja adicionar ao layout da página, basta arrastá-lo e soltá-lo no modelo. Ao construir sua página de destino, você pode mover esses blocos pelo seu layout arrastando e soltando-os.

Para adicionar um mapa interativo, basta encontrar o bloco Google Maps no menu à esquerda e arrastá-lo para o seu layout.

O bloco Google Maps mostrará um local padrão, mas você normalmente desejará alterá-lo.

Basta clicar para selecionar o bloco do Google Maps e, em seguida, clicar no pequeno ícone de engrenagem que aparece na barra de ferramentas.

Isso abre as configurações do bloco no menu esquerdo.

Aqui, digite um endereço diferente no campo 'Localização'.

O bloco será atualizado para mostrar este endereço.

Os visitantes podem aproximar e afastar este local manualmente usando os botões de nível de zoom '+' e '-' no canto direito do mapa. No entanto, você pode alterar o zoom padrão arrastando o controle deslizante 'Zoom' ou digitando um número exato na caixa de texto.

Depois disso, você pode querer redimensionar o bloco usando os controles deslizantes 'Largura' e 'Altura'. A 'Altura' é mostrada em pixels, mas a 'Largura' é a porcentagem total disponível. Por exemplo, '100' significa que o bloco do Google Maps ocupa 100% da largura disponível.

Para alterar qualquer um desses valores, basta arrastar os controles deslizantes ou digitar um número na caixa de texto. À medida que você faz alterações, o bloco do Google Maps será atualizado automaticamente para que você possa experimentar diferentes configurações para ver o que fica melhor.

Se você definir a largura para menos de 100, talvez queira alterar o alinhamento do bloco. Por exemplo, você pode exibir o mapa interativo no centro da página.

Para fazer essa alteração, basta clicar nos diferentes botões na seção 'Alinhamento'.

Agora você pode continuar trabalhando no design arrastando novos blocos para o layout da página e, em seguida, fazendo alterações no menu esquerdo. Para mais informações, consulte nosso guia sobre como criar uma landing page no WordPress.

Quando estiver satisfeito com a configuração da página, clique na seta ao lado do botão 'Salvar' e, em seguida, selecione 'Publicar'.

Agora, se você visitar seu site, verá o mapa interativo em ação.

Método 2. Crie Mapas Personalizados Interativos Gratuitamente Usando o Google My Maps

Se você quiser adicionar um Google Map com interações básicas, o SeedProd é uma ótima opção.

No entanto, se você precisar fornecer interações mais avançadas, recomendamos usar o Google My Maps em vez disso.

Este serviço online gratuito permite que você personalize um Google Maps com marcadores exclusivos, pontos de interesse, rotas de direção e muito mais. Você pode então adicioná-lo ao seu site usando código, para não precisar instalar um plugin do WordPress separado.

Etapa 1: Crie um Mapa Interativo Usando o Google My Maps

Primeiro, você precisa visitar o site do Google My Maps e clicar em ‘Criar um novo mapa’.

Agora você verá o editor de mapas.

Aqui, você pode selecionar um mapa base e adicionar pontos de interesse, camadas e muito mais.

Para ajudar a manter seu trabalho organizado, é uma boa ideia dar um nome à camada.

Para fazer isso, clique nos três pontos ao lado de ‘Camada sem título’ e, em seguida, selecione ‘Renomear esta camada.’

Agora você pode digitar o nome que deseja usar. Isso é apenas para sua referência, então você pode usar o que quiser.

Com isso feito, clique em 'Salvar'.

Em seguida, você pode alterar a aparência do mapa escolhendo um dos estilos prontos. Para ver as opções disponíveis, clique na seta ao lado de ‘Mapa base.’

Você pode então clicar em qualquer uma das miniaturas para aplicar esse estilo ao mapa.

Etapa 2: Adicionar Pontos de Interesse ao Mapa Interativo

Se você quiser apenas criar um mapa simples, pode pular para a etapa 4. No entanto, você pode querer personalizar o mapa adicionando pontos de interesse.

Quando um visitante clicar em qualquer um desses pontos, uma tooltip será aberta mostrando o nome do local, além de uma descrição, fotos e vídeos, quando disponíveis.

Existem algumas maneiras diferentes de adicionar pontos de interesse clicáveis, mas a mais fácil é digitar o endereço na barra de pesquisa e, em seguida, clicar no ícone ‘Pesquisar’.

O Google My Maps agora ampliará a área.

Às vezes, o local já pode ter sido adicionado como um ponto de interesse, especialmente se o lugar for uma grande atração turística ou um edifício famoso. Se for esse o caso, você pode simplesmente clicar no local e, em seguida, selecionar ‘Adicionar ao mapa.’

Se o ponto de interesse já existir, o Google My Maps mostrará automaticamente algumas informações sobre esse local em um pop-up. No entanto, você pode querer personalizar essas informações padrão ou adicionar suas próprias fotos e vídeos.

Para fazer isso, clique no ícone ‘Editar’, que se parece com um pequeno lápis.

Agora você pode digitar o título e a descrição que deseja mostrar a qualquer pessoa que clicar neste local de interesse.

Quando estiver satisfeito com as informações que inseriu, clique em ‘Salvar.’

Outra opção é adicionar suas próprias imagens e vídeos ao pop-up.

Por exemplo, se você estiver criando um mapa interativo para o site do seu restaurante, você pode adicionar fotos do exterior do local para ajudar os clientes a encontrá-lo.

Você pode até usar este pop-up para atrair mais clientes. Por exemplo, se você estiver adicionando seu estúdio de fotografia como um ponto de interesse, poderá fazer o upload do seu portfólio de fotografia.

Para adicionar mídia, basta clicar no pequeno ícone da câmera.

Agora você pode escolher uma imagem ou vídeo no pop-up que aparece.

Após fazer sua seleção, clique em 'Inserir'.

Quando terminar, não se esqueça de clicar em 'Salvar' para armazenar suas alterações.

Às vezes, você pode querer mostrar um local que ainda não foi adicionado ao Google Maps. Pode ser seu próprio escritório, um localizador de lojas, uma atração turística novíssima ou o ponto de encontro para seu evento ou conferência.

Para adicionar um marcador, clique no ícone 'Adicionar um marcador' abaixo da barra de pesquisa.

Agora você pode clicar no local exato onde deseja criar um marcador.

Isso abrirá um pop-up vazio onde você pode digitar um título e uma descrição. Você também pode adicionar imagens e vídeos clicando no pequeno ícone da câmera.

Quando estiver satisfeito com a configuração do pop-up, clique no botão 'Salvar'.

Para criar mais pontos de interesse, basta seguir o mesmo processo descrito acima.

Etapa 3: Adicionar Direções de Viagem a um Mapa Interativo

Você também pode querer adicionar algumas direções, que serão mostradas como uma linha azul no mapa.

Este recurso de mapa pode ser útil se você quiser ajudar os participantes a encontrar seu evento ou um local como seu bar ou pub. Se você tem um blog de viagens, você pode até recomendar algumas rotas turísticas para seus leitores.

Existem algumas maneiras diferentes de adicionar direções, mas o método mais fácil é clicar no ícone 'Adicionar direções' abaixo da barra de pesquisa.

Isso adiciona uma nova seção à esquerda da tela, onde você pode digitar os endereços de partida e chegada que deseja usar.

Por padrão, o Google Maps mostrará as direções de carro, mas você pode alternar para direções a pé ou de bicicleta. Simplesmente clique no texto que mostra 'Dirigindo' por padrão e, em seguida, selecione o ícone de Bicicleta ou Caminhada.

Outra opção é desenhar uma linha no mapa. Isso é útil se você quiser mostrar uma rota muito específica entre dois ou mais locais, em vez da rota mais rápida.

Para fazer isso, clique no ícone 'Desenhar uma linha' abaixo da barra de pesquisa. Agora você pode escolher se deseja adicionar uma rota de carro, a pé ou de bicicleta.

Depois disso, clique no ponto de partida e desenhe uma linha movendo o mouse ao longo da rota que você deseja seguir.

Quando você chegar ao destino, simplesmente clique para colocar um marcador nesse local. Neste ponto, você pode parar de desenhar ou continuar movendo o mouse para adicionar mais marcadores à rota.

Etapa 4: Publique o Mapa Interativo no WordPress

Quando estiver satisfeito com a configuração do mapa, você pode adicioná-lo ao seu site usando um código de incorporação iFrame.

Para começar, você precisará tornar o mapa público clicando no botão 'Compartilhar'. Isso abre um pop-up onde você pode digitar um título para o mapa e uma descrição opcional.

Quando estiver satisfeito com as informações inseridas, clique em ‘OK’.

Em seguida, você vai querer ativar o controle deslizante ‘Qualquer pessoa com este link pode visualizar’. As outras configurações são opcionais, então você pode decidir se deseja permitir que as pessoas pesquisem o mapa ou mostrar seu nome e foto de perfil.

Quando estiver satisfeito com a configuração, clique em ‘Compartilhar no Drive’.

No próximo pop-up, abra o menu suspenso em ‘Acesso geral’ e selecione ‘Qualquer pessoa com o link’.

Como não queremos que outras pessoas editem o mapa, clique no menu suspenso ‘Visualizador/Editor’ e selecione ‘Visualizador’. Por fim, clique em ‘Concluído’.

Depois disso, clique no ícone de três pontos no menu da esquerda.

Em seguida, escolha ‘Incorporar no meu site’.

O Google Maps agora mostrará um código de incorporação que permite adicionar o mapa à sua loja online, blog ou site.

Você pode prosseguir e copiar este código iframe.

Agora você está pronto para colar o código em seu site. No seu painel do WordPress, vá para a postagem ou página onde deseja adicionar um mapa interativo e abra o editor Gutenberg.

Em seguida, clique no botão ‘+’ e comece a digitar ‘HTML’ para encontrar o bloco HTML personalizado. Quando o bloco correto aparecer, clique para adicioná-lo à postagem ou página.

Agora você pode colar o código do Google Maps no bloco HTML Personalizado.

Quando estiver pronto para publicar, clique no botão Atualizar ou Publicar.

Agora, se você visitar seu site, verá o mapa interativo ao vivo.

Quer aprender mais sobre como adicionar mapas ao WordPress? Confira os artigos abaixo:

• Como Adicionar o Google Maps no WordPress (Do Jeito CERTO)
• Melhores Plugins de Google Maps para WordPress (A Maioria é Gratuita)
• Como Incorporar um Mapa do Google em Formulários de Contato (Com Marcador de Mapa)
• Como Adicionar Localizador de Lojas com Google Maps no WordPress
• Como Incorporar Bing Maps no WordPress (Passo a Passo)

Esperamos que este tutorial tenha ajudado você a aprender como adicionar um mapa interativo no WordPress. Você também pode querer aprender como adicionar Google Web Stories ao seu site WordPress ou ler nosso guia definitivo sobre como incorporar PDFs, planilhas e muito mais no WordPress.

Se você gostou deste artigo, por favor, inscreva-se em nosso Canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e no Facebook.