Back to contents

JetEngine: Choosing Different Front-end and Geocoding Map Providers for Map Listings

Find out how to select different map providers like Google, Leafet, or Mapbox in the JetEngine settings to display any map you would like.

Tutorial requirements:

  • JetEngine installed and activated;
  • Page built with Elementor Page Builder free version or Block Editor to place the Map Listing widget/block;
  • Default WordPress Posts or those relating to a Custom Post Type with the Map meta field added and completed in the posts.

Table of contents:

The provider selection is available only if Maps Listing functionality is activated in WordPress Dashboard > JetEngine > Modules.

jetengine modules settings

Once the Maps Listings are activated, you can find all the needed settings in the WordPress Dashboard > JetEngine > Maps Settings directory.

Google Maps

Initially, let’s check the settings available once you select Google Maps as a Map Provider. It is the primary map provider located in the mentioned drop-down list.

google maps map provider settings
  • API Key — paste the Google Maps API key. Make sure that Geocoding API is activated for the pasted API key or provide it separately in the Geocoding API Key field;
  • Disable Google Maps API JS file — activate this toggle if you are using a plugin or theme that already includes Google Maps JS file. Otherwise, if you have two Google Maps Libraries on the page, it will cause an error; 
  • Geocoding Provider — choose one of the suggested geocoding source code providers to get the coordinates by address string for all map listings.

Let’s check the settings available for each option in the Geocoding Provider fields.

Google

The primary option for selection is “Google.” Check the settings available for its customization.

google geocoding provider
  • Separate Geocoding API key — activate this toggle if you have a different Google Maps API key with the Geocoding API enabled. Insert it into the special field. Ensure that you have set API restrictions settings to “None” or “IP addresses” in the Google Cloud Platform settings, Credentials tab. To change the statuses, open the needed API key settings and select the “Don’t restrict key” option in the API Restrictions section, or uncheck the “Geocoding API” option if the “Restrict API” is selected;
  • Validate API key — test if the Geocoding API is appropriately configured by pressing the “Validate Google maps API Key” button. If everything is OK, you will receive a confirmation message;
  • Preload coordinates by address — preload some coordinates for the specified meta fields to optimize the website work. All the coordinates will be identified when the post is being saved. Note that only JetEngine meta fields will be displayed correctly; paste their meta field keys in the appeared Meta fields to preload field; 
  • Avoid markers overlapping — toggle to add a minor offset between overlapping markers with the repeatable address.

OpenStreetMap/Photon

Please note that the OpenStreetMap provider can process only one request per second due to the low capacity. So, if you are not satisfied with these conditions, select another provider.

As you can observe, the following settings are the same as mentioned before. Activate the suggested toggles if required.

openstreetmap geocoding provider

The settings shown in case the Photon is selected as Geocoding Provider are pretty much the same as for the OpenStreetMap provider.

photon geocoding provider

Bing

Bing provider settings slightly differ from the OpenStreetMap and Photon ones presented above.

Except for the mentioned Preload coordinates by address and Avoid markers overlapping toggles, there is a Bing API Key field. Complete it with the API key received on the Microsoft website.

NOTE
The Bing provider supports only the English version of maps. In case you want maps supporting any languages, select another provider. Those will display content depending on the language user has set as site language in the WordPress settings.
bing geocoding provider

Leaflet Maps

The Leaflet Maps Map Provider adjustments are similar to those shown for Google Maps.

Select the desired Geocoding Provider and adjust the other fields. If any hesitations appear, check the previous section of the article where all the providers are described.

leaflet maps map provider settings

Mapbox

If you prefer using the Mapbox provider, you can see the Access token field except the already discovered settings. It should be created on the Mapbox website.

mapbox map provider settings

All the settings are saved automatically. So, once you have finished and built a map listing, you can head to the page built with Gutenberg or Elementor.

Placing Map Listing onto a Gutenberg-Built Page

Head to WordPress Dashboard > Pages and open the needed page. Place the Map Listing block on the page.

NOTE
The map will display the needed information on the front end. The preview is unavailable in the Block Editor.

Also, mind that the Google Maps provider is shown as an example. Although, the settings for the block will stay the same for other selected providers.

map listing settings in gutenberg
  • Listing — choose the map listing you have created;
  • Address Meta Field — paste the meta field key(s) you used to store the addresses in your CPT;
  • Use Lat Lng Address Meta Field — activate if you store latitude and longitude data in the mentioned address meta field;
  • Map Height — set the height of the displayed map;
  • Posts number — define the number of posts located on the map;
  • Automatically detect map center — leave activated to set the map center by default or disable it to provide the block with the preferred map center;
  • Max Zoom — define the default map zoom once it is opened;
  • Custom Map Style — check the available map styles and paste the liked value into this field or leave it empty to get a default style.

Style settings for the Map Listing block in Gutenberg are available if you have JetStyleManager installed and activated.

Don’t forget to press the “Publish/Update” button to post the page.

Adjusting Map Listing on an Elementor-Built Page

Open the needed page by heading to WordPress Dashboard > Pages and find the Map Listing widget.

All the settings here repeat those presented in Gutenberg, so work on the other adjustments and press the “Publish/Update” button to save the result.

map listing settings in elementor

Check the Result

Inspect the result once the Google Maps provider is set.

google map on the front end

Another option to look at is a map made with Leaflet Maps.

leaflet map on the front end

Or, if the Mapbox provider is your case, the map will look similar to the following picture.

mapbox map on the front end

Don’t hesitate to adjust any provider for the maps you are using on the WordPress website with the help of the JetEngine plugin.