Adicionar múltiplos Google Maps em uma página no WordPress é uma das maneiras mais fáceis de mostrar aos visitantes todos os seus locais sem enviá-los para páginas separadas.
Eu mesmo já passei por isso ao gerenciar diferentes locais para um negócio local. Cada local precisava de seu próprio mapa, e eu não queria que as pessoas clicassem em vários lugares apenas para obter direções.
Neste guia, mostrarei duas maneiras fáceis para iniciantes de fazer isso. Uma usa um construtor de páginas com um bloco de Google Maps de arrastar e soltar. A outra usa o código de incorporação gratuito diretamente do Google Maps.
O que você vai precisar: Um site WordPress com acesso de administrador e uma conta Google gratuita. Se você quiser usar o método de arrastar e soltar, também precisará do SeedProd Pro.
Método 1. Adicionar Múltiplos Google Maps em Uma Página com SeedProd
O primeiro método neste tutorial mostra como adicionar múltiplos mapas do Google em uma página de destino no WordPress.
Páginas de destino são a melhor maneira de converter tráfego direcionado em leads e vendas. Portanto, se você está promovendo um evento ou descontos em lojas locais, uma página de destino com vários mapas é a maneira ideal de atrair pessoas.
E o melhor plugin de página de destino para WordPress para essa tarefa é o SeedProd.
SeedProd é um construtor visual de páginas de destino e construtor de sites WordPress que permite criar páginas de alta conversão sem escrever código. Ele vem com centenas de modelos de página de destino responsivos que você pode personalizar no editor de arrastar e soltar.
Além disso, o SeedProd tem toneladas de blocos de conteúdo inteligentes para adicionar conteúdo amigável à sua página, incluindo:
- Mapas do Google
- Botões de call-to-action
- Tabelas de preços
- Carrosséis de imagens
- Depoimentos
- Texto dinâmico
- Títulos animados
- Formulários de optin
- E mais
Isso significa que você pode criar qualquer página rapidamente sem contratar um desenvolvedor.
Siga os passos abaixo para aprender como adicionar Google Maps em uma página no WordPress com SeedProd.
Tutorial em Vídeo
Passo 1. Baixe o Plugin de Página de Destino SeedProd
Primeiro, visite o site do SeedProd e baixe o plugin SeedProd para o seu computador.
Embora o SeedProd tenha uma versão gratuita, usaremos o SeedProd Pro para este tutorial. Dessa forma, poderemos usar o bloco de Google Maps.
Após baixar o plugin, instale e ative-o em seu site. Se precisar de ajuda com esta etapa, siga este guia passo a passo para instalar plugins do WordPress.
Depois de instalar o SeedProd, você verá uma tela de boas-vindas solicitando sua chave de licença. Insira sua chave e clique no botão Verificar Chave para ativar sua licença.
Observação: você pode encontrar sua chave fazendo login na sua conta SeedProd e clicando no link Ver Chave de Licença, Detalhes e Downloads.
Passo 2. Crie uma Nova Página de Destino
Após ativar sua chave de licença, role a tela de boas-vindas para baixo e clique no botão Criar Sua Primeira Página.
A partir daí, você será direcionado para o painel de páginas de destino do SeedProd.
Nesta página, existem vários modos de página de destino, incluindo:
E com esses modos de página, você pode ativar diferentes landing pages com um único clique. Por exemplo, você pode ativar o modo de manutenção quando estiver realizando pequenas atualizações.
Abaixo da seção de modos de página, clique no botão Criar Nova Landing Page para criar sua primeira página.
Na próxima tela, você pode escolher entre centenas de modelos de landing page pré-fabricados. Simplesmente clique para selecionar um modelo e usá-lo como ponto de partida.
Após escolher um modelo, um pop-up se abre, pedindo para você nomear sua página e inserir o URL.
A partir daí, clique no botão Salvar e Começar a Editar a Página para lançar seu modelo.
Passo 3. Personalize Sua Página de Destino
Quando você lançar seu design, ele será aberto no construtor de páginas do SeedProd. O editor possui um design amigável de 2 painéis para facilitar a personalização da sua página:
- Painel esquerdo: Blocos e seções para construir e personalizar sua página
- Painel direito: Pré-visualização ao vivo da sua landing page em tempo real
Na parte superior do editor, há um menu de navegação para alternar rapidamente entre seu design, integrações e configurações.
E na parte inferior do painel esquerdo, há vários outros ícones para desfazer e refazer alterações, alternar para a visualização móvel e muito mais.
Essas configurações facilitam a personalização do seu design para atingir seus objetivos de landing page. Por exemplo, clicar em um título de página permite que você altere o conteúdo, a cor e veja as alterações em tempo real.
Ou, para substituir as imagens do modelo padrão, você pode clicar em qualquer imagem e substituí-la por uma do seu computador, da biblioteca de mídia ou escolher uma foto gratuita.
Continue personalizando seu design até ficar satisfeito com a aparência de tudo. E não se esqueça de clicar no botão Salvar no canto superior direito.
Etapa 4. Adicionar Múltiplos Mapas do Google à Sua Landing Page
Adicionar múltiplos Mapas do Google à sua landing page é fácil com o bloco de Mapas do Google integrado do SeedProd.
Primeiro, vamos adicionar algumas colunas para abrigar cada mapa. No painel esquerdo, clique no bloco Coluna e arraste-o para uma seção da sua página.
Agora escolha quantas colunas você deseja exibir. Para este guia, escolhemos o layout de 3 colunas.
Agora você está pronto para adicionar Mapas do Google a cada coluna.
Para fazer isso, clique no bloco Mapas do Google e arraste-o para a primeira coluna.
Clicar nas configurações do bloco abre um painel onde você pode inserir sua localização escolhida. Você pode então escolher o zoom do mapa, alterar o alinhamento e ajustar a largura.
Além disso, você pode escolher diferentes estilos de borda e ajustar o espaçamento ao redor do seu mapa personalizado na aba Avançado.
Agora repita esta etapa para cada mapa que você deseja adicionar à sua landing page.
Etapa 5. Publicar Sua Landing Page com Mapas do Google
Quando você estiver satisfeito com a aparência da sua landing page, clique na seta para baixo ao lado do botão Salvar verde e clique em Publicar.
Em seguida, você verá uma janela informando que sua página foi publicada. Para ver uma pré-visualização ao vivo, clique no botão Ver Página ao Vivo.
Método 2. Adicionar Manualmente Múltiplos Mapas do Google em Uma Página no WordPress
O segundo método neste guia envolve copiar e colar o código de incorporação da API do Google Maps e colá-lo em uma postagem ou página do WordPress em vez de usar um plugin de mapas.
A desvantagem deste método é que você precisará encontrar o código de incorporação para cada mapa que deseja exibir. Ele também exige que você alterne entre seu site WordPress e o Google Maps e vice-versa.
Além disso, incorporar mapas diretamente no WordPress limita as opções de personalização. Portanto, você não terá o controle avançado de layout que obtém com um construtor de páginas do WordPress como o SeedProd.
Aqui estão as etapas para incorporar vários mapas do Google manualmente com o código de incorporação.
Etapa 1. Encontre e Compartilhe Sua Localização no Google Maps
Primeiro, acesse o Google Maps e digite o primeiro endereço que você deseja incorporar.
Após encontrar sua localização, clique no ícone Compartilhar para exibir as configurações de compartilhamento do Google Maps.
Agora clique na guia Incorporar, escolha um tamanho de mapa no menu suspenso e clique no link 'Copiar HTML'.
Etapa 2. Adicione o Código de Incorporação no WordPress
Em seguida, vá para o seu painel do WordPress e crie uma nova página.
Dentro do editor do WordPress, clique no ícone de Mais (+) para adicionar um novo bloco do WordPress e clique no bloco HTML Personalizado.
Agora cole o código de incorporação do Google Maps no bloco HTML. E se você clicar no botão Visualizar, poderá ver como seu mapa fica.
Etapa 3. Incorpore Mais Mapas do Google
Agora que você sabe como adicionar um mapa, adicione mais seguindo os mesmos passos. Simplesmente escolha um local de mapa diferente, copie o código de incorporação e adicione-o em um novo bloco HTML na sua página do WordPress.
Após adicionar todos os seus mapas à página, clique em Publicar. Em seguida, ao visualizar a página, você verá cada mapa incorporado em uma única tela.
Como Adicionar Várias Localizações a um Mapa no WordPress?
Até agora, você sabe como adicionar vários mapas do Google em uma página no WordPress. Mas e se você quiser adicionar vários marcadores em um único mapa e incorporá-lo em seu site WordPress?
Felizmente, você pode fazer isso com o método de incorporação de mapas que mencionamos anteriormente. No entanto, há algumas etapas adicionais que destacamos abaixo.
Etapa 1. Crie um Mapa Personalizado do Google
Primeiro, vá ao Google Maps, abra o menu e clique no link 'Seus lugares'.
A partir daí, clique na guia Mapas e clique em 'Criar Mapa' na parte inferior da página.
Clique no rótulo chamado 'Mapa sem título' e dê um nome sensato ao seu mapa. Repita esta etapa para o título 'Camada sem título'.
Etapa 2. Marque Suas Localizações no Mapa
Agora você pode inserir sua localização na barra de pesquisa para procurá-la no mapa. E assim que a encontrar, clique no link + Adicionar ao mapa para colocar um marcador nesse local.
Repita esta etapa para cada local que você deseja adicionar ao seu mapa.
Etapa 3. Compartilhe Seu Mapa
Para incorporar seu mapa no WordPress, você primeiro precisa torná-lo público; caso contrário, você não poderá acessar o código de incorporação. Portanto, prossiga e clique no ícone 'Compartilhar'.
Agora ative as seguintes configurações:
- Qualquer pessoa com este link pode visualizar
- Permitir que outras pessoas pesquisem e encontrem este mapa na internet
Depois de compartilhar seu mapa, clique nos 3 pontos no canto superior direito e selecione a opção “Incorporar no meu site”.
A partir daí, você pode copiar o código de incorporação personalizado do Google Maps.
Etapa 4. Incorpore seu Mapa no WordPress
A etapa final é adicionar seu mapa com vários locais a uma nova página do WordPress. Portanto, crie uma nova página, escolha o bloco HTML Personalizado e cole seu código de incorporação.
Agora, quando você clicar em Publicar e visualizar sua página, verá apenas 1 mapa com vários marcadores personalizados.
Perguntas Frequentes Sobre Como Adicionar Google Maps no WordPress
Preciso de uma chave de API do Google Maps para incorporar um mapa no WordPress?
Não, não para o método básico de incorporação. Quando você usa a opção Compartilhar > Incorporar no Google Maps, o código iframe funciona sem uma chave de API. Você só precisa de uma chave de API se usar um plugin de mapas que se conecta através da API do Google Maps, ou se quiser criar um mapa personalizado com a API JavaScript.
Vários Google Maps em uma página vão deixar meu site lento?
Cada mapa incorporado carrega seu próprio iframe, portanto, adicionar vários mapas pode aumentar o tempo de carregamento da página. Recomendo manter de 3 a 4 mapas por página. Se precisar de mais, considere usar um único mapa com vários pinos em vez disso. Você também pode adicionar loading="lazy" a cada iframe para que os mapas só carreguem quando o visitante rolar até eles.
Posso personalizar a aparência dos meus Google Maps incorporados?
O método básico de incorporação oferece opções limitadas. Você pode escolher tamanho pequeno, médio, grande ou personalizado ao copiar o código de incorporação. Para mais controle sobre cores de pinos, janelas de informações e estilo do mapa, use o Google My Maps para criar um mapa personalizado primeiro e, em seguida, incorpore-o. O bloco Google Maps do SeedProd também permite ajustar zoom, alinhamento e bordas.
O Google Maps é gratuito para usar em sites WordPress?
Sim, incorporar o Google Maps com um iframe é totalmente gratuito, sem limites de uso. Se você usar a API do Google Maps através de um plugin, o Google oferece US$ 200 em créditos gratuitos a cada mês. Isso cobre cerca de 28.000 carregamentos de mapas, o que é mais do que suficiente para a maioria dos sites de pequenas empresas.
Agora você conhece duas maneiras simples de adicionar vários Google Maps em uma página no WordPress. Se você deseja controle total sobre seu layout e um fluxo de trabalho mais rápido, o construtor de arrastar e soltar do SeedProd é a opção mais fácil.
Com o SeedProd, você pode adicionar mapas, detalhes de contato e quaisquer outros elementos que precisar em apenas alguns cliques — sem necessidade de codificação. Comece hoje e crie uma página profissional em minutos.
Você também pode achar os seguintes guias do WordPress úteis:
- Como Adicionar CSS Personalizado no WordPress
- Como Adicionar Sombra de Caixa no WordPress
- Como Adicionar uma Galeria a Páginas e Posts do WordPress
- Como Ocultar Títulos de Página no WordPress
- Como Alterar Margens no WordPress
Obrigado por ler! Adoraríamos saber sua opinião, então sinta-se à vontade para participar da conversa no YouTube, X e Facebook para mais conselhos e conteúdo úteis para expandir seus negócios.
