Say you have a business that already has several branches in the city, and you want to create a digital map that shows the locations of those branches. If you have a WordPress-based website, you can create such a map in an effortless way. There is a great plugin that you can use to create a map with multiple locations: Essential Addons.
Essential Addons itself is a premium Elementor add-on so you need to install Elementor as well before being able to use it. You can use the free version of Elementor to create a map with Essential Addons. The 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 to your WordPress using Essential Addons. Before getting started, make sure to install both Elementor and Essential Addons.
Integrating Google Maps with Essential Addons
Before being able to add a map from Google Maps with Essential Addons, you need to integrate them first. You need an API key to integrate Google Maps with Essential Addons. First off, visit Google API Console and login with your Google account. Create a new project by clicking the dropdown menu on the top side and click NEW PROJECT.
Give your new project a name and click the CREATE button.
Once your new project is created, select it from the dropdown menu and click Library on the left panel.
Google divides the API of the Google Maps platform into 15 types. You can see them by clicking the VIEW ALL link on the Maps section. You need to activate the APIs according to what you want to accomplish. In our case, you need to activate the following APIs to add a map from Google Maps using Essential Addons.
- Directions API
- Geocoding API
- Places API
To enable an API, select an API you want to enable (by clicking it) and click the ENABLE button.
Login to your WordPress dashboard and click Essentials Addons on the left panel. Click the Elements tab and scroll down to the Advanced Google Map section. Click Settings and paste the API key you have just copied.
Click the SAVE SETTINGS button to apply the new change.
Start creating the map
Once Google Maps and Essential Addons are integrated, you can start creating the map. To do so, create a new page (Pages -> Add New) or new post (Posts -> Add New) and edit it with Elementor.
Before creating the page, set the page layout by clicking the gear icon on the bottom-left corner to open the Settings panel. Set the page layout on the Page Layout section.
Create a new section by clicking the plus button on the canvas area. To have a wider area for the map, you can select the single-column structure. Drag the EA Google Map widget from the left panel to the canvas area.
Go to the left panel and set the map type to Multiple Marker.
Open the Map Marker Settings option and click 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 the longitude of a location, open Google Maps and search for the location (place) you want to get the latitude and longitude of. Once found, right-click the map’s pinpoint and select What’s here?
You should see a popup on the bottom side of the Google Maps page with the coordinates that are required for your preferred place. Copy the latitude (the first value), and longitude (the second value).
Once done adding the latitude and longitude of the first location, click the ADD ITEM to add another place to your map.
Open Google Maps once again and search for the new place you want to add to the map and copy the longitude as well as the longitude and paste them to the respective fields as the one above. Repeat the steps above to add other places to the map.
Once done adding places, open the Map Controls option to enable/disable the controls you want to provide on your map. You can also set the zoom level here.
You can open the Map Theme option to select the Google Maps theme you want to use.
Until here, you have successfully created a map with multiple locations. You can open the Style tab to set the height as well as the width of the map.
If you want to have a full-width map, set the section that holds the map to full-width. To do so, click the section handle.
On the Content Width section under the Layout tab, set to Full Width. Also set the Colums Gap to No Gap.
Click the PUBLISH button on the bottom side of the left panel to publish your page.
Embedding the map to a regular page/post
If, for a certain reason, you prefer to embed your map to a regular page/post (the page/post created with WordPress’ default editor — Gutenberg), you can use the Elementor Blocks for Gutenberg plugin. This plugin will convert an Elementor template into a Gutenberg block. You can read this article to learn more.
To save the map you have just created as an Elementor template, click the arrow icon next to the PUBLISH/UPDATE button and select Save as Template.
Give your template a name and click the SAVE button.
Next, create a new page/post (make sure you have installed the Elementor Blocks for Gutenberg plugin in advance). Add a new block and select Elementor Library and select the template you have just created.
NOTE: If the map is not loaded after you drag the EA Google Map widget to the canvas area and you see a “For Development Purposes Only” message, make sure to enable your Google Cloud billing. The new Google policy requires developers to enable the billing account (you can still you Google Maps API for free). Read this article to fix the issue.