Would you like to create a map with multiple locations in WordPress with Elementor and Essential Addons?
Suppose you have a business that already has several branches in the city, and you want to create a digital map that shows the location of those branches. If you have a WordPress-based website, you can create such a map effortlessly. There's a great plugin you can use to create a multi-location map: Essential Addons.
Essential Addons is an add-on Elementor premium so you also need to install Elementor before you can use it. You can use the free version of Elementor to create a card with the Essential Addons module.
La free version of Essential Addons is also available. However, the widget to create a map is only available on the paid version. You can download the paid version of Essential Addons on its official website.
We will use the Google Maps platform to create a map on your WordPress using Essential Addons. Before you start, make sure to install Elementor and Essential Addons.
Integrate Google Maps with the Essential Addons module
Before you can add a Google Maps map with Essential Addons, you must first integrate them. You need an API key to integrate Google Maps with Essential Addons modules.
First, visit the Google API Console and sign in with your Google account. Create a new project by clicking on the drop-down menu at the top and click on NEW PROJECT.
Give your new project a name and click the button CREATE .
Once your new project has been created, select it from the drop-down menu and click on Library on the left panel.
Google divides the Google Maps Platform API into 17 types. You can see them by clicking on the link DISPLAY ALL in the section Cards. You need to enable APIs depending on what you want to accomplish.
Discover also: How to Create a Custom Single Product Template in WooCommerce with Elementor
In our case, you need to enable the following APIs to add a map from Google Maps using Essential Addons.
- API Directions
- Geocoding API
- Maps JavaScript API
- Places API
To activate an API, select an API you want to activate (by clicking on it) and click on the button ACTIVATE.
Once you have completed enabling the required APIs, return to the main dashboard of the Google API Console and click Identifiers on the left panel. Click on the button Create credentials and select API key. Copy the API key on the popup that appears.
Login to your WordPress dashboard and click Essential Addons on the left panel. Click on the tab Elements and scroll down in the section Advanced Google Maps. Click on Settings and paste the API key you just copied.
Click on the button SAVE SETTINGS to apply the new change.
Start creating the map
Once Google Maps and the Essential Addons are integrated, you can start creating the map. To do this, create a new page (Pages – > Add ) or a new item (Items – > Add) and edit it with Elementor.
Before creating the page, set the layout by clicking the gear icon in the lower left corner to open the Settings panel. Set the layout from the drop-down menu.
Create a new section by clicking the plus button in the edit box. To have a wider area for the map, you can select the single column structure. Drag the widget EA Google Maps from the left panel to the editing area.
Go to the left panel and set the card type to multiple-marker.
Open the section Map Marker Settings and click on the existing map marker to edit it. Paste the latitude and longitude of the first location you want to add to the map. Also set the title as well as the description.
To get the latitude and longitude of a location, open Google Maps and search for the location (place) whose latitude and longitude you want to get. Once found, click with the right mouse click and a left click on the number that appears on the contextual menu.
This action therefore allows you to copy the latitude (the first value) and the longitude (the second value).
When finished adding the latitude and longitude of the first location, click the button ADD AN ELEMENT to add another location to your map.
Open Google Maps again and find the new location you want to add to the map and copy the longitude as well as the longitude and paste them into the respective fields like the one above. Repeat the above steps to add more locations to the map.
Read also: How to Use Elementor's Posts Widget
When finished adding locations, open the block Map Controls to enable/disable the commands you want to provide on your card. You can also set the zoom level here.
You can also open the block Map Theme to select the Google Maps theme you want to use.
So far you have successfully created a map with multiple locations. You can open the tab Style to define the height as well as the width of the map.
If you want to have a full-width map, set the section that contains the map to full-width. To do this, click on the handle of the section.
In tab and block Layout set Content width to full widthr and the Column gap on No deviation
Click on the button PUBLISHEDER at the bottom of the left panel to publish your page.
Embed the map in a page or post
If for some reason you prefer to embed your map on a page/post (the page/post created with the default WordPress — Gutenberg) editor, you can use the WordPress Plugin Elementor Blocks for Gutenberg. This plugin will convert an Elementor template into a Gutenberg block.
To save the map you just created as an Elementor template, click the arrow icon next to the button PUBLISH / UPDATE and select Save as Template.
Give your model a name and click on the button RECORD.
Next, create a new page or post (make sure you have installed the Elementor plugin Blocks for Gutenberg). Add a new block and select Elementor Library and select the template you just created.
Note: If you see a 'For development purposes only' message when adding a card, be sure to enable your Google Cloud billing. The new Google policy requires developers to activate the billing account (you can still use the Google Maps API for free).
Get Elementor Pro Now!!!
Conclusion
So ! That's it for this article that shows you how to create a map with multiple locations with Elementor. If you have any concerns about how to get there, let them know in the Comments.
However, you can also consult our resources, if you need more elements to carry out your projects of creation of Internet sites, by consulting our guide on the WordPress blog creation or the one on Divi: the best WordPress theme of all time.
But meanwhile, share this article on your different social networks.
...
