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.
Categories: Featured Tutorials

Join subscribers on our YouTube channel and enjoy other Divi video tutorials!

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

Last updated Aug 31, 2021 @ 6:26 pm

Subscribe

Each month we send out a roundup email newsletter with the latest tutorials, product updates, helpful resources, and any other industry or personal news. Occasionally we send an extra separate email here and there if we just can’t wait! So that’s what you will get if you subscribe, and you can always unsubscribe at any time if you just can’t take it anymore 🙂

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative in the beautiful state of Pennsylvania. He loves helping small businesses, exploring outdoors, building websites with Divi, and teaching others.

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

166 Comments

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

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      Hi Keith, when you copy the code from Google Maps and then add the Code Module, you can paste it in the content area by using Control/Command + V or right click and paste.

      Reply
  2. Andy

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

    Reply
  3. Chris

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

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      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.

      Reply
  4. 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.

    Reply
  5. Brenda Kirkham

    Brilliant, worked perfectly, thank you!

    Reply
  6. Percy

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

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

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      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.

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

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

    Reply
  9. Sara

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

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      Hi Sara,
      Sure, set up the row with two columns, make it fullwidth, set your gutter to 1, and place the code module with the map in one of those columns. Hope this helps! 🙂

      Reply
  10. Tashia

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

    Reply
  11. Sahan

    Thank you sir, that is what i looking for!

    Reply
  12. 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.

    Reply
  13. 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

    Reply
  14. 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

    Reply
  15. 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.

    Reply
  16. 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

    Reply
    • Taylor

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

      Reply
  17. Adrian

    Awesome alternative, thank you sir!

    Reply
  18. 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?

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

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

  19. Anwar

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

    Reply
  20. Rodrigo Utopia

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

    Reply
  21. Dmytro

    thanks a lot, great tip!

    Reply
  22. Godwyn

    Awesome this worked 🙂 Appreciate your help towards the community

    Reply
    • Support Support

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

      Reply
  23. Andrea

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

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

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      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)

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

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

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

      Reply
  26. 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

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      Hey Stéph, that’s awesome that you found our website and the solution you needed! Be sure to look around, we have lots of Divi tutorials and products here!

      Reply
  27. Bradley Croucamp

    Worked like a dream, Thank you Nelson

    Reply
  28. David Nelson

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

    Reply
  29. Jenny

    AMAZING! Thank you! Highly appreciated.

    Reply
  30. 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.

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      Hey Phil,
      I see that too, and unfortunately I can’t seem to solve that. I’m hoping someone else sees this and offers a solutions to that bottom margin!

      Reply
  31. 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.

    Reply
  32. 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?

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      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.

      Reply
  33. Sean

    Awesome, many thanks for sharing this!!

    Reply
  34. 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

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      Hi Simon,
      You are welcome, I totally understand that! So glad you came across our post! We have a lot of other ones that solve problems, so feel free to look around!

      Reply
  35. Maria

    thousand thanks

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

    any company offering this?

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      Hi Maria,
      You are welcome! To do that, it’s the exact same method, but you have to use “Google My Maps” instead of just “Google Maps.”

      Reply
  36. 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!!

    Reply
  37. 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…

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

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

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      Hi Matt,
      Glad you found us then! We have tons of tutorials that are just like this as well as far as being out-of-the-box ideas and solutions. I’m happy it helped!

      Reply
  39. 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

    Reply
  40. 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.

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

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

        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 :/

      • Nelson Lee Miller (aka The Divi Teacher)

        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.

  42. Adrian Ramirez L.

    Hola Nelson

    Greetings from Costa Rica.

    Thanks a lot for this tutorial.

    Big time help!!!

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

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

    http://www.e-mall.id

    Reply
  44. Dick Ockers

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

    Reply
  45. 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 ?

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

  46. Niki

    Exactly what I was looking for thanks!

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

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      Hi Asha,
      I’m not really sure, the best I can tell you is set the height and width in the embed code. Could it be some other issue with the footer layout?

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

      • Erin

        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!

  48. Hendrik

    Meeeeeeeeeeeeen this is great. Thanks a lot!

    Reply
  49. Mike Jones

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

    Reply
  50. 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!

    Reply
  51. Anand Jha

    You are awesome!!!! Worked out smoothly

    Reply
  52. 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.

    https://bhupagreens.com/

    Reply
  53. 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: https://bhupagreens.com/divi-test/

    Reply
      • 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; }
        
  54. 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.

    Thanks

    Reply
      • Milena

        Thanks a lot,
        super interesting article!

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

    Reply
  56. Marcosa

    Well done, great job

    Reply
  57. Karin

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

    Reply
  58. Dixie L Huthmaker

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

    Reply
  59. maria karlsson

    Thanks a lot! It even works in Sweden 😉

    Reply
  60. Dick Ockers

    Nelson…. again, deep bow of respect!

    Reply
  61. Taylor Quate

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

    Reply
  62. Amit

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

    Reply
  63. leah

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

    Reply
  64. 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.

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

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

      Reply
  66. Natasha

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

    Reply
  67. Florencia

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

    Reply
  68. Tibor

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

    Reply
    • Hemant Gaba

      Hey Tibor,

      We are glad that the issue is resolved now.

      Reply

Submit a Comment

Your email address will not be published.

Recent Posts

0

Your Cart