Embed Maps from Google Maps

Embedding Google Maps

It’s possible to embed Google Maps on a modular page to demonstrate the location of one of your businesses sites, or the location of a company event. As with all embedding of external web content, this is done using the HTML module on a Page.

Start by navigating to https://maps.google.com and searching for the location or area that you require:

Now on the menu on the left, click on ‘Share’

 

 

 

 

 

 

 

 

In the box that pops up, select the ‘Embed Map’ Tab, then copy the embed code:

 

 

 

 

 

 

 

 

 

Open Notepad, then paste the embed code in to Notepad:

 

 

Now delete everything apart from the link (everything before https and everything after the link itself – as highlighted below)

 

 

Leave that aside for now, and copy the following HTML code in to an HTML module on your page in the CMS:

<!DOCTYPE HTML>
<html>
<head>
<title>Map</title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<style>body { margin: 0; }</style><style>
.tabweb-container
{ overflow:scroll; }
</style></head>
<body>
<div
class="tabweb-container"><iframe
src="MAP EMBED LINK GOES HERE"
width="100%" height="500px"
frameborder="0" sandbox="allow-same-origin allow-scripts allow-popups allow-forms"></iframe></div>

</body>
</html>

Now copy your link from Notepad in to the HTML code in the CMS, where MAP LINK GOES HERE is highlighted in red above. Ensure that you copy your link within the speech marks.

The HTML module on your page should look as follows:

 

 

 

 

 

 

 

 

Now click save and publish to see your map embedded on the page in your app: