This tutorial will show you how to create Maps Listing with JetEngine plugin easily.
Discover how to enable Maps Listing functionality from the JetEngine plugin and enrich your website with an amazing 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. So, let’s start!
Creating Map Listing
First of all, you need to enable Maps Listing functionality. To do this, go to JetEngine > JetEngine Dashboard > Modules, turn on the Maps Listing toggle, and click the “Save” button.
Maps Settings overview
After that, let’s have a look at the Maps Settings tab that will appear in the JetEngine Dashboard.
The first thing you need to here is to create a Google Maps API key. Here’s a detailed video guide about how to obtain that API key:
After you’ve created a key you’ll need to paste it into the API Key field.
- Separate Geocoding API key. If you have a separate Google Maps API key with Geocoding API enabled – turn on this toggle and insert it to the Geocoding API Key bar;
- Validate API Key. To check if your API key works, click on the “Validate Google maps API Key” button. If everything is OK, you will receive a confirmation message;
- Disable Google Maps API JS file. You need to enable this option if you already have a map created with the JetElements plugin. So, if you need to use the map from the JetEngine plugin instead of the map from the JetElements, then you need to enable this option;
- Preload coordinates by address. If you have a meta field with the addresses contained in it, you can use it. Maps Listing will load and show addresses from it;
- Avoid markers overlapping. If you have several markers on the same address you can enable this toggle and they will be placed with a little offset. This way all the markers will be visible on the map.
Map Listing widget/block overview
To create content for your map you’ll need to create a Custom Post Type (CPT) with meta fields. Find out how to create it from this tutorial.
In the CPT, you’ll need to add a meta field for addresses and then add needed addresses to every post.
Afterward, you’ll need to decide the layout of the content with the help of the Listing template. A detailed guide about Listing template creation is in this tutorial.
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
Elementor view:
Gutenberg view:
- Listing. Here you can 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 High. You can set the height of the map element on the page by moving the slider or typing the height to 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. In the Max Zoom bar 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 the third-party website (like Snazzy Map) and then paste the code into this bar;
Elementor view:
Gutenberg view:
- Zoom & Pan Control. In this drop-down menu, you can choose the way the users will be able to interact with the map. Read more details about every type in this article. The toggles below allow you to show or hide different controls, like Zoom Controls, Fullscreen Controls, Street View Controls, and Map Type Controls.
Marker settings section
In Elementor it looks like that:
And here’s the Gutenberg view:
Marker Type
You can place different types of markers on the map.
Image/Icon. This can be any image or icon that 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 any other) file. If you choose this Type, all the 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 same text you write to the Marker Label bar.
The Text Marker Type has also a Callback drop-down menu. It allows you to choose the type of data you want to display. All the features of this drop-down are described in this overview.
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 of 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 will be 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 lots of items on the map and it looks messy, you can enable this toggle, and all markers that are placed close will gather to 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:
And here’s how it looks like in Gutenberg Editor:
- 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 pin. This toggle adds a pin, to which the pop-up window will be connected;
- 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.
Post Query settings section
The settings here allow you to filter the posts of the chose 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.
Widget/Block Visibility settings section
The last settings section here is Widget Visibility where you can hide the widget if the query is empty or always show the widget. In Elementor it looks like that:
And in Gutenberg it looks like that:
Moreover, you can style the marker according to your preferences in the Style settings section.
Filter the map
A really useful 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.
Now, let’s see the map in action.
Well done! Now you know how to create a map with the JetEngine plugin!