How to simply embed Google Maps in Divi Code Module (2017)

by | Aug 23, 2017 | Tutorial |

Beginner

}

10 Minutes

Divi related

What up teq-ies ! Last time we talked about the process on how to get Google Maps API up and running with Divi. This time we look at shortcut to this workflow, which will do the trick just fine as well. We’re going to grab an iframe code from Google Maps share options and throw it right into Divi’s handy Code Module. Learn how to embed Google Maps in this short tutorial – Watch out before you miss it 🙂

To embed Google Maps head over to Google Maps (www.google.com/maps) and navigate to any POI, place or adress you’d like have in your final map. If you click on any POI on the map or use the search field to look for a specific adress, in either way you should end up having the big, red, marker placed on the map. Now click on the “share” button in the left sidebar under the adress.

After pressing the share button a fancy pop-up-window will appear showing you the option to either have a direct share link to google maps or to have your own embed-code to embed the map into your own website. Go to the second tab that says “embed” next to “share link”. In this tab you will see a preview of your map. You can adjust the size with the little drop-down-menu. When you’re done go ahead and copy the complete iframe-code out of the text field.

Now, within your WordPress instant, bring up the site of your choice and activate the Divi-Builder. Insert a new “Code-Module”. Open up the settings of this code-module and paste the complete iframe-code inside the content/text field. Hit save & exit for the code-module.

After you saved the site in WordPress, open it up in the front-end. You will see an embed Google Map with a red marker you just have placed. Look at the example on right side. That’s an embed Map as well, placed within a code module from Divi. As you can see, the size of the map will get adjusted automatically. Pretty neat, hu ? 🙂

This is how you embed Google Maps

That’s about it. Pretty straight forward, but if you run into any trouble following this tutorial, don’t hesitate to leave us a comment in the comment section below. Thanks for reading !