How to embed a Google Map into the Surefire content management system


Ok so if you have read our blog article “How to embed a YouTube video into the Surefire content management system” then you are going to realise this blog article is a complete ripoff of that!


On the positive side, you will pretty much know how to do this already!


Putting a Google Map into a page on your website using the Surefire Design content management system isn’t particularly difficult, but you need to take a little care…


Here is the Google Specific part-


Browse to Google Maps – and search for the address you want…


At the top right of the Google Maps page is a link called ‘Link’. Click on this.

link link


A popup will appear. On this popup, click the link that says “Customise and preview embedded map”.

link popup


The popup window that results, will let you select a size, or type in a custom size. Change the zoom settings, choose the map type – street, satellite, terrain. Even drag the map to the position you want.

map customise popup


Once you have set your custom settings, copy everything in the box in step 3. Select everything in the box and right click copy, or ctrl C. This is the code you will paste into the editor.


Then the Surefire part-


Open the page in the WebStart editor.


In the spot where you want to put the map, type something you will recognise… personally I type *******.

stars in text


Then click on the ‘Source’ button on the toolbar. This will show you the actual html code for the page.


source button


VERY CAREFULLY look through the html code for the ******* you typed. Delete the *s and making sure the cursor is in the right place, right click and select paste. This will drop in the code you copied from Google Maps.


stars in source code

map code in source code


Press the ‘Source’ button again to get back to the usual view. You should see the map embedded in the content now! If it isn’t… do NOT save the page. Go out and start again.


map showing in the editor