The Klixo CMS allows you to add a Google map to your website in just a few minutes. There are two ways to do this, simple and advanced. Before reading the instructions below, it is important to note that while the Google Map service is currently free, Google reserve the right to add advertising to your map or start charging for it in the future (after giving you some notice). Always read the terms and conditions carefully.

Simple: Save the Google (IFRAME) source code in Klixo

This is great for a quick and easy map on your website. There are some disadvantages though:

• The map will only work for addresses that Google Maps knows or understands
• The map will only show the address details (no Title or thumbnail for example)
• You cannot set a zoom level

These shortcomings can be fixed using the Advanced option below, but for most uses, this simpler option is fine:

1. Go to Google Maps: http://maps.google.co.nz/
2. Search Maps for the address that you would like to display in the map, e.g. "32 Boon St, Whakatane, NZ"
   1. TIP: Always append the country to the end of the address to make it easy for Google Maps to find it
   2. Keep refining your search until Google has correctly located the address
3. Choose the View mode, i.e. "Map", "Satellite" or "Terrain"
4. Copy the HTML to embed in website. You can also customise and preview the embedded map before you customise the HTML
5. Log in to Klixo
6. Create or edit a story to contain the Map using the Beta Story Editor
7. Click the "Body Source" option
8. Paste the HTML code that you copied in step 4 above
9. Click the "Body Design" option
10. Verify that the map is correctly positioned and looking good
11. When you are happy, click Save to publish the map on your website!

 Here is an example of the map displayed as an IFRAME: 

View Larger Map

Advanced: Add the Google Map code to a Klixo XSL template

Below is a step by step guide to adding your Google map to a Klixo XSL Template:

1. Sign Up for a Google Map API Key
   • Go to this page http://www.google.com/apis/maps/signup.html and insert the URL of the website you would like to have a map on.
   • Click the "Generate API Key" button
2. Copy out your Key - store this somewhere along with your websites other details.
3. Add your key to the following script call in the head of your template:

   • <script src="http://maps.google.com/maps?file=api&amp;v=2.x&amp;key=(INSERT KEY HERE WITHOUT BRACKETS)" type="text/javascript"/>

4. You will also need to link to copy map.js onto your FTP server and call it from your template - you can aquire this file from Klixo support on request.
   <script type="text/javascript" language="javascript" src="js/map.js"/>

5. Call the "showAddress();" function in the "onload" field of the body tag in your template.

6. Put in a hidden field that contains the Google longditude and latitude fields or value

   • <input type="hidden" id="oGLatLng" value="-37.97804163283632,176.9835662841797"/>

   • You can get this data using the fantastic Klixo picker http://klixo.net.nz/klixo/picker.html

7. Add the Div that will contain the map in the template where you would like it to display - see example below:

   • <div id="location">
     <div id="map" style="width: 516px; height: 300px;"/>
     <div id="info" style="display:none;">
     {Put address information here / clients name/business name}
     </div>
     </div>
     </div>
8. Add the css for the div with the id of "location" - this has to contain a position for the object and this should be set as relative, you can also style the div as you would like i.e add a border.
   • div#location
     {
      position: relative;
     }

This should be a good enough guide to get you started with a basic Google map on your website, there are a lot more options and features you can use for these maps and perhaps there will be an advanced version of this article at a later stage.