Help Center

How to Choose Different Front-end and Geocoding Map Providers for Map Listings

How to Choose 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.

Before you start check tutorial requirements:

  • Elementor (Free version) or Block editor (Gutenberg)

  • JetEngine plugin installed and activated with the Map Listing created. Learn more how to do it in this tutorial

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.


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.


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 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.


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


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.


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.

Was this article helpful?

Need help?

Ask Facebook community

Get answers from 22K Crocoblock Community experts from all over the world.

Start a live chat

Ask question to support agent and share its details via chat messages.