Subscribe On YouTube

Join other subscribers and enjoy other Divi video tutorials!

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

Nelson Miller Profile Orange
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.

▶️ Please watch the video above to get all the exciting details! 👆

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

Categories: Tutorials

Subscribe For More Things Like This!

At the start of each month, we send out a recap newsletter from the month before with family news, Divi news, our latest tutorials, and product news. Occasionally, if the news is too exciting to wait, we will send out another email separate from the monthly newsletter. That’s what you get when you subscribe, and of course you can unsubscribe if you are no longer interested!

Blog Post Optin

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy


Comments By Others

  1. Dougi Son

    Using Divi Elegant Themes and it doesn’t work. Works fine on Elementor. Divi is getting buggy and not able to embed maps anymore, whether frontend or backend. I hope they fix it soon.

  2. Marin

    Hi Nelson,

    thank you for the hint. It really helped me a lot. The only thing what I´ve done differently is, not to put the code module in a row. Instead I have created it directly in the full width section. But now there is a tiny gap between the map section and the next one which I cannot figure out how to solve it. Is this the reason why you described it that way and created a row upfront? Thanks and best regards.

    • Hemant Gaba

      Hello Marin!

      I’m not entirely sure what’s causing the problem. Could you please share the URL of the page for me so I can check it?

  3. Kim

    Thank you SOOOO much!
    I’ve been cursing every time a client wanted a Google maps module in a page but this is such a perfect solution!
    I can’t thank you enough for putting in the effort and time to show this.

    • Hemant Gaba

      You are most welcome Kim!

      We are glad to know that our guide helped you in some way. Stay tuned for more such guides.

  4. Malcolm


    I have embedded code into the correct place and the map is fine, but is there a way to disable automatic scrolling when trying to scroll the page up and down with the mouse wheel?

    I created the map in Google Maps as we needed to add a work location so maybe that has something to do with it. The map looks different to normal as it has a bar across the top of the map for sharing or making full screen etc. I don’t really want to see that.

    1: Any ideas how to stop automatic scrolling using the mouse wheel?
    2: Any ideas how to hide that bar

  5. Tibor

    Thanks a lot! It solved ny problem in 5 minutes.
    “Still crazy after all this years” 🙂

    • Hemant Gaba

      Hey Tibor,

      We are glad that the issue is resolved now.

  6. Florencia

    Great! Just what I was looking for. Any idea how I can add an overlay to it?

  7. Natasha

    YEEESSSS! So glad to be able to add a Google map without messing with API’s!

  8. Tim Corcoran

    Thanks for the tutorial! Do you know how I could make my map appear with “Terrain” selected by default? Thanks in advance! -Tim

    • Hemant Gaba

      Hey Tim,

      On the URL provided, I saw that you are using Divi Map Module so if you go to Map Module Settings, you can add a pin to any location that you want to highlight.

  9. Jim

    Wow! Worked on the map module all day yesterday, late last night, and then again this morning. So glad I found your post in the forum. I had my full-width map in about 1 minute. Thank you, sir.

  10. leah

    Just want to say thank you. That error code was driving me crazy.

  11. Amit

    Great Post.. A zillion thanks dear..
    You saved my day..

  12. Taylor Quate

    Hi Nelson. Is it possible to disable the address bubble?

  13. Dick Ockers

    Nelson…. again, deep bow of respect!

  14. maria karlsson

    Thanks a lot! It even works in Sweden 😉

  15. Dixie L Huthmaker

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

  16. Karin

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

  17. Marcosa

    Well done, great job

  18. Olivia

    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?

  19. Milena

    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.


      • Milena

        Thanks a lot,
        super interesting article!

  20. Bikram Singh

    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:

      • 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; }
  21. Bikram Singh

    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.

  22. Anand Jha

    You are awesome!!!! Worked out smoothly

  23. Alicia

    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!

  24. Mike Jones

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

  25. Hendrik

    Meeeeeeeeeeeeen this is great. Thanks a lot!

  26. Asha

    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?

      • Erin <span class="comment-author-role-label"><a href="" class="comment-author-role-link" rel="external nofollow" target="_blank">Divi Adventure Club Member</a></span>

        I also had an issue with the height of the map after saving. I also had SMUSH installed. After deactivating the plugin, the map stays at the proper height. Thank you for keeping the comments open!

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

      • Amit Suvarna

        Ma’am IT IS THE SMUSH plugin. Thank you so much. And Thank you Nelson for keeping the comments open for a wide variety of use cases to learn from!

  27. Niki

    Exactly what I was looking for thanks!

  28. Edgar

    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

        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.

  29. Dick Ockers

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

  30. arnoldus

    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

  31. Adrian Ramirez L.

    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.

  32. Kamil

    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

        Yeah Sure,

        This is the code:

        <iframe src=”!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: 

        Maybe I’m doing something wrong ? 

        Thank you for looking it up for me 😊


        I replied as well on the e-mail.

      • Nelson Lee Miller (aka The Divi Teacher) <span class="comment-author-role-label author-label">Author</span>

        That code works perfectly fine for me. I did have to update all the quotation marks because they were messed up.

      • James

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

      • Vincent Palermo

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

      • Amit Suvarna

        Interesting. I have run into the same issue! in fact, it looks fine on the page builder. As soon as I exit Visual Builder the issue shows up. I haven’t found the reason yet :/

  33. Jesper Homann

    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.

  34. Andreas

    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

  35. Matt

    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!

  36. P L

    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

        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.

  37. Tess

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

  38. Maria

    thousand thanks

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

    any company offering this?

  39. Simon

    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

  40. Sean

    Awesome, many thanks for sharing this!!

  41. 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?

    • Nelson Lee Miller (aka The Divi Teacher) <span class="comment-author-role-label author-label">Author</span>

      Hi Moira,
      Yes it actually is possible, but you have set up “Google My Maps” and add your locations, then follow the embed instructions here. As for the zoom, I’m not sure, but can you try changing the zoom level in the map before you copy the embed code? I also heard it was possible using some parameters in the code such as zoom=9, but I haven’t had a chance to explore that.

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

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

  44. Jenny

    AMAZING! Thank you! Highly appreciated.

  45. David Nelson

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

  46. Bradley Croucamp

    Worked like a dream, Thank you Nelson

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

  48. 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?


    • Nelson Lee Miller

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

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

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

    • Nelson Lee Miller (aka The Divi Teacher) <span class="comment-author-role-label author-label">Author</span>

      Hey Greg Travnicek, this just started today August 28th, 2019. I’m sure it will be fixed by Google soon. 🙂 Meanwhile, just add this to your Theme Options>Integrations>head: (less than sign) meta http-equiv=”Content-Security-Policy” content=”upgrade-insecure-requests” (greater than sign)

      • 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!

  50. Andrea

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

  51. Godwyn

    Awesome this worked 🙂 Appreciate your help towards the community

    • Support Support

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

  52. Dmytro

    thanks a lot, great tip!

  53. Rodrigo Utopia

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

  54. Anwar

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

  55. 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 and asking them to increase the following PHP variables may help: memory_limit, max_execution_time, upload_max_filesize, post_max_size, max_input_time, max_input_vars. In addition, auditing your firewall error log (such as ModSecurity) may reveal false positives that are preventing saves from completing.

    Lastly, it is recommended that you temporarily disable all WordPress plugins and browser extensions and try to save again to determine if something is causing a conflict.”

    Any ideas for how to solve this?

    • Irina

      Hey Tim! Were you able to figure out how to fix it? I keep getting the same error and can’t figure out what’s wrong.

      • Hemant Gaba

        Hi Irina
        There are two things that majorly cause this kind of issue:
        1. Please go to the WordPress Dashboard > Divi > Support > System Status. If under the System Status you are not getting this message which says “Congratulations, all system checks have passed. Your hosting configuration is compatible with Divi.” then you need to contact your server host regarding the configurations which are not up to the mark.
        2. Mod Securities can also be the issue as sometimes the Divi jQuery calls are considered as the threat and that is why it gets blocked by the mod securities so in this case as well you need to contact the server host and you need to tell him to close the mod securities.

        Whenever you are getting this kind of issue like while saving or while importing or exporting you can immediately open the console of your browser to check what error is present in the console and you can show that error to your host and the host will guide you in the right way.

        Please let us know how it goes. 🙂

  56. Adrian

    Awesome alternative, thank you sir!

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

    • Taylor

      Hi Amanda, did you ever find an answer to this? Thanks

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

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

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

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

  62. Sahan

    Thank you sir, that is what i looking for!

  63. Tashia

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

  64. Sara

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

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

  66. 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?

    • Nelson Lee Miller (aka The Divi Teacher) <span class="comment-author-role-label author-label">Author</span>

      Hi Karin,
      Glad this was helpful to you in clearing up the problem! Actually yes, there is an easy to way to add multiple pins, and I have considered updating the article. Instead of using the regular Google Maps website, go to “Google My Maps” instead. At that point you can make your pins and embed the map just like the regular one. As for changing the pin, I havn’t found a way to do that.

      • 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!

  67. Percy

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

  68. Brenda Kirkham

    Brilliant, worked perfectly, thank you!

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

  70. Chris

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

    • Nelson Lee Miller (aka The Divi Teacher) <span class="comment-author-role-label author-label">Author</span>

      Hi Chris, it’s on the map in the top left corner with the other information it it pulling from Google maps. I think sometimes the mobile views gets simplified, which is maybe why you couldn’t see it.

  71. Andy

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

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


Submit a Comment

Your email address will not be published. Required fields are marked *

Recent Posts


Your Cart