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.

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

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

The settings shown in case the Photon is selected as Geocoding Provider are pretty much the same as for the OpenStreetMap 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.

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.

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.

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.

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

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.

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

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.

Inspect the result once the Google Maps provider is set.

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

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