Google

Adding a Google Map to your page

What we are trying to achieve

Google

  1. Find the postcode for the location
  2. Go to http://www.google.com/webelements/maps/
  3. Enter the postcode in the "Marker Address" box
  4. Tab or click in the box below and the map should appear. You can zoom in or out using the + and - icons
  5. Under the map is a box with the code. Copy all of it.

Codeblock

Then on the page on your site type the following. It is called a codeblock and the !— —] are comment tags that prevent the codeblock being visible on the page.

[!--
[[code type="html"]]

[[/code]]
--]

Paste the code from google into the space.

The result will look like this:

[!--
[[code type="html"]]

<!-- Google Maps Element Code -->
<iframe frameborder="0" marginwidth="0" marginheight="0" border="0" style="border:0;margin:0;width:500px;height:375px;" src="http://www.google.com/uds/modules/elements/mapselement/iframe.html?maptype=roadmap&amp;latlng=56.21304%2C-3.513648&amp;mlatlng=56.21304%2C-3.513648&amp;maddress1=Kinross%2C%20Kinross-Shire%20KY13%200NS&amp;maddress2=UK&amp;zoom=12&amp;mtitle=Kinross%2C%20Kinross-Shire%20KY13%200NS" scrolling="no" allowtransparency="true"></iframe>

[[/code]]
--]

iframe

Then add an iframe that refers to the codeblock using the address of the page where the codeblock is in place of PAGE:

[[iframe http://www.fossoway.org/PAGE/code/1 width="500" height="375" scrolling="no" frameborder="0"]]

The /code/1 is there to tell the iframe which codeblock on your page to look at. If it's the first or only codeblock use /code/1, if it's the second then use /code/2 and so on.

So on the dates page the iframe would look like this:

[[iframe http://www.fossoway.org/dcc:dates/code/1 width="500" height="375" scrolling="no" frameborder="0"]]

To center the map on the page wrap it in div tags as follows:

[[div style="text-align: center;"]]
[[iframe http://fossowaydev.wikidot.com/dcc:dates/code/1 frameborder="0" scrolling="no" width="500px" height="37px"]]
[[/div]]