Code by Day | Explore By Weekend

How to Embed A Google Map In Divi For Free With No API Tutorial by Pee Aye Creative

How To Embed A Google Map In Divi for Free with No API (Extremely Easy!)

Not ready to give Google your credit card? Here's a super easy way to embed a Google Map in Divi that is free and involves no API.

UPDATE: On August 28, 2019 there was an issue from Google with their logo showing as http not secure. I assume Google will fix this soon, but if not just add this snippet to the Theme Options>Integrations>head: <meta http-equiv=”Content-Security-Policy” content=”upgrade-insecure-requests”>

37
Last updated Jan 12, 2021 @ 11:08 pm

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative Co in the beautiful state of Pennsylvania. He loves helping small businesses, exploring, building websites with Divi, and teaching others.
Divi Adventure Club Product And Course Membership by Pee Aye Creative

Become A Member!

Gain access to everything we offer!

Learn More

Leave A Response!

Subscribe
Notify of
guest
139 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Keith Smart
2 years ago

Tried this mate and when i try to paste the code it dose not offer me the option just copy find and replace and reset content would have love it to have work have a nightmere with maps

Andy
Andy
2 years ago

Awesome! This is exactly what i was searching for. Thanks a lot ????

Chris
2 years ago

How do you add a “get directions” button… don’t see it on the examples above.

wadnner cortez
2 years ago

This worked flawlessly. i ended up using the link to attach it to the module of the section were the address was showing. now you just click and it opens up your google maps. thank you.

Brenda Kirkham
Brenda Kirkham
2 years ago

Brilliant, worked perfectly, thank you!

Percy
2 years ago

Fabuloso!!! Thanks you. How many people like me will ask the same. In the ElegantTheme forum, they have already tired of answering.

Karin Melbye
2 years ago

Great post! Glad I found it. I was getting a bit confused by the map not working.

Is there a way to add several addresses and style the pin e.g. with a logo?

Chris
Chris

If you use Google My Maps, you can change the pin to any icon you want. I often do that, especially when I have several plots to point. But your solution works great when you only have one place! Thanks so much!

John
John
1 year ago

I have a question. In your screenshot, in the upper right corner of the finished result, your Google Profile picture appears. I’m getting a white box with a smaller black outlined box inside of it. If I log out the blue Google Sign in button appears.

Sara
Sara
1 year ago

How can I make this fullwidth as one column in a two column row?

Tashia
Tashia
1 year ago

I just followed your tutorial and it worked perfectly! Thank you!! 😀

Sahan
Sahan
1 year ago

Thank you sir, that is what i looking for!

kreemz
1 year ago

works a treat. Thank you.

My map was not displaying – was greyed out. Followed instructions and still no good. Came across your site, your instructions were brilliant and vola – it works like a beauty.

Thanks once again.

Mohamed Ali
1 year ago

Thank you very much

Rikke
1 year ago

Hi Nelson

Thank so much you for his most helpful and easy to follow guide. I really appreciate your many tutorials very much.

Best Regards
Rikke

Hattie
1 year ago

Really useful information. I spent so much time to implement google map. But this post helped me to implement the map in 2 mins. Thanks

Alison Fox
Alison Fox
1 year ago

Wow! Thank you so much- this was perfect advice! I’m a complete novice- no webdesign experience whatsoever, but wanted to created websites for myself and my partner, as I wanted total control on their appearance & functionality. These tips were easy to follow, and worked first time.

amanada
amanada
1 year ago

Hi, thanks so much for this tutorial. Worked great. I just wish there was a way to remove the white info box in the top left corner. I guess it’s fine if the map is full page width, but with a smaller width map it takes up a lot of room. But I’m assuming it’s in the google code.
Thanks again.
Amanda

Adrian
Adrian
1 year ago

Awesome alternative, thank you sir!

Tim
Tim
1 year ago

Hey Nelson, I tried your technique, but Divi is not letting me save with the iframe code on the page. It gives me a message that reads: “Your Save Has Failed An error has occurred while saving your page. Various problems can cause a save to fail, such as a lack of server resources, firewall blockages, plugin conflicts or server misconfiguration. You can try saving again by clicking Try Again, or you can download a backup of your unsaved page by clicking Download Backup. Backups can be restored using the portability system while next editing your page. Contacting your host… Read more »

Anwar
Anwar
1 year ago

Thank you so much for your great help. You saved my life.

Rodrigo Utopia
1 year ago

You helped me a lot! thank you very much! very smart thinking!

Dmytro
Dmytro
1 year ago

thanks a lot, great tip!

Godwyn
1 year ago

Awesome this worked 🙂 Appreciate your help towards the community

Support Support
Support Support
Reply to  Godwyn
1 year ago

Hey Godwyn, it makes my day every time I hear about my blog helping someone! Enoy doing it!

Andrea
1 year ago

Thank you very much for sharing this one!!! Perfect!!! 🙂

Davide Corizzo
1 year ago

Great tutorial! 👏🏻👏🏻👏🏻

greg T
1 year ago

This works BUT the Google logo in their embedded maps is served up from an insecure server (http) so the page(s) that you use this embedding technique will come up as being unsafe even if you use SSL (https).

greg T

It’s a bit newer that just yesterday but, that said – thanks a bunch for the code. works perfectly. I can’t help but wonder if it’s Google’s way of forcing the use of their API’s and having your credit card on file. Thanks again!

Michelle Wong
Michelle Wong
1 year ago

Thanks for this! When i’m in divi edit mode it shows it working but once i exit – it’s just blank. I added the not secure code and still not working… what am i doing wrong?

Thanks!

Nelson Lee Miller
Nelson Lee Miller
Reply to  Michelle Wong
1 year ago

Hi Michelle,
It’s difficult to know what could be happening without a link or screenshot. You can use https://prnt.sc/ to share some screenshots of what you are doing.

I’m guessing it’s something simple since no one else has had any problems.

Stéph
Stéph
1 year ago

F O R M I D A B L E !!!
Struggling with the google map api, angry about google, even ready to use open street map, i came across your site.
Your solution is exactly what i needed. Very easy to implement and works flawless.
Un très grand merci.
Stéph

Bradley Croucamp
Bradley Croucamp
1 year ago

Worked like a dream, Thank you Nelson

David Nelson
1 year ago

Fantastic! Saved me hours of frustration with googlemaps and the API system giving me unlimited difficulties. Thanks!

Jenny
Jenny
1 year ago

AMAZING! Thank you! Highly appreciated.

Phil Ward
Phil Ward
1 year ago

This is great. Only Issue I have encountered is that there is a 10px bottom margin or padding that I cant get rid of, all Divi elements have padding and margins set to 0px, any ideas.

Johnny Prado
1 year ago

Thank you kindly. The new Google CC required crap is horrible. I am not sure why Divi Theme doesn’t change their module to allow this as well instead of my using a fullwidth code module.

Moira
Moira
1 year ago

Is it possible to display two locations on one map view?

Also I’d like the map to appear with a zoomed out view – is this possible too?

Sean
1 year ago

Awesome, many thanks for sharing this!!

Simon
1 year ago

Hi. I’ve been banging my head against this, enabling and diabling allsorts of APIs, which has greatly increased my knowledge in that area but didn’t help me with this problem! Your post was super easy and very simple and just worked. Thanks ever so much mate. Simon

Maria
1 year ago

thousand thanks

Don’t have any good tips on collecting multiple map pins on the same map?

any company offering this?

Tess
1 year ago

Genius. I used the full width code module but added the 100% into the embed code and it worked a treat. For some reason, I had used a different embed code and it didn’t appear on mobile. I followed your directions in a full width module and bang. Perfect. Thanks a heap!!

P L
P L
11 months ago

Hi, thanks this works lovely. BUT I just discovered that in Google search there is a odd “BESbswy” word displayed below the headline in snippet. After googling I found out it has something to do with maps, but that’s all I know. Is there a way to remove it, as it looks quite unprofessional…

P L
P L

Hi, sorry I wrote it down in a wrong way. Correct one is: “BESbswy. BESbswy.”, which appears in snippet in google seach. Most of the websites point to the contact/location page and usually there is a google map. But in the website there are no such line, so it has to be added automatically by Google. If you google those words, you will find some discussion about it.

Matt
Matt
11 months ago

So simple and yet I hadn’t thought about it. I also found the credit card / API solution pretty annoying and this seems to work fine so far. So thanks for this great tip!

Andreas
10 months ago

Why did I never think of this workaround? Sometimes we all tend to do complicate things.

I will definitely use this next time I develop a wordpress website

Jesper Homann
Jesper Homann
9 months ago

Thanks for helping me out. It took 2 minutes and works like a charm.
One thing though – is it possible to control the zoom level of the embedded map? I have not been able to find a solution to this.

Luis Maia
9 months ago

Hi Nelson, I have done some tests and see that there is lots of requests in the waterfall: https://gtmetrix.com/reports/garagemtt.pt/4kBLHV6V regarding http://www.google.com/maps/vt? and maps.googleapis.com.

Is this normal? There is any way to reduce this? It seems that the map is being downloaded piece by piece.

Thanks!

Kamil
Kamil
8 months ago

Hi, thank you for the easy step-by-step. But after doing everything as supposed, the google map is showing, but it does not adjusts the height, therefore, it shows it very huge, with and ‘endless’ scroll. It’s like it is extremely zoomed. I tried even to set the max height of the module, row and section … any idea what where to look ? thank you very much in advance.

Kamil
Kamil

Yeah Sure,

This is the code:

<iframe src=”https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d390.10562394702157!2d4.341711023705383!3d50.852307944528285!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47c3c389405a32bd%3A0x3fe1c9047030fc93!2sDansaert%20Creative%20Business%20Center!5e0!3m2!1sen!2sbe!4v1590736931035!5m2!1sen!2sbe” width=”600″ height=”450″ frameborder=”0″ style=”border:0;” allowfullscreen=”” aria-hidden=”false” tabindex=”0″></iframe>

And this is the page I am currently working on: 

https://steve.fit/contact-us-2/

Maybe I’m doing something wrong ? 

Thank you for looking it up for me 😊

Cheer

I replied as well on the e-mail.

Vincent Palermo
Vincent Palermo
Reply to  Kamil
6 months ago

I’m having the exact same problem. Has this been resolved??

James
James

I am having the same problem. Is there a solution to this? Thanks.

Adrian Ramirez L.
8 months ago

Hola Nelson

Greetings from Costa Rica.

Thanks a lot for this tutorial.

Big time help!!!

Adrian Ramirez L.

Nelson, I just want you to know that what made the big difference was that I used CONTROL V (as you suggested others) in order to paste de HTLM code on DIVI code module. Right click on the mouse to PASTE THE CODE does not work. I do not know why neither if it happens to others BUT IT DOES NOT WORK FOR ME ON WINDOWS 10. It has to be “control V” and the magic happens.
Thanks again.
 

arnoldus
8 months ago

Hi, why when on the edit page, the map was shown, but when it was publish i see nothing

Can u help me??

this my site

http://www.e-mall.id

3.png
Dick Ockers
8 months ago

Thank you AGAIN, for helping me out… deep bow of respect.

Edgar
Edgar
7 months ago

Hello Nelson, have you tried this lately? I keep getting an error when trying to save it? it used to work, I’be done it before now when I go to save the page on divi it give me an error saving it ?

Edgar
Edgar

I will look at your link, although I thought it was something to do with the google because as soon as I took the code off it saves normally? but I will take a look at your link, thanks.

Niki
Niki
7 months ago

Exactly what I was looking for thanks!

Asha
7 months ago

Hi Nelson, thank you so much for this very helpful post. I have inserted a map into my website footer, exactly as you say, but it doesnt fill the whole area. I am using it in the Theme Builder Global Footer, and have adjusted the size to fit. It looks the the way it should there, but when you view the live site, it’s smaller with a white space created below and sometimes it doesn’t show at all. Do you have any ideas what could be causing this?

Asha

Hi Nelson, thank you for getting back to me! I ended up disabling all of the plugins and testing one by one to see if there was a conflict. I discovered it was the Smush plugin 🙁 – so now I have to find an alternative for that as it really helped the site speed.

Hendrik
Hendrik
5 months ago

Meeeeeeeeeeeeen this is great. Thanks a lot!

Last edited 5 months ago by Hendrik
Mike Jones
Mike Jones
5 months ago

Thank you for this great blog post. After several days of trying to get the API to work, this made my day.

Alicia
5 months ago

Hi there. I pulled up my Google map, copy and pasted the html code in a code module and the map appeared. My problem is that Divi throws and error (Your Save Has Failed) and won’t let me save, so I’m back to square one. Any help is appreciated. Thanks!

Alicia

Thanks for the link! I’ll read through and hopefully I get the problem solved.

Anand Jha
Anand Jha
5 months ago

You are awesome!!!! Worked out smoothly

Bikram Singh
3 months ago

Hi, Thanks for the tutorial. I have replaced the regular Google map by the method you suggested, but for me the links does not seem to work. I have embedded the map as you have suggested in your tutorial, but when I click the links in the embedded map (direction, view larger map or satellite image on the bottom) , I am taken back to the page I was on.

It works well on my local installation in XAMPP, but not on the live website.

https://bhupagreens.com/

Bikram Singh
3 months ago

There is an strange issue here. The map works fine if the Row Width is kept to 80% and Max width to default, but when I change Row Width and Max width to 100%, it stops working. It also doesn’t work when I use Full-width code module.

See the page on this URL: https://bhupagreens.com/divi-test/

Bikram Singh

The issue has been resolved. The problem was happening due to the sidebar menu links, in close mode, though we don’t see the links but those are overriding the elements from behind. That’s why when the map was in fullwidth, the map buttons moved at left side and it was being overridden by the menu links. This bit of code fixed it. It is working fine now.

.slide-in-menu-container:not(.slide-in-menu) { visibility: hidden; }
Milena
Milena
3 months ago

Good morning and thank you for your super helpful article,
I wanted to know if there was a way to set the map viewing distance, for example 2 km.

Thanks

Milena
Milena

Thanks a lot,
super interesting article!

Olivia
2 months ago

Thanks a million so handy and easy to do! I just have one problem no matter how much a mess around with the size and height it is still coming in huge in height taking over my page, have you any solutions for this?

Screenshot (34).png
Marcosa
Marcosa
2 months ago

Well done, great job

Karin
Karin
1 month ago

Amazing, thank you! Is it also possible to add pins?

Dixie L Huthmaker
Dixie L Huthmaker
2 days ago

A zillion thanks. Wrestled with Google for two days with no success. This was so easy. A trillion, zillion thanks

Shop Our Divi Products

Plugins • Courses • Templates

Visit The Shop

Divi Adventure Club Product And Course Membership by Pee Aye Creative

Become A Member!

Gain access to everything we offer!

Learn More

Divi Tutorials On YouTube

Join over 5,200 others and subscribe to our helpful Divi videos!

Visit Our Channel

Recent Posts

Pin It on Pinterest

0

Your Cart