Adding Google maps to your website is a great way to show your desired location and provide direction. It also improves your search rankings in local SEO.
When you try to add a map module any page, it will display an error message. “This page can’t load Google Maps correctly”. This is because the map module requires Google Maps API key.
To overcome this error, I will show you three simple steps to embed Google maps without API in DIVI in few clicks.
Get the embed code from Google maps.
- Navigate to maps.google.com and search for the desired location. The menu pops out from the left side, like in the image below
- Click on the share button brings up a popup with two tabs.
- Click on the Embed a map tab.
- As you can see the preview of Google maps as shown in the image. Then click on the HTML LINK button and copy the code.
Add the Embed map code to Divi
- Navigate to contact us page. Then click on enable visual builder, A Tab with three popups will show just click on the first tab i.es start building.
- Then another tab pop will show, as shown in the image just close the tab.
- Add a new section of the full-width code module.
- Then paste the HTML LINK code in the Full-width code settings. as shown in the image
Changing the map size to full width
- The default embed map code size is 450 pixel in height and 600 pixels in width. What you need to do is change the width to 100% you can also change the height of the map section as per your preference.
- Then click ok and click save option. Then exit the visual builder.
I hope you have enjoyed learning How To Embed Google maps without API in DIVI (Very Easy).