Search for a plugin or theme

Search
Generic filters

How to Embed a Google Map in Divi for Free Without API Key

You are currently viewing How to Embed a Google Map in Divi for Free Without API Key

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.

Cant load Google map error

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
Google map console error

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.

  1. Navigate to Google Maps and search for your desired location.

  2. Click on the Share button from the left sidebar.Share a Google map

  3. A new popup window will appear. Click on the Embed a map tab.Embed a Google map

  4. Copy the map’s HTML code. We will use it in the next step.Copy map HTML code

  5. Open the Divi visual builder on your website and add a code module to your desired location.Add Divi code module

  6. Paste the map’s HTML code.Embed Google map HTML code in Divi

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

Divi extensions

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.

Map size height and width

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

Change map width

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.

Change map height

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.

Very Simple Google Maps WordPress 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.

Add address to the Google map shortcode

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%"]
Add width attribute to shortcode

Check the table below to view all the available attributes and values that you can use inside the shortcode.

AttributeAccepted Values
companycodeGoogle string cid for company maps listing
widthPixels or percentages
heightPixels
alignleft, center, or right
info_windowA or near for off
maptypem, 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.

PluginsForWP

PluginsForWP is a website specializing in redistributing WordPress plugins and themes with a variety of knowledge about WordPress, internet marketing, and blogging.

Leave a Reply


Get notified about new content and coupon codes!

JOIN OUR COMMUNITY OF 120,000+ WORDPRESS ENTHUSIASTS