Divi Embed Google Map Module

If you just need a simple Google Map, then this Embed Google Map Module will do the job nicely. This will embed into your Divi’s site easily without having to worry about anything else.

The Maps JavaScript API v2 is deprecated and will has turned off on May 26, 2021. As a result, all site's v2 embed maps will stop working, and will return JavaScript errors. Google Embed now required a API key even for embed map. https://developers.google.com/maps/documentation/embed/get-started

However, old method using copy/paste method does work for now, however we cannot confirm this method is stable or will be deprecated in the future as well(Google is known to change things):

Obtain a Google embed code

  • Go to Google Maps
  • Enter the business address in the search bar, then click the search button
  • Click on the Share icon
  • Choose "Embed map"
  • Select the size of the map from the drop down
  • Select and copy the HTML iframe embed code

Even thought having API for embed is free and has unlimited usage(https://developers.google.com/maps/documentation/embed/usage-and-billing).

You can read more on how to create the free API for the embed google map: https://developers.google.com/maps/documentation/embed/get-api-key

Make sure Maps Embed API in the Library is enabled as well.

Maps Embed API.png

showcase-5-1024x747.png

Content Options

dsm-embed-google-map-768x893.png

Google Map API Key The module uses the Google Maps Embed API and requires a valid Google API Key to function. Before using the module, please make sure you have added your API key inside the Divi Theme Options panel.

Address

Enter an address for the map, and the address will be geocoded and displayed on the map. You can simply type in an address in a standard format, such as “1235 Sunny Road, Some City, State, 88343.”

Zoom

The Zoom level of the map.

Admin Label

This will change the label of the module in the builder for easy identification. When using WireFrame view in the Visual Builder, these labels will appear within the module block in the Divi Builder interface.

Design Options

Within the design tab you will find all of the module’s styling options, such as fonts, colors, sizing and spacing. This is the tab you will use to change how your module looks. Every Divi module has a long list of design settings that you can use to change just about anything.

Advanced Options

Use the advanced options to give your text module custom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module’s visiblity on certain devices.

Last updated on 26th May 2021

Divi Supreme

We support Divi’s mission through the development of Divi custom modules and Divi child themes that focus on beauty, subtle animations and visitor engagement.

Learn More

Need Help?

Still have a question? Contact Divi Supreme's support. We will try our best to answer your question as soon as possible.

Contact