No matter what business you're doing whether you're running a website for a small business or a local shop adding Google maps in Divi builder can be extremely beneficial as it adds credibility to your brand, improve the local SEO as well provide helpful directions and information about your physical location for potential customers.
Fortunately, adding Google maps in Divi builder is pretty easy and we're going to walk you through the exact step-by-step process in today's guide.
So without further ado let's get started!
Contents
Overview
In minutes for those who don't have an idea of what we're talking about here. Google maps are one the Google's products that are available as a web application and as an application for the mobile operating system. it helps people find available stores and places providing them with directions, ratings, and much more.
Why use Google maps on your site?
Obviously, you might already know some of the benefits of adding maps to your website but there are even more than you may think.
Here are some reasons to use Google maps on your website:
Help potential customers: Google maps make it easy for potential customers who are interested in what you offer to find you and also convinces them to take action especially if you have got a good rating in your Google my business property as it appears on the map.
Add Credibility: having your physical location listed on your website will add that kind of credibility and professionalism to your brand.
Improve Local SEO: Google maps are one of the signals that will improve your SEO especially if the services you provide are mainly within your country or local area.
Getting leads: Google maps is also a search engine, so when people get there and start looking for services, you'll get traffic. Thus, you have a higher chance of getting loyal customers and lead for your business.
How to add Google Maps in Divi Builder
Here we are in the actionable step-by-step guide where we'll be adding google maps in Divi builder using 3 different methods: the first one is done manually by inserting the iframe code generate from the google maps website.
The second way is using a WordPress plugin and last but not least an additional easy option which is to basically use it as an image.
You might be wondering which one is the best? well, there is no difference just choose the one that best suits your needs and situation. As soon as I am concerned, I will choose to add it manually on the one hand, because it offers more dynamic features than adding it as a simple image.
On the other hand, it makes me keep the number of plugins used on the site to a minimum which is important to keep the website loading as faster as possible.
Let's move on to the methods.
1 – Embed Google Maps to Divi Without an API key
Add the map in using Divi code module
To Add Google Maps to Divi builder without an API key follow these simple steps:
1 – Head over to the Google Maps official site and search for your business location. You can also zoom in to get the perfect angle then go ahead and click the “Share” icon.
2 – A window will pop up, choose the “Embed a map” option.
3 – Now you see the code we need to insert in our site which is an HTML iframe element, click “Copy HTML”
4 – Log in to your WordPress admin dashboard, edit the home page or any page you want to add the map to. create a normal section and a row. Then add the <code> module and paste in the HTML code we have just copied.
5 – This step is optional, you can do it if you want to make the map take the full width. so in the code, you copied change the “width” attribute value to 100%, and don't forget to make the row full width as well along with removing any paddings.
6 – Save the changes and Boom! as you can see the map is added and looks just amazing.
To add Google maps to the Divi sidebar we're going to follow the same steps we mentioned above then after getting the HTML code, we need to navigate to Appearance > Widgets. add the code to the sidebar using the Custom HTML widget as shown below.
Click the “Save” button and the map will be added to the sidebar area.
2 – Insert Google Maps using a Plugin
This method is focusing on adding Google maps to Divi builder using a third-party plugin and it's an easy way if you don't want to use the first manual method for some reason.
There are dozens and dozens of WordPress plugins for creating, managing, and adding maps to your website and the process is literally the same. for the purpose of this guide, we're going to use a well-known maps plugin called: WP Google Maps.
Here are the steps to add Google maps to Divi using a plugin:
1 – Go to Plugins > Add New then install and activate the WP Google maps plugin.
2 – The plugin lets you create the map and gives you a shortcode for each one that you can use to make it appear wherever you want.
3 – Scroll down a little bit then under the “Advanced Markers” put in the address of the location you want and adjust the zooming the click “Add Marker”.
4 – After saving the changes code the shortcode of the map and go back to your main WordPress dashboard. Navigate to Pages > All Pages edit the page you want and inside the default, Gutenberg editor. add the shortcode block then paste the code you have copied. save the changes!
Alternatively, You can search for the widget of the WP Google maps plugin itself and it will give you all the maps you have created then go ahead and choose the one you want to add.
Take a look at the page and Voila!
the map is added successfully.
3 – Add Google Map as an image
There are some people who are quite lazy and they don't mind adding the Google map in Divi builder as an image. although, this is not the right way of doing things you can make use of it if you just want something quick. All you have to do is to zoom the map and take a screenshot for your location then upload it wherever you want just like you would do with normal images.
Further Reading:
- Divi Google Analytics Set Up Guide (2 Easy Ways)
- Divi Logo: Change size, Customization Guide & [Expert Tips]
- How to Edit Divi Theme Footer [Easy Guide]
- Divi Favicon: How to Add it & What to know
Roundup
All in All, If you running a blog then adding Google maps is not really essential. However, if you have a local business and you're looking to get some free traffic, build your brand and make it look professional then adding Google maps to your business website is a must.
It's actually very easy to add Google maps in Divi so if you're a local business and you still didn't insert the maps that show your location into your Divi website then go ahead and do so by following one of the methods we mentioned above.
That's it for our guide, if you like it then share it!
if you still have any questions or thoughts in mind then feel free to drop them in a comment below. Otherwise, stay awesome and see you in the next article.
Cheers!
