This tutorial shows you how to embed and customize a map using the Divi Visual Builder.  Maps are great for showing the physical location of your business and other important locations.  The Divi WordPress theme has a powerful map module that makes your maps look great.

Take A Test Drive

Sign up for a 15 day free trial to our powerful WordPress Hosting Platform.  Take advantage of everything we have to offer for free.  No credit card required!

Transcript from the Divi WordPress Tutorial

________________________________________________________________________________________

Hello, this is Jimi Blevins.

Today I’m going to show you how to: “Add A Map To Your Webpage Using The Divi Visual Builder.

First off, to get started, let’s add in our “Map Module.

ScreenshotHowToAddAMap

The first thing you’re going to notice when it pops up is this “Google API Key.

ScreenshotHowToAddAMap2

If you don’t have an API key they’re really easy to get from the Google website and plug it right into your “Theme” options. It’ll go ahead and set that API key up site-wide, so any map you add to any page it will automatically populate this API key for you. 

This is just a way for Google to kind of keep tabs on who’s using their software and have a little bit of control over it. For most websites, it’s not a big deal but if you’ve got a super high traffic website where you are using maps a lot, sometimes they do charge for the service.

The first thing we need to do is add in our address. “Add New Item.

ScreenshotHowToAddAMap3

I’m going to just make up a couple things here and I’ll use the Mozaic address.

Then in the “Content” section, you can add text, images, or video. It pretty much works like a default WordPress text area.

ScreenshotHowToAddAMap4

(This is the information that’s going to pop up when you click on the little pin.)

 

So once we’re done adding in all our information we still need to come back in here and center the map. “Map Center Address.

ScreenshotHowToAddAMap5

I’m just going to plug in the same address again, now click on “Find” and you’ll see that it will center the map right on that address.

ScreenshotHowToAddAMap6

I can also set the default zoom. I don’t want it super close, I want to show a little bit of the town.

ScreenshotHowToAddAMap7

The other options here are pretty self-explanatory.

Mouse Wheel Zoom” enables or disables whether or not you can zoom with your mouse wheel.

Taggable On Mobile” determines whether or not you can reposition the map on a mobile device.

ScreenshotHowToAddAMap8

There’s one design element and that actually allows you to remove all of the colors from the map, this is an interesting option that they added in there for the “Design” options.

ScreenshotHowToAddAMap9

So that pretty much walks you through how to: “Add A Map To Your Webpage Using The Visual Builder.

Once again, I’m Jimi Blevins and thank you so much for watching.