Como fazer um mapa do Google com vários pinos no WordPress

Adicionar um mapa ao seu site pode ajudar seus visitantes a encontrar seus locais de negócios ou eventos facilmente. Se sua empresa tiver mais de um local, convém mostrar todos eles no mesmo mapa. É aqui que o uso de vários pinos em um mapa do Google pode se tornar útil.

Se o seu site for construído com o Elementor, você não precisará fazer muito aborrecimento ao adicionar vários pinos no seu mapa do Google. Em vez disso, você pode adicionar facilmente quantos quiser. O processo é bastante simples, mesmo para iniciantes.

Nesta postagem, abordaremos um tutorial detalhado sobre como fazer um mapa do Google com vários pinos no WordPress com Elementor. Mas antes disso, abordaremos algumas palavras sobre o porquê e quando você deve usar o Google Maps com vários pinos em seus sites do WordPress.

Por que usar o Google Maps com vários pinos no seu site WordPress

O uso do Google Maps com vários pinos pode melhorar seu site de várias maneiras. Não se trata apenas de mostrar locais. Ele pode ajudar os usuários a criar confiança e tornar seu site mais útil, porque eles podem encontrar facilmente suas lojas. Aqui estão algumas das principais razões pelas quais você deve considerá -lo.

1. Mostre todos os seus locais em um só lugar

Se sua empresa tiver várias agências, lojas ou escritórios, vários pinos podem ajudá -lo a exibi -las em um único mapa. Isso facilita para os visitantes ver todos os locais de relance sem alternar entre mapas ou páginas diferentes.

2. Ajude os usuários a encontrar o local mais próximo

Quando os usuários veem todos os locais em um mapa, eles podem encontrar rapidamente o mais próximo deles. Isso pode melhorar sua experiência e ajudá -los a agir mais rapidamente, como visitar sua loja ou marcar uma consulta.

3. Economize tempo para os visitantes

Em vez de listar cada endereço um por um em texto simples, você pode mostrá -los visualmente com pinos. Isso economiza tempo para você e seus visitantes. Isso também faz com que seu site pareça mais profissional e moderno.

4. Aumente o SEO local com dados de localização

O Google Maps pode ajudar com o SEO local do seu site. Quando você adiciona endereços reais ao seu mapa, ele informa aos mecanismos de pesquisa sobre seus locais de negócios. Isso pode ajudar seu site a aparecer nos resultados de pesquisa local. Explore como melhorar o SEO local com happyaddons.

5. Torne seu site mais interativo

Um mapa com vários pinos parece mais interativo e dinâmico do que apenas texto simples. Os visitantes podem aumentar o zoom, clicar em pinos e explorar o mapa. Isso torna seu site mais envolvente e fácil de usar.

6. Perfeito para empresas baseadas em serviços ou multi-ramos

Se você executar uma cadeia de restaurantes, clínicas, lojas ou pontos de entrega, vários pinos ajudarão a explicar seu alcance claramente. Como já foi dito acima, isso cria confiança e ajuda os usuários a escolher o local mais próximo.

Pré -requisitos para fazer um mapa do Google com vários pinos com elementar

Vamos deixar uma coisa clara no começo. O Elementor possui um widget embutido chamado Google Map . Mas seus recursos são muito limitados. Você não pode adicionar vários pinos ao mapa usando esse widget padrão. Então, para fazer isso, você precisará de um complemento adicional.

Uma ótima opção é o HappyAddons . Ele oferece um widget chamado Advanced Google Maps , que permite criar e adicionar facilmente vários pinos ao seu mapa sem nenhum aborrecimento.

Portanto, no total, você precisa das seguintes ferramentas no seu site para este tutorial.

• Elementor
• Happyaddons
• Happyaddons pro

O Happyaddons Pro é necessário porque o mapa avançado do Google é um widget premium do plug -in. Depois de instalados e ativados no seu site, comece a seguir o tutorial, conforme mencionado abaixo. Explore todos os outros widgets de Happyaddons.

Como fazer um mapa do Google com vários pinos no WordPress: tutorial passo a passo

Nesta seção, explicaremos passo a passo como criar um mapa do Google com vários pinos no WordPress com os plugins Elementor e HappyAddons. Decoramos esta seção com as capturas de tela necessárias também, para que você possa entender o processo completo. Continue lendo!

Etapa 01: Abra uma página e encontre o widget avançado do mapa do Google

Abra a postagem ou a página em que deseja criar o mapa do Google com vários pinos. Encontre o widget avançado do Google Map no painel Elementor. Arraste e solte -o na tela elementar.

Etapa 02: Obtenha a chave da API do Google

Depois que o widget é adicionado à tela, você será solicitado a configurar credenciais para exibir o mapa do Google. Para começar, clique na opção Credenciais na seção Configurações gerais no painel.

Você será levado para a seção de credenciais do Happyaddons no back -end do site. Encontre a opção Mapa do Google . Em seguida, pressione a opção Get API Key .

Você virá para a página do Google Cloud.

Agora, você tem que encontrar 'mapas javascript API'. Para isso, o tipo mapeia a API JavaScript na caixa de pesquisa. Depois que a opção aparecer, clique nela .

Depois de chegar à página API JavaScript Maps, ative a opção .

Pressione o botão Concordar e continuar . Antes disso, você pode selecionar seu país. Nós embalamos isso no nosso caso.

A chave da API do Google não é tecnicamente gratuita. Você precisa concluir suas informações de cobrança para obter a API.

Nota (Como é gratuito): embora não seja tecnicamente gratuito, você receberá tokens equivalente a US $ 200 por mês e sem custo . Com esse token, seu mapa do Google pode ser carregado ou visualizado até 28.000 vezes . Somente se esse limite de visualização/carga for cruzado, seu cartão será carregado.

Depois disso, você receberá um pop -up. Você precisa fornecer algumas informações sobre sua empresa onde este mapa será usado. Depois de concluído, clique no botão Enviar no canto inferior direito do pop-up.

A tecla API do Google Map aparecerá instantaneamente na tela com um novo pop -up. Copie a tecla API .

Volte à opção HappyAddons Google API Key e cole seu código lá. Aperte o botão Salvar alterações no final.

Agora, venha à sua tela elementar e atualize/recrie -o. O mapa do Google aparecerá na tela.

Verifique como criar uma linha do tempo no WordPress com Elementor.

Etapa 03: Adicione vários pinos ao mapa

Por padrão, apenas um pino é exibido no mapa. Para adicionar e exibir mais pinos ao mapa, expanda a seção Marcador de mapas no painel.

Depois que a seção do marcador do mapa for expandida, você pode adicionar quantos pinos quiser clicando no botão + Adicionar item .

Agora, colocando valores para latitude e longitude, você pode definir com precisão os pinos com precisão para cada local.

Etapa 04: Definir configurações do mapa

Da mesma maneira, expanda a seção Configurações do mapa .

Você encontrará muitas opções nesta seção.

Agora, você gentilmente explora cada opção ativando e desativando como eles funcionam para que você possa finalmente ficar com os que se adequam às necessidades de design.

Aprenda a criar uma galeria de imagens de rolagem automática no WordPress.

Etapa 05: estilizar o widget avançado do mapa do Google

Quando todas as configurações e peças de conteúdo forem concluídas, venha para a guia Style . A partir daqui, você pode personalizar a altura, largura, tipo de borda, raio de borda e mais opções.

Da mesma forma, expanda outras opções e faça as personalizações necessárias, pois você deseja alterar a aparência dos pinos.

Etapa 06: Visualize o design

Quando o design for feito, antes de publicá -lo on -line, visualize -o para ver se é necessária alguma correção ou modificação. Você pode ver que o widget está funcionando bem na nossa extremidade no videoclipe anexado abaixo.

Assim, você pode fazer um mapa do Google com vários pinos no WordPress com Elementor.

Dicas avançadas para mapa do Google com vários pinos

Depois de adicionar vários pinos ao seu mapa do Google, há mais coisas que você pode fazer para fazer com que o mapa funcione melhor para seus visitantes e seu site. Essas dicas avançadas ajudarão você a tornar seu mapa mais profissional, melhorar a experiência do usuário e até apoiar seus esforços locais de SEO.

1. Use imagens personalizadas em vez de ícones

Em vez do pino vermelho padrão, tente usar ícones ou imagens personalizados para cada local. HappyAddons permite que você faça isso na seção de conteúdo da guia> Marcador de mapas. Imagens e ícones personalizados podem tornar seu mapa mais visualmente claro e atraente.

2. Configurações de zoom e centro

Ajuste o nível de zoom e o centro do seu mapa para mostrar todos os pinos corretamente. Se alguns pinos estiverem distantes, verifique se o nível de zoom é largo o suficiente para que todos fiquem visíveis quando o mapa carregar. Isso oferece aos usuários uma visão geral completa sem precisar mover o mapa manualmente.

3. Faça isso para dispositivos móveis

Sempre verifique como o seu mapa fica em dispositivos móveis. Verifique se ele é carregado rápido, os pinos são clicáveis e as caixas de informação são legíveis em telas pequenas. Um mapa que funciona bem no desktop e no celular manterá mais usuários felizes.

4. Mapas de incorporação nas páginas de contato ou localização

Não deixe seu mapa em uma página. Você pode reutilizar o mesmo mapa incorporando -o em outras páginas como 'Entre em contato conosco', 'nossos locais' ou 'visite -nos'. Isso ajuda os usuários a encontrar o lugar certo onde quer que estejam no seu site.

Aprenda a criar uma página da Web dinâmica no WordPress com elementor.

Conclusão

Fazer um mapa do Google com vários pinos pode ser uma etapa ou parte simples em seu design da web, mas pode ter uma impressão duradoura. Não apenas pode ajudar os visitantes a encontrar seus locais, mas também aumentar a pontuação local de SEO e fazer com que seu site pareça mais profissional.

Com a ajuda dos plugins Elementor e Happyaddons, você pode adicioná -los facilmente ao seu site sem muito aborrecimento. É tão simples que mesmo os iniciantes podem fazer isso apenas seguindo o tutorial coberto acima. Se você ainda tiver alguma dúvida sem resposta, informe -nos através da caixa de comentários abaixo.

Entraremos em contato com você em breve com respostas viáveis. Obrigado por estar conosco até o fim. Deixe -nos saber qual tópico você deseja que abordemos no próximo post.