Gostaria de saber como criar um mapa com vários pinos usando o Jet Elements?
Elementos do Jato oferece um widget chamado Mapa Avançado. Ao contrário do widget Google Mapas nativosElementor que suporta apenas um local, o Jet Elements Advanced Map Widget permite que você crie um mapa com vários pinos.
Para usar este widget, você deve primeiro integrar o Jet Elements com Google Mapas usando uma chave de API.
O widget de mapa avançado do Jet Elements é bastante útil se você tiver uma empresa com várias filiais na cidade e quiser criar um mapa que mostre a localização de suas filiais. Este widget também é útil para criar algo como um mapa das atrações turísticas de uma cidade.
Veja como usar este widget.
Etapa 1: integrar o JetElements ao Google Maps
Conforme mencionado, você precisa de uma chave API Google Maps para integrar Jet Elements com Google Maps. Você pode obter uma chave de API por meio do console de APIs do Google.
Então visite Console de APIs do Google e faça login com sua conta do Google. Se você ainda não tem um projeto, crie um novo clicando no menu suspenso na parte superior e clique em NOVO PROJETO no pop-up que aparece.
Dê um nome ao seu projeto e clique no botão CRIAR .
Depois que seu novo projeto for criado, selecione-o no menu suspenso na parte superior do painel do Google API Console e clique em biblioteca no painel esquerdo.
O Google divide a API do Google Maps em 17 tipos. Você deve ativar as APIs exigidas pelo widget de mapa avançado Jet Elements para usar este widget. A Crocoblock, desenvolvedora do Jet Elements, não fornece nenhuma informação detalhada sobre as APIs necessárias. Com base em nossa experiência, habilitamos as seguintes APIs:
- API de rotas
- API de geocodificação
- API JavaScript do Google Maps
- API do Google Places
Você pode clicar no link MOSTRE TUDO na seção Cartes para ver todos eles.
Para ativar uma API, selecione a API em questão (clicando nela) e clique no botão ATIVAR.
Depois de concluir a ativação das APIs necessárias, retorne ao painel principal do Google API Console e clique em identificadores no painel esquerdo. Clique no botão Crie credenciais e selecione Chave de API. Copie a chave API no pop-up que aparece.
Em seguida, faça login no seu painel do WordPress e vá para JetPlugins – > Configurações do JetElements.
Clique na aba integrações e cole sua chave de API no campo Chave da API do Google Maps na seção Google Maps. Ative a opção Chave de API de geocodificação separada e cole o mesmo código em Chave de API de geocodificação.
Etapa 2: criar o mapa
Depois que o Jet Elements e o Google Maps estiverem integrados com sucesso, você poderá começar a criar o mapa. Para fazer isso, crie uma nova página (Páginas – > Adicionar) ou um novo artigo (Itens – > Adicionar) e modifique-o com Elementor.
No editor Elementor, defina o layout antes de começar. Para fazer isso, abra o painel Configurações da página clicando no ícone de engrenagem no canto inferior esquerdo. Selecione um layout no menu suspenso na opção Configurações gerais.
Adicione uma nova seção clicando no ícone de adição na caixa de edição Elementor e arraste o widget Mapa Avançado para a tela.
Defina o centro do mapa para sua cidade (ou qualquer região, dependendo do mapa que você deseja criar). Defina também o zoom inicial.
aberto Google Maps e encontre o primeiro local que deseja adicionar ao mapa e copie seu endereço.
Retorne ao editor Elementor e abra a seção Pinos. Clique no local existente e substitua o endereço pelo endereço que você acabou de copiar. Adicione também a descrição do local no campo Descrição do pino.
Clique no botão ADICIONE UM ELEMENTO localizado um pouco mais abaixo para adicionar outro endereço.
Para alterar o estilo do seu mapa, bem como a altura, você pode abrir a seção Estilo de Mapa.
NOTA: Se o mapa não for carregado após arrastar o widget Mapa Avançado no editor Elementor e você vir uma mensagem “Apenas para fins de desenvolvimento”, certifique-se de ativar seu faturamento do Google Na nuvem. A nova política do Google exige que os desenvolvedores habilitem a conta de faturamento.
Obtenha o Elementor Pro agora !!!
Conclusão
Então ! É isso para este artigo que mostra como criar um mapa com vários pinos usando Jet Elements. Se você tiver alguma dúvida sobre como chegar lá, informe-os no Comentários.
No entanto, você também pode consultar nossos recursos, se você precisar de mais elementos para realizar seus projetos de criação de sites da Internet, consultando nosso guia no site Criação de blog WordPress ou aquele em Divi: o melhor tema WordPress de todos os tempos.
Mas enquanto isso, compartilhe este artigo em suas diferentes redes sociais.
...
