Criando listagens de mapas com Bricks

Para ativar o módulo Maps Listings , vá para o JetEngine Dashboard , ative o botão Maps Listings na seção Default Modules e pressione o botão “Save” .

Depois disso, vá para a guia Configurações de mapas no painel de configurações do JetEngine .

Ajuste as configurações disponíveis dependendo do provedor de mapas que você deseja usar.

Como diziam os requisitos, você precisava criar um CPT dedicado contendo o metacampo Mapa . Além disso, você pode criar uma taxonomia personalizada ou adicionar uma Meta Box às postagens, termos ou usuários do WordPress com o metacampo Mapa .

Prossiga para JetEngine > Post Types , clique para editar o tipo de postagem, role para baixo até a guia Meta Fields e adicione o Map meta field .

Você pode definir um dos três formatos de valor que serão armazenados no banco de dados:

• String com localização Lat e Lng separadas por vírgula;
• Matriz com localização Lat e Lng;
• Endereço de localização.

Além disso, existe uma opção para definir a altura do mapa necessária . A altura padrão do mapa é 300px.

Ao terminar de editar o CPT, clique no botão “Atualizar tipo de postagem” .

Vá para a aba CPT no Painel do WordPress, crie vários posts e certifique-se de preencher os metacampos do Mapa .

Vá para JetEngine> Listagens e clique no botão “Adicionar novo” . Escolha a fonte da listagem “Postagens” , o tipo de postagem para o mapa no campo Do tipo de postagem (“Anúncios” no meu caso), insira o nome do item da listagem e selecione a visualização da listagem “Tijolos” . Pressione o botão “Criar item de listagem” .

Clique no botão “+” na tela para adicionar uma nova seção. Arraste e solte os elementos dinâmicos, como Dynamic Field , Dynamic Image e Dynamic Link para organizar o conteúdo futuro do mapa. Você pode encontrar mais sobre a criação de itens de listagem com Bricks no tutorial Como criar itens de listagem com Bricks .

Usei a Imagem Dinâmica para mostrar a miniatura da postagem, o Link Dinâmico com a Fonte “Permalink” para que os usuários possam prosseguir para a página do carro e dois elementos de Campo Dinâmico : o primeiro para exibir o título da postagem e o segundo para exibir o preço de o metacampo personalizado.

Além disso, habilitei a saída Customize field no segundo Dynamic Field . Com esta opção, você pode adicionar o texto antes e depois do valor extraído do metacampo; %s representa o valor extraído; basta adicionar algum conteúdo antes e depois para adicionar algum texto antes e depois do valor.

Depois de terminar de personalizar, clique no botão “Salvar” .

Vá para a guia Páginas no painel do WordPress e clique em “Editar com Bricks” na página que você criou anteriormente para colocar o mapa dinâmico aqui.

Adicione uma nova seção e arraste e solte o elemento Map Listing .

Agora, vamos passar pelas configurações da Listagem de Mapas .

Configurações Gerais

• Listagem — escolha o modelo de Listagem que você criou para o mapa;
• Endereço Metacampo – cole o nome do metacampo onde você insere o endereço nesta barra;
• Use Lat Lng Address Meta Field – caso você tenha um meta campo onde você coloca o endereço na forma de latitude e longitude, ative esta alternância e depois cole o nome do campo na barra Lat Lng Address Meta Field ;
• Altura do mapa — você pode definir a altura do elemento do mapa na página movendo o controle deslizante ou digitando a altura na barra;
• Número de postagens — cada marcador no mapa será retirado de uma postagem. Aqui você pode definir quantos marcadores serão exibidos ao mesmo tempo;
• Detectar automaticamente o centro do mapa — quando esta alternância está ativada, a listagem do mapa define automaticamente o centro em relação às marcas colocadas e mostra o mapa centralizado de acordo com ele;
• Max Zoom — escolha o zoom padrão do mapa quando ele abrir pela primeira vez;
• Zoom da roda do mouse – quando esta opção está ativada, você pode aumentar ou diminuir o mapa girando a roda do mouse.

Configurações do marcador

Você pode colocar esses tipos de marcadores no mapa:

• Imagem . Pode ser qualquer imagem que você enviar para a Biblioteca de Mídia;
• Ícone. Você pode escolher o ícone na biblioteca de ícones;
• Texto . Esta opção permite adicionar uma etiqueta ao endereço. No menu suspenso Etiqueta do marcador , você pode escolher de onde retirar o texto:
• Título da postagem – o título do item CPT;
• Meta Campo – neste caso, você pode escolher o meta campo no Meta Campo , selecionar ou digitar seu nome na barra de teclas Ou inserir meta campo ;
• Texto Estático – todos os endereços serão marcados com o texto exato que você escreve na barra Etiqueta do Marcador .

O tipo de marcador “Texto” também possui o menu suspenso Retorno de chamada . Ele permite que você escolha o tipo de dados que deseja exibir.

• Imagem Dinâmica . Ao contrário do Marcador do tipo “Imagem” , este permite definir a imagem que mudará de acordo com o item CPT. Escolha o metacampo onde você armazena as imagens no menu suspenso Metacampo ou digite seu nome na barra de teclas Ou digite o metacampo .

Você pode definir marcadores diferentes para os itens. Se você ativar a opção Usar marcadores diferentes por condições , as configurações escolhidas nos campos anteriores serão usadas como marcador padrão. Além disso, você pode adicionar algumas condições e, quando elas forem atendidas, o marcador muda. Clique no botão “ Adicionar Item ” e escolha como e em quais condições o marcador será alterado.

Se houver muitos itens no mapa e ele parecer confuso, você pode ativar a alternância de agrupamento de marcadores e todos os marcadores colocados próximos serão reunidos em agrupamentos convenientes.

Configurações de pop-up

Os marcadores são mostrados nos pop-ups. Aqui você pode definir algumas das configurações de pop-up:

• Largura do pop-up do marcador — com a ajuda deste controle deslizante, você pode definir a largura da janela pop-up;
• Deslocamento vertical — aqui você pode definir, em pixels, a que distância do marcador o pop-up emerge;
• Adicionar pré-carregador de pop-up – ative esta opção se desejar adicionar a animação de carregamento à janela pop-up. Ele será mostrado enquanto o pop-up é carregado.

Consulta personalizada

Uma vez ativado, você pode selecionar uma consulta personalizada criada previamente no Query Builder .

Visibilidade do widget

Com a seção de configurações de Visibilidade do Widget é possível fazer com que o elemento seja sempre mostrado ou ocultá-lo quando a consulta estiver vazia.

Depois de terminar de personalizar a página com Map Listing , clique no botão “Salvar” .

Prossiga para a página com a listagem de mapas no front end. Ao clicar nos ícones, você pode ver os pop-ups com postagens colocadas de acordo com os endereços no metacampo Mapa .