What is needed for the tutorial?
- JetEngine at least 3.0 version;
- Elementor or WordPress block editor;
- Map Listing (optional).
In the map settings, it became possible to choose a provider using which you can render the map on the frontend and separately the provider responsible for geocoding (obtaining coordinates via the address).
Front-end and geocoding providers are separated due to different providers’ functionality.
This overview describes the WordPress JetEngine settings for the Google, OpenStreetMap, Photon, and Bing map providers and how to set a complex map for a website.
Step 1: Turn on Maps Listing Module
Proceed to WordPress Dashboard > JetEngine > JetEngine Dashboard > Modules, turn on the Maps Listing toggle, and click the “Save” button.
Step 2: Choose Maps Settings
Proceed to the Maps Settings tab. Select any Map Provider, and you can pick such Geocoding Providers:
- Google;
- OpenStreetMap;
- Photon;
- Bing.
For the Google as the Geocoding Provider, such settings are available:
- Geocoding API key. Paste the Google Maps API Key in this field. Ensure that you set API restrictions settings to “None” or “IP addresses” in the Google Cloud Platform, 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. Push the “Validate Google maps API Key” to check if the Geocoding API is configured right;
- Preload coordinates by address. Enable this toggle and select the needed meta field for the address (text or map meta field type, for example) for the Google Maps API optimization. Maps Listing will load and show the coordinates from the pointed meta fields. Be aware that only JetEngine meta fields can be preloaded appropriately. You can combine several fields names with the “+” symbol (e.g., _city+_country);
- Avoid markers overlapping. Enable to add a little offset between overlapping markers with similar addresses.
OpenStreetMap
Take into account that due to the low capacity, the OpenStreetMap provider can process only one request per second. So, avoid heavy use or select another provider.
This provider doesn’t require the API key and the settings of the following toggles are the same as described before.
Photon
The Photon provider has pretty familiar settings to OpenStreet Map: it doesn’t require an API key and has the same toggles.
Bing
In the Bing Geocoding Provider settings, apart from the toggles, there is the field for the Bing API Key that should be filled.
Be aware that the Bing provider supports only the English version of maps. Those will display content depending on the language user has set as site language in the WordPress settings. In case you want maps supporting any languages, select another provider.
Step 3: Place Map Listing onto a Gutenberg-Built or Elementor-Built Page
Open any post or page and click to edit it in the Gutenberg block or Elementor editor. Place the Map Listing block or widget there.
Note that the map preview is not available in the Gutenberg block editor.
All Map Listing settings will be visible on the front end.
In the Elementor editor, you can preview all changes.
Mind that we use the Leaflet and OpenStreetMap providers just as an example.
The main things that you need to do are to select the Listing in the drop-down menu and enter the name of the Adress Meta Field. About other settings, you can read in the JetEngine Map Listing Overview.
After you finish customizing, don’t forget to press the “Publish/Update” button.
Step 4: Check the Results on the Front End
Proceed to the front and check the map listing functionality. Be aware that the front-end Map Provider manages the map appearance, and the Geocoding Provider obtains coordinates via the address.
That’s all. Now you’re totally aware of the Google, OpenStreetMap, Photon, and Bing geocoding map providers’ settings for the JetEngine WordPress plugin.
