Como adicionar o Google Maps no site WordPress (a maneira mais fácil)

Adicionar um mapa do Google ao seu site não apenas torna mais fácil para os visitantes encontrarem a localização da sua empresa, mas também adiciona um toque de profissionalismo e funcionalidade. 

Mas como adicionar o Google Maps no site WordPress? 🤔

Não se preocupe! Mostraremos o método mais fácil:

• Usando um plugin WordPress (ElementsKit)

Você pode perguntar, por que ElementsKit? 

Bem, ele oferece um widget do Google Map que você pode inserir apenas arrastar e soltar. Além disso, você obterá enormes opções de personalização para personalizar seu mapa do Google para que fique exatamente como você deseja. Então, você não precisa ser um gênio da codificação para fazer isso acontecer!

Vamos mergulhar! 🥳

O que é o Google Maps?

O Google Maps é um serviço de mapeamento da web desenvolvido pelo Google para exibir localizações e direções precisas para qualquer endereço. 🗺️

O Google Maps é um serviço de mapeamento da web desenvolvido pelo Google para exibir localizações e direções precisas para qualquer endereço. Você pode ver imagens de satélite, mapas de ruas e Vistas panorâmicas de 360° de ruas. Além disso, o Google Maps também oferece condições de trânsito em tempo real e o melhor planejamento de rotas para viajar a pé, de carro, de bicicleta ou de transporte público. 🛣️🚦

Então, como funciona o Google Maps? Bem, o Google Maps funciona principalmente usando um combinação completa de imagens de satélite e terrestres. Ao mesmo tempo, coleta continuamente feedback dos usuários para prosseguir com um processo de validação e se mantém atualizado com as constantes mudanças nos condições em tempo real. ⏳

Como adicionar o Google Maps no site WordPress em 5 etapas 

A maneira mais fácil de integrar o Google Maps no WordPress é usando um plugin do WordPress. A integração manual também é possível, mas é difícil obter todas as facilidades e opções de personalização sem um plugin.

Para adicionar o Google Maps ao seu site WordPress, o Plug-in WordPress ElemenetKit é a melhor escolha. É um complemento Elementor completo e definitivo para o site WordPress que já atingiu o Marco de instalação ativa de mais de 1 milhão. 

Você vai ter 85+ widgets Elementor personalizados junto com o mapa do Google. Com vários tipos de estilos de mapas, você encontrará inúmeras opções de personalização que certamente atenderão às suas preferências, tipo de site, bem como às necessidades dos usuários.

Vamos explorar o simples 5 etapas sobre como adicionar o Google Maps no site WordPress usando o plugin ElementsKit! 🙌 

✨✨ Requisitos 
✅ Elementor – Baixar Elementor
✅ ElementsKit Lite – Baixar ElementsKit Lite
✅ ElementsKit Pro – Obtenha o ElementsKit Pro
✅ API do Google Maps – Obtenha a API do Google Maps

Etapa 1: instalar o plug-in ElementsKit 

O processo de instalação do ElementsKit é semelhante a qualquer outra instalação de plugin no WordPress. Você pode instalá-lo e ativá-lo diretamente ou fazer upload do arquivo zip do plugin e, em seguida, instalar e ativar a licença. Para instalar o ElementsKit, 

• Vá para o painel do WordPress 
• Clique em Plug-ins ➔ “Adicionar novo” 
• Faça o download do Plug-in ElementsKit para WordPress Compacte o arquivo e carregue o arquivo 
• Ou pesquise Complemento ElementetsKit  na caixa de pesquisa
• Então clique em "Instalar"
• Depois de instalado, clique em "Ativar"

🎯 Como o recurso Google Map é um widget profissional do ElementsKit, você precisa adquirir um pacote premium e ativar a licença. 

👉 Aqui está o guia de documentação sobre como comprar e ativar a licença ElementsKit Pro. 

Etapa 2: gerar uma chave de API do Google Map

Agora, você precisa gerar a chave da API do Google Map para se conectar ao seu site WordPress. A API do Google Maps (Interface de Programação de Aplicativo) é uma código único fornecidos pelo Google para integrar e utilizar a funcionalidade do Google Maps em seus próprios sites ou outros aplicativos. 

• Navegar para Configurar no Console do Cloud
• Clique em “Criar Novo Projeto”

• Escreva o seu Nome do Projeto e localização 
• Clique em "CRIAR"

• Ele irá redirecionar para o menu de hambúrguer
• Selecione os "APIs e serviços” opção
• Clique em “ATIVAR APIS E SERVIÇOS”

• Procurar Mapa na caixa de pesquisa
• Ou clique no  “API JavaScript de mapas”

• Se você não possui planos premium, você precisa Crie sua conta com as informações necessárias (país, detalhes do cartão, endereço de cobrança, etc.)

• Em seguida, habilite o API JavaScript do Google Maps 
• Agora, vá para o Plataforma Google Maps ➔ página Credenciais
• Selecione uma projeto ou você também pode criar um novo projeto daqui
• Clique em “Criar credenciais”, e isso gerará um novo Chave API para você

• A seguir, clique Criar credenciais ➔ chave API
• Você pode ver a chave de API recém-criada para o Google Maps listada na página Credenciais em Chaves de API
• cópia de a chave API daqui
• Clique em Fechar

❗❗Lembre-se de restringir a API chave antes de usá-la em seu site WordPress❗❗

Etapa 3: conectar a chave da API do Google Map ao ElementsKit 

Agora, você precisa conecte a chave da API do Google Map recém-criada para o seu site WordPress. Para fazer isso, você deve colar a chave API na seção Google Map do ElementsKit. 

• Vá para o painel do WordPress 
• Clique em “Kit de Elementos” 
• Vou ao “WIDGETS” opção
• Role para baixo, você pode ver o widget do Google Map  
• Ligar o “Google Mapa” ferramenta 
• Clique em “Salvar alterações”

• Navegar  “ElementsKit” ➔ “Configurações do usuário”
• Role para baixo e clique no “Google Mapa” opção 
• Cole a chave API no campo de entrada 
• Clique em “Salvar alterações”

Etapa 4: arraste e solte o widget do mapa do Google dentro da página/postagem

Agora é hora de ver como adicionar o Google Maps em um site WordPress apenas arrastando e soltando:

• Crie um novo página/postagem ou abra uma página/postagem existente 
• Clique em “Editar com Elemetor” 
• Procure o “Google Mapa” widget do Elemenetkit 
• Arraste e solte o widget dentro do bloco onde você deseja exibir o mapa

🟢 Observação: você pode adicionar vários mapas e personalizá-los individualmente usando o mesmo widget. Tudo que você precisa fazer é selecionar um bloco Elementor e arrastar e soltar o widget do Google Map. 🟢

Etapa 5: personalize as configurações do mapa do Google 

Agora, a etapa final é personalizar o Google Maps de acordo com suas preferências. ElementsKit oferece inúmeras opções de personalização, incluindo conteúdo, estilo e configurações avançadas para layout, efeitos de movimento, capacidade de resposta, CSS personalizado, etc. 

Vamos ver como você pode personalizar o Google Maps usando as opções de personalização do ElementsKit em seu site WordPress. 

Personalização de conteúdo 

Nesta seção, você pode selecionar o tipo de mapa e tipo de endereço e definir latitude e longitude personalizadas para adicionar o endereço que deseja exibir em seu site. Além disso, existem opções de personalização para marcadores de mapa, controles e temas. 

🌎 Tipo de mapa 

ElementsKit oferece plataformas de mapeamento versáteis a partir deste widget. Você pode selecionar o tipo de mapa na seção suspensa. 

• Clique em Configurações ➔ Selecionar tipo de mapa  

Aqui você pode obter 7 tipos de mapas do Google, como:

1️⃣ Básico: Com a funcionalidade básica do Google Map, os usuários do seu site podem pesquisar locais, visualizar mapas e obter instruções para vários destinos. 

Se você é iniciante e deseja adicionar um mapa simples do Google ao seu site WordPress com um marcador, escolha o tipo de mapa básico. 

2️⃣ Marcador Múltiplo: Usar vários mapas do Google é ideal para você planejar viagens ou destacar locais diferentes. Os visitantes do seu site podem marcar e rotular vários pontos de interesse em um único mapa. 

3️⃣ Estática: Usando o recurso de mapas estáticos do ElementsKit, você pode fornecer aos seus usuários a geração de uma imagem estática de um mapa. Este tipo de mapa pode ser incorporado em seus sites WordPress se você quiser compartilhar visualização off-line. 

4️⃣ Polilinha:  você usa o Google Maps do tipo Polyline em seu site WordPress para permitir que os usuários criem e exibam linhas no mapa para ver as rotas, limites ou áreas específicas de interesse.

5️⃣ Excessivamente: O widget Google Maps do ElementsKit também oferece suporte ao recurso de integração de sobreposição. Usando este tipo de mapa, você pode exibir a sobreposição dados adicionais como informações meteorológicas, condições de tráfego ou camadas personalizadas no mapa para visualização aprimorada. 

6️⃣ Com Rotas: Quando você usa o mapa de rotas do ElementsKit, os visitantes do seu site podem inserir seus pontos de partida e destino para obter instruções passo a passo detalhadas. Além disso, eles podem ver o tempo estimado de viagem e atualizações de trânsito em tempo real. 

Isso ajudará a descobrir a distância de sua localização ou é mais adequado quando você precisar adicionar vários endereços de escritórios/filiais ao seu site.

7️⃣ Panorama: Você também pode exibir a visualização panorâmica usando o widget Google Map do ElementsKit. As visualizações panorâmicas, também conhecidas como Street View, fornecerão aos usuários uma Virtual em 360 graus passeio por vários locais. Isso permitirá que os visitantes do site explorem lugares como se estivessem fisicamente presentes.

👉👉 Para cada tipo de personalização de mapa detalhadamente, você pode conferir esta documentação – Mapa do Google no site WordPress.

📌 Tipo de endereço 

Para cada tipo, você pode selecionar Tipo de endereço como endereço clicando escrevendo o nome do local diretamente ou definir a latitude e longitude do respectivo endereço. 

No entanto, a latitude e a longitude são as coordenadas geográficas para representar um local específico na superfície da Terra. 

Latitude é a medida da distância de um ponto norte ou sul do Equador. Por outro lado, a longitude define a medida da distância de um ponto leste ou oeste do Meridiano Principal.

Obtenha latitude e longitude: 

• Vá para https://www.google.com/maps/
• Procure o nome da sua localização
• Clique com o botão direito no ponto exato do mapa
• Você pode ver o valores de Latitude (esquerda) e Longitude (direita)
• Agora cópia de a Latitude e a Longitude
• Próximo, colar -los em seus campos de entrada

🔖 Configurações do marcador 

Aqui você pode personalizar as opções de marcação do local usando título, conteúdo, ícone, etc. 

• Adicione um Título do mapa do Google para exibir o nome enquanto alguém pesquisa sua localização
• Escreva conteúdo com 1-2 linhas para descreva o endereço ao passar o mouse sobre o mapa 
• Ative o botão de alternância para adicionar um ícone de marcador personalizado
• Ícone de marcador de upload, você pode usar o logotipo da sua empresa ou outros ícones para descrever sua identidade 
• Definir largura e altura personalizadas para o ícone do marcador 

🟢 Para mapas do Google de vários tipos de marcadores, você pode fazer upload e personalizar vários ícones para cada local. 🟢

🎛️ Controles

Você pode controlar o nível de zoom, visualização da rua, tipo de mapa, rolagem do mapa, etc. a partir desta configuração. 

• Controle o nível de zoom: Forneça qualquer número para definir o nível de zoom.
• Ative o controle do Street View: Ative para mostrar o mapa com o Street View.
• Ative o controle de tipo de mapa: Ative para permitir que o usuário controle o tipo de mapa, por exemplo, roteiro, satélite, etc.
• Ative o controle de zoom: Ative para adicionar um ícone de controle de zoom para aumentar (+) e diminuir (-) o mapa.
• Habilite o controle de tela cheia: Ativar esta opção permitirá que o usuário veja o mapa em modo de tela cheia.
• Ativar zoom da roda de rolagem: A ativação da roda de controle de rolagem aumentará ou diminuirá o fator de zoom em 10% para cada clique, para cima ou para baixo.

🎨 Temas

Você pode personalizar a fonte e os estilos do tema do Google Map. Além disso, se você puder adicionar um tema personalizado, isso será possível no widget ElementsKit Google Map. 

✨ Fonte do tema padrão do Google 

• Clique no tema ➔ Selecione o tipo de fonte: padrão do Google  
• Selecione estilos de tema padrão na seção suspensa:
  • Padrão, Sliver, Retro, Escuro, Noturno e Berinjela

✨ Fonte do tema Snazzy Maps 

• Se você deseja adicionar vários esquemas de cores, o Snazzy Map é para o seu site. 
• Clique no tema ➔ Selecione o tipo de fonte: Snazzy Maps
• Selecione os estilos na seção suspensa:
  • Padrão, Simples, Colorido, Complexo, Escuro, Tons de cinza, Monocromático, Sem rótulos e Dois tons 

✨ Tema personalizado

• Você também pode adicionar um tema personalizado de acordo com suas preferências e necessidades. 
• Escolha o fonte do tema ➔ Personalizado
• Adicione um estilo de tema personalizado no campo fornecido 
• Clique em "Clique aqui" para obter o código de estilo JSON do estilo selecionado 

Personalização de estilo

Você terá total flexibilidade para definir altura, largura e alinhamento do mapa personalizados com base no design da página da web. 

➡️ Altura: Defina a altura personalizada para o mapa

➡️ Largura: Ajuste a largura conforme sua preferência

➡️ Alinhamento: Defina o alinhamento do mapa do Google à esquerda, à direita ou ao centro

Personalização Avançada 

Você pode controlar todos os estilos de layout do mapa e outras funcionalidades e personalizá-los nas configurações avançadas do widget ElementsKit Google Map. 

⏺️ Defina valores personalizados para o layout inteiro largura, margem, preenchimento, posição e índice z 

⏺️ Conjunto efeitos de movimento para os campos de entrada (por exemplo, aumentar o zoom, diminuir o zoom, aumentar gradualmente, diminuir gradualmente, etc.)

⏺️ Escolha o layout tipo e cor de fundo

⏺️ Personalize o tipo de borda, raio, máscara e capacidade de resposta do dispositivo (PC, guia, celular)

⏺️ Inserir atributos e CSS personalizado para funcionalidades adicionais 

5 benefícios de inserir o Google Maps em um site WordPress 

Adicionar o Google Maps ao seu site oferece inúmeras vantagens. Aqui está o 5 principais benefícios de integração do Google Maps em seu site WordPress:

1. Aumenta a visibilidade do negócio 

Quando algum visitante chega ao seu site, o Google Maps os ajuda a visualizar sua localização e fornecer uma ideia clara de onde sua empresa está situada. 

Pois esse recurso é particularmente útil para empresas com lojas físicas ou escritórios. Portanto, se você tiver várias filiais, poderá exibi-las em um único mapa. 

Isso ajudará seus clientes a descobrir filiais novas e próximas. Eles podem simplesmente clicar nos marcadores para obter o endereço e as direções para cada local. 

Como resultado, você pode aumentar seu visibilidade da empresa para clientes em potencial no seu site WordPress. 

2. Fornece instruções precisas 

Uma das principais vantagens de incorporar o Google Maps em seu site WordPress é fornecer instruções precisas para o seu negócio. Os visitantes podem inserir sua localização atual e receber instruções passo a passo até sua localização. 

Esse recurso é altamente conveniente para clientes que não estão familiarizados com a área ou dependem de transporte público. Direções precisas ajudam a garantir que clientes em potencial possam chegar facilmente à sua empresa sem qualquer aborrecimento ou confusão. 

3. Apresenta SEO local

Otimização de mecanismo de pesquisa local (SEO) é crucial para empresas que visam uma área geográfica específica. Ao integrar o Google Maps ao seu site WordPress, você pode mostrar a localização da sua empresa nos resultados de pesquisa. 

De acordo com estudos recentes, aproximadamente 46% de todas as pesquisas têm intenção local. Isso indica que os usuários da Internet estão procurando empresas, serviços ou produtos mais próximos.

Portanto, adicionar um mapa do Google aumentará suas chances de aparecer no pacote local ou pacote de mapas. É a seção dos resultados da pesquisa que exibe um mapa com empresas locais relacionadas à consulta de pesquisa. 

Como resultado, você pode aproveitar esse vasto público de pesquisa local e aumentar suas chances de atrair clientes locais. 

4. Facilita o planejamento de eventos 

Integrar o Google Maps ao seu site WordPress pode simplificar o processo de planejamento de eventos para você e seus participantes em quaisquer eventos ou reuniões de negócios. Você pode incorporar um mapa na página do seu evento para fornecer o localização e direções precisas para o local. 

Isso vai economize tempo e esforço de seus visitantes em procurar o local separadamente. Além disso, você pode incluir marcadores para paradas de transporte público, áreas de estacionamento ou acomodações próximas, para tornar ainda mais fácil para os participantes planejarem sua visita. 

5. Aumente a confiança, a credibilidade e a experiência do usuário 

Por último, mas não menos importante, quando você tem um endereço no Google Maps, ajuda a construir a confiança entre os visitantes. Isto mostra transparência e fornece aos clientes uma prova visual de sua existência. 

Além disso, quando os visitantes podem ver sua localização facilmente, é mais provável que confiem em sua empresa, especialmente se encontrarem comentários e classificações positivas associadas à sua localização.

Além disso, adicionar um mapa do Google ao seu site WordPress pode ajudar a aumentar a marca de forma credível bem como suavizar a experiência do usuário orientando com precisão o local de sua empresa. Isso reduzirá a necessidade de os usuários alternarem entre plataformas para encontrar rotas ou pesquisar sua empresa em serviços de mapeamento externos. 

Ao manter os visitantes em seu site, você pode fornecer uma experiência perfeita, aumentando as chances de conversões e satisfação do cliente.

🔔 As pessoas também lêem – Criando um News Ticker no WordPress: 3 etapas fáceis

5 práticas recomendadas para usar o Google Maps no WordPress

Aqui está o 5 melhores práticas por usar o Google Maps em sites WordPress para aprimorar a experiência do usuário e também ficar à frente dos jogos de SEO. 

✔️ Garanta o posicionamento correto do mapa

O posicionamento apropriado do mapa é crucial para a usabilidade e otimização de mecanismo de pesquisa (SEO). Por exemplo, você pode exibir seu mapa de localização no página de contato ou rodapé. 

Não existem regras rígidas para a colocação de mapas em seu site, apenas você deve colocar seu mapa em um local onde ele esteja fácil para visitantes para encontrar e usar.  

✔️ Otimize o tempo de carregamento e o desempenho do mapa

Assegure-se de ter otimizou o tempo de carregamento do mapa. Porque um mapa de carregamento lento pode ser frustrante para os visitantes e também prejudicar o seu SEO. 

Você pode usar um Plug-in leve do Google Maps com todas as opções de personalização como ElementsKit. Se você usar um método alternativo em vez de um plugin, minificar e compactar JavaScript e CSS arquivos antes de publicar o mapa do Google em seu site. 

✔️ Garanta um design responsivo para dispositivos móveis

A capacidade de resposta do dispositivo é obrigatória. Certifique-se de que o mapa ajusta automaticamente seu tamanho e layout para cabe em qualquer tamanho de tela por exemplo, PC, guia ou telefone celular. 

Isto é importante para garantir que os visitantes tenham uma boa experiencia visualizar seu mapa não apenas em PCs ou telas grandes, mas também em dispositivos móveis.

✔️ Garanta a conformidade com os Termos e Condições da API do Google Maps

O Google Maps tem um conjunto de termos e condições com os quais você deve concordar e segui-los. 

Estes termos e condições referem-se a como você pode usar o Google Maps e suas outras regras. Então é importante leia-os com atenção antes de usar a API.

✔️ Mantenha a versão atualizada do plug-in do Google Maps

O Google Maps lança regularmente novas versões de sua API. Esses lançamentos incluem novos recursos e correções de bugs. 

Portanto, é importante manter o plugin do Google Maps atualizado para certifique-se de estar usando a versão mais recente da API e de não perder nenhum novo recurso.

📢 Veja também – O que há de novo no WordPress 6.2: 11 recursos principais e muito mais!

Perguntas frequentes

Por que é importante adicionar ao site WordPress? 

Adicionar o Google Maps ao seu site WordPress pode melhorar o SEO local do seu site, construir a confiança do visitante, aumentar o tráfego do site e fornecer uma melhor experiência de usuário para seus visitantes.

Como criar um shortcode do Google Map no WordPress?

Para criar um shortcode de mapa do Google no WordPress, 

• Navegar para Mapa do Google
• Pesquise o local desejado 
• Navegar para  “Compartilhar” ➔ “Incorporar um mapa”
• cópia de o código HTML incorporado
• Agora, crie ou abra uma página/postagem existente
• Adicione um novo bloco HTML personalizado
• Colar o código incorporado neste bloco
• Este código iFrame incorporado será convertido em um shortcode quando você edita a página ou postagem

Como adicionar o Google Maps no site WordPress sem nenhum plug-in?

Você pode usar Google Meus Mapas e crie um novo mapa para adicionar funcionalidades básicas de mapa ao seu site WordPress sem instalar nenhum plug-in. Além disso, você pode usar o método iFrame/shortcode padrão para incorporar o código HTML do seu local preferido no Google Map na página da web. 

Por que o Google Maps não funciona no meu site WordPress?

O Google Maps pode não funcionar no seu site WordPress devido a configuração incorreta da chave de API, problemas de autenticação ou conflitos com outros plug-ins ou temas. Portanto, é recomendável verificar as configurações da chave API e usar plugins de versão atualizada e garantir a compatibilidade com outros plugins/temas.

Embrulhe isso

Para aumentar a visibilidade do seu negócio, conquistar a confiança dos visitantes, impulsionar o SEO local e direcionar mais tráfego para o seu site, adicionando Google Maps para o site WordPress é uma solução eficaz.

E agora você sabe “como adicionar o Google Maps em um site WordPress” não é ciência de foguetes. Seguindo o acima 5 etapas usando ElementsKit e Google Map API, você pode integrar facilmente um ou vários mapas de locais ao seu site. Apenas certifique-se de seguir as práticas recomendadas ao integrar o Google Maps ao seu site. 

Se você tiver alguma dúvida ou sugestão, informe-nos e teremos o maior prazer em ouvi-lo. Obrigado por ler!