Stand with Ukraine. Fight for freedom and democracy

Donate
Back to contents

JetEngine: Map Listing Overview

This tutorial will show you how to create Maps Listing with the JetEngine plugin easily.

Tutorial requirements:

  • JetEngine installed and activated;
  • WordPress posts or those relating to a Custom Post Type built with JetEngine plugin;
  • Map meta field added to the needed post type;
  • (optional) JetSmartFilters plugin to filter the map content.

Table of contents:

Discover how to enable Maps Listing functionality from the JetEngine plugin and enrich your website with an excellent dynamic map. You’ll be able to display dynamic content from your custom posts and meta fields using the Map Listing widget. 

Also, there’s an opportunity to change the style of the map according to your preferences with different settings and custom map styles and even filter the map’s content with the JetSmartFilters plugin. 

Creating Map Listing

First of all, you need to enable Maps Listing functionality. Go to WordPress Dashboard > JetEngine > Modules, turn on the Maps Listing toggle, and click the “Save” button.

jetengine modules settings

Maps Settings overview

After that, let’s look at the Maps Settings tab in the JetEngine settings dashboard.

Adjust available settings depending on the map provider you want to use.

jetengine maps settings

Map Listing widget/block overview

To create content for your map, you’ll need a Custom Post Type (CPT) with a meta field containing the address in it. And don’t forget to fill in the meta field in every post you need.

Afterward, you’ll need to decide the layout of the content with the help of the Listing template

After you’ve created CPT items and a Listing template, you can display the content you’ve already created via the Map Listing widget (in Elementor) or block (in Gutenberg Editor). The settings will be almost the same for different page builders.

General settings section

Take a look at the first part of the Elementor general settings of the widget.

the first part of map listing widget general settings

The same settings will be repeated in the Gutenberg editor.

the first part of map listing block general settings
  • Listing — choose the Listing template you created for the map;
  • Address Meta Field —  paste the name of the meta field where you insert the address into this bar;
  • Use Lat Lng Address Meta Field — in case you have a meta field where you put the address in the form of latitude and longitude, enable this toggle and afterward paste the name of the field into Lat Lng Address Meta Field bar;
  • Map Height — you can set the height of the map element on the page by moving the slider or typing the height into the bar;
  • Posts number — every marker on the map will be taken from one post. Here you can define how many markers to show at the same time;
  • Automatically detect map center — when this toggle is turned on, the map listing automatically defines the center regarding the placed marks and shows the map centered according to it;
  • Max Zoom — choose the default zoom of the map when it opens the first time;
  • Custom Map Style — if you want to change the general look of the map, you can choose the style on a third-party website (like Snazzy Map) and then paste the code into this bar.

There are several more toggles to activate if needed.

the second part of map listing widget general settings

These are also presented in the Block Editor.

the second part of map listing block general settings
  • Zoom & Pan Control — in this drop-down menu, you can choose how the users will be able to interact with the map. The toggles below allow you to show or hide different controls, like Zoom Controls, Fullscreen Control, Street View Controls, and Map Type Controls.

Marker settings section

In Elementor, there are the following controls to check.

map listing widget marker settings

And here’s the Gutenberg view.

map listing block marker settings

Marker Type

You can place different types of markers on the map.

Image/Icon. It can be any image or icon you uploaded to the Media Library. In the Elementor page builder, you can choose the icon from the Icon Library. In Gutenberg, you can only upload the SVG (or other) file. If you select this Type, all markers will look the same.

Text. This option allows you to add a label to the address. In the Marker Label drop-down menu, you can choose where to take the text from:

  • Post Title – the title of the CPT item;
  • Meta Field – in this case, you can choose the meta field from the Meta Field, select or type its name to the Or enter meta field key bar;
  • Static Text – all the addresses will be marked with the exact text you write to the Marker Label bar.

The Text Marker Type also has a Callback drop-down menu. It allows you to choose the type of data you want to display. 

Dynamic Image. Unlike Image Type, this one allows you to set the picture that will change according to the CPT item. Choose the meta field where you store the images in the Meta Field drop-down menu or type its name into the Or enter meta field key bar.

Use different markers by conditions

You can set different markers for the items. If you enable this toggle, the settings you have chosen in previous fields will be used as a default marker. Besides that, you can add some conditions, and when they are met, the marker changes. Click on the “Add Item” button and choose how and on which conditions the marker will change.

Marker Clustering

If there are many items on the map and it looks messy, you can enable this toggle, and all markers placed close will gather in convenient clusters.

Popup settings section

The markers are shown in the popups. Here you can define some of the pop-up’s settings. In Elementor it looks like that:

map listing widget pop-up settings

And here’s what it looks like in Gutenberg Editor:

map listing block pop-up settings
  • Marker Popup Width — with the help of this slider, you can define the width of the pop-up window;
  • Vertical Offset — here, you can set, in pixels, how far from the marker the pop-up emerges;
  • Add popup preloader — enable this toggle if you want to add the loading animation to the pop-up window. It will be shown while the pop-up loads;
  • Add popup pin — this toggle adds a pin to which the pop-up window will be connected.

Custom Query settings section

In Elementor, there is one toggle that can be enabled.

map listing widget custom query settings

The same toggle is displayed in Gutenberg.

map listing block custom query settings
  • Use Custom Query — once enabled, you can select a custom query built beforehand in the Query Builder.

Post Query settings section

The settings here allow you to filter the posts of the chosen CPT to show not all of them but only some of them that meet the conditions. For more details, check out this Post Query overview.

map listing widget posts query settings

The same settings can be customized in the Block Editor.

map listing block posts query settings

Terms Query settings section

The following Terms Query section is accessible only in Elementor. Use it if you want to display content depending on WordPress taxonomies.

map listing widget terms query settings

Users Query settings section

Get the content concerning WordPress users with the help of the next Users Query section. This section is also unavailable in the Block Editor.

map listing widget users query settings

Widget/Block Visibility settings section

The last settings section in Elementor is Widget Visibility, where you can hide the widget if the query is empty or always show the widget.

map listing widget visibility settings

In Gutenberg, the Block Visibility is presented accordingly.

map listing block visibility settings

Advanced settings section

Moreover, you can style the marker according to your preferences in the Style settings section once Elementor is used. Or, if you work in the Block Editor, check the Advanced section.

Here you can paste the CSS class to style the Map Listing block. Or, install and activate the free JetStyleManager plugin to access additional style settings.

Press the brush-shaped button to open the block style settings.

Once ready, press the “Publish/Update” button.

map listing block advanced settings

Filter the Map

The handy thing is that you can filter the map with filters from the JetSmartFilters plugin. Create needed filters and then apply them to the JetEngine Maps. For instance, we use the Checkboxes filter.

checkboxes filter for jetengine maps in elementor

You can also find the needed filter type in the Block Editor. Just define the “Map Listing” as a provider in the This filter for field.

Hit the “Publish/Update” button to save the map listing page.

checkboxes filter for map listing in gutenberg

Now, let’s see the map with the filter in action.

filtered maps on the front end

Now you know how to use the Map Listing block/widget from the JetEngine plugin and apply any filter to it with JetSmartFilters.