The vast majority of WordPress page builder plugins have an element to add a map from Google Maps to a page. Divi Builder is no exception. To add a map from Google Maps in Divi Builder, you can use the Map module.
The Map module of Divi Builder supports multiple pins in case the business you are creating the website of has several branches in the city.
To be able to use the Map module, you need to integrate Divi Builder with Google Maps first via an API key. Here is how to add Google Maps in Divi Builder.
Step 1: Integrate Divi Builder with Google Maps
As just said above, you need to integrate Divi Builder with Google Maps to be able to use the Map module. You can integrate the two using a Google Maps API key.
To get a Google Maps API key, go to the Google API Console website and login with your Google account. If you have no project yet, create one by clicking the dropdown menu on the top bar. On the appearing window, click the NEW PROJECT on the top-right corner.
Give your project a name and click the CREATE button.
Once your project is created, select it from the dropdown menu on top bar.
Click the Library menu on the left panel.
On the next page (the API Library page), select the Google Maps API type you want to use on the Maps section. In the case of Divi Builder, you can use the Maps JavaScript API.
Click the ENABLE button to enable the API.
Switch back to the main dashboard of Google API Console (by clicking the Google API Console logo on the top bar) and click the Credentials menu on the left panel followed by the CREATE CREDENTIALS button and select API key.
Copy the generated API key on the appearing window.
Once the API key is copied, login to your WordPress dashboard and go to Divi -> Theme Options (or Divi -> Plugin Options if you install Divi Builder on a WordPress theme other than Divi theme). If you use the Divi theme, you can paste the API key to the Google API Key field under the General tab.
If you use Divi Builder on another theme (other than Divi), you can paste the API key to the GOOGLE API KEY field under the API Settings tab. Just don’t forget to save the change by clicking the Save button.
Step 2: Start Adding the Map
Once your Divi Builder is integrated with Google Maps, you can start adding a map to a page or theme builder template. Simply add the Map module by clicking the grey plus button on the canvas area.
Before adding a pin, you can set the map center address first in order to make Google Maps display the map around your business location. For instance, if your business is situated in London, you can set the map center to London. Or, you can set the map center to your business location instead.
To set the map center, open the Map block under the Content tab on the settings panel and click the FIND button.
Adding Pins
To add a pin to the map, you can simply click the Add New Pin button under the Content tab on the settings panel.
Open the Map block and enter the location you want to pin on the Map Pin Address and click the FIND button. To add the text, you can open the Text block.
You can repeat the steps above to add other pins.
Styling Up the Map
To style up the map, you can go to the Design tab on the settings panel. Before opening other blocks on this tab, you can open the Controls block to disable/enable the map control (mouse scroll zoom).
You can open other blocks to set things like margin and padding, apply CSS filters, set the entrance animation, and so on just like other Divi Builder modules.
Note:
Note: If you find the “For Development Purposes Only” message when adding the map, make sure you have enabled your Google Cloud billing. The new Google policy requires users to enable Google Cloud billing. No worries, you can still use Google Maps API for free as long as not surpassed the monthly credit provided by Google ($200). Read this article to learn more.
The Bottom Line
If you are creating a website for a business that has a physical location then adding the map of the associated business is crucial enough. It will make it easy for aspiring customers to find the location of the business. If you are creating the website using WordPress+Divi Builder, you can add a map using the Map module.
The module allows you to add a map from Google Maps. But first, you need to integrate both Divi Builder and Google Maps using an API key. The Map module of Divi Builder allows you to add multiple locations (pins) on your map.
