Showing your location with a Google map on your WordPress website can help your business and visitors altogether.
The Divi map module will require us to generate an API key and enter billing information. That is a long, complicated process that we should avoid.
This article will show you how to embed a Google map in Divi without an API key.
Divi Map Module Problems
Since the new Google Maps policy took place in July 2018, you can no longer display a map on your website unless you generate an API key.
Moreover, in addition to the generated key, you’ll also need to enter billing information for the map to work correctly.
Because displaying a Google map on your website is a free service, site owners prefer to find a better solution before providing their payment information.
In addition, using an API key and entering billing information does not guarantee that the map will be displayed correctly or at all.
Here are some of the most common problems that can happen when trying to embed a Google map with Divi:
- MissingKeyMapError – An API key is not being used
- RefererNotAllowedMapError – Key doesn’t allow your URL
- ApiNotActivatedMapError – API is not enabled
- InvalidKeyMapError – The API key used is incorrect
Because an API key and billings information may not be enough, we should find a more accessible alternative to embed Google Maps in Divi.
How to Embed Google Map in Divi Without an API Key
Embedding a map on your business website should be a top priority. Maps are one of the must-have elements you should display on your contact page. A map will help your website with engagement and conversion.
In this section, I will walk you through the process of how to embed a Google map on your WordPress website with the Divi page builder plugin.
The great thing about this method is that you don’t need to get an API key or enter your credit card or any other billing information whatsoever.
-
Navigate to Google Maps and search for your desired location.
-
Click on the Share button from the left sidebar.
-
A new popup window will appear. Click on the Embed a map tab.
-
Copy the map’s HTML code. We will use it in the next step.
-
Open the Divi visual builder on your website and add a code module to your desired location.
-
Paste the map’s HTML code.
-
Click on the checkmark button to save the changes.
That’s it. Please revisit your website and ensure the map displays correctly on the front-end.
Change the Map Size
You’ve probably noticed that the map size is limited. In fact, the HTML code is framing the map to be 600px in width and 450px in height.
While the displayed size is suitable for many, others may like to change it and make the map to take the entire width of the page or the container.
To adjust the map’s size, we will need to change the values inside the HTML code.
Open the code module in Divi once again and replace the width attribute value from 600px to 100%.
Most times, changing the map’s width will be enough. However, if you want to change the height, replace the 450px with your desired value.
TIP: The height attribute only accept scalable value such as pixels and em but not percentages.
Please save the changes and visit your website to verify the map size.
Embed Google Map in Divi Using a Plugin
A dedicated plugin is another great way to embed Google Maps in Divi. There are plenty of good maps plugins to choose from, but I’ll focus on one of them in this article.
From your WordPress dashboard, navigate to Plugins -> Add New, install and activate the Very Simple Google Maps plugin.
As the name suggests, it is a straightforward plugin to use, and it will be ready once activated.
Open the Divi visual editor and add the code module to your desired position as we did earlier.
Then, add the shortcode below into the text field of the module.
[vsgmap address="street address to display"]Make sure to replace the street address to display with the actual location’s address.
Then, save the changes and revisit your page to verify the map’s size.
Adjust the Map with Variables
By default, the map size is 480 pixels width by 300 pixels height. We can adjust the shortcode attributes to change the map’s display like the embedded code method above.
For example, if we want to make the map to take the entire width of the page, we will add the width attribute with the desired value into the shortcode like width="100%".
As a result, the map’s width will adjust accordingly and take the entire container width.
The complete code will look like this:
[vsgmap address="street address to display" width="100%"]
Check the table below to view all the available attributes and values that you can use inside the shortcode.
| Attribute | Accepted Values |
|---|---|
| companycode | Google string cid for company maps listing |
| width | Pixels or percentages |
| height | Pixels |
| align | left, center, or right |
| info_window | A or near for off |
| maptype | m, k, h, or p” (m – normal map, k – satellite, h – hybrid, p – terrain) |
Conclusion
This article taught you how to easily embed a Google map on your website with the Divi plugin without an API key.
Leave us a comment and tell us if you have any questions about the process.
Also, make sure to subscribe to our YouTube channel and like our page on Facebook.
