JetEngine: Map Listing overview

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!

Maps Settings

1 Step — Enable Maps Listing functionality

First of all, you need to enable Maps Listing functionality. To do this you’ll need to go to JetEngine > JetEngine > Modules choose Maps Listing and save the changes.

2 Step — Maps Settings overview

After that, let’s have a look at the Maps Settings. Navigate to the JetEngine > JetEngine > Maps Settings.

The first thing you need to here is to create a Google Maps API key. You can create it by clicking on “here” and following the instruction. After you’ve created a key you’ll need to paste it to the API Key field.
The next option is the ability to 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.
Also, you can Preload coordinates by address. Enable this option and set meta field to preload coordinates for. This is required to avoid optimize Google Maps API requests.

NOTE! Only JetEngine meta fields could be preloaded.

The last option here is an opportunity to Preload Meta Fields. Here you can add comma separated meta fields list which contains addresses to preload.

3 Step — Create custom posts and listings

To create content for your map you’ll need to create custom posts with meta fields. Find out how to create it from this tutorial.
In the custom post, you’ll need to add a meta field for addresses and then add needed addresses to your posts.
Afterward, you’ll need to display the content form the posts with the help of the listing. Learn how to create a listing from the next tutorial.

4 Step — Map Listing widget overview

After you’ve created posts and a listing you can add a Map Listing widget to the needed page and display there the content you’ve already created.
Then, you need to choose the listing from the source.

NOTE! You can choose any listing you’ve created before, but only the post type with the meta field that has an address will be displayed.

In the Address Meta Field paste the ID from your address meta field.

Also, there’s an opportunity to change Map High option, the number of posts and set your own Map Center or simply automatically detect Map Center option.
A really great option here is that you can add Custom Map Style and choose the needed styles from the Snazzy Map and then paste the code into the Custom Map Style field.

Now, let’s proceed to the Marker settings. Here you can choose one of three Marker Types. The first one is Text. If you’ll select Text and Post Title Marker Label, then you’ll see titles from your posts.

You can choose Marker Label from the Meta Field and then you’ll see addresses you’ve added to your posts.

What is more, you can simply add any Static text.

Also, you can choose an Image as a marker.

And the last marker is an Icon. You can choose your own in SVG format or select the icon from the Icon Library.

The next settings section is Popup. Here you can set the Marker Popup Width, Vertical Offset and Add popup pin.

The next section is Posts Query. These settings are the same as in the Listing Grid widget.

The last settings section here is Widget Visibility where you can hide widget is the query is empty or always show the widget.

Moreover, you can style the marker according to your preferences in the Style settings section.

5 Step — 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!