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”>

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.

Join Our NEW Divi Facebook Group!

The Divi Teacher Logo

Related Posts

Leave A Response!

73
Leave a Reply

avatar
  Subscribe  
newest oldest most voted
Notify of
Keith Smart

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

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

Chris

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

wadnner cortez

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

Brilliant, worked perfectly, thank you!

Percy

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

Karin Melbye

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?

John
John

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

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

Tashia
Tashia

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

Sahan
Sahan

Thank you sir, that is what i looking for!

kreemz

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

Thank you very much

Rikke

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

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

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

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

Awesome alternative, thank you sir!

Tim
Tim

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

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

Rodrigo Utopia

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

Dmytro
Dmytro

thanks a lot, great tip!

Godwyn

Awesome this worked 🙂 Appreciate your help towards the community

Support Support
Support Support

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

Andrea

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

Davide Corizzo

Great tutorial! 👏🏻👏🏻👏🏻

greg T

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).

Michelle Wong
Michelle Wong

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

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

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

Worked like a dream, Thank you Nelson

David Nelson

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

Jenny
Jenny

AMAZING! Thank you! Highly appreciated.

Phil Ward
Phil Ward

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

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

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

Awesome, many thanks for sharing this!!

Shop Our Divi Products!

Child Themes • Plugins • Layouts

Visit The Shop

Divi Tutorials On YouTube

Subscribe to our helpful Divi videos!

Visit Our Channel

Pin It on Pinterest

0

Your Cart