WebsiteX5.info - The ultimate guide for Incomedia's WebsiteX5

This page describes how to add Google Maps to your pages using WebsiteX5 Evolutin 8. For version 7 users there is a separate page..



You want to show maps on your site? This article describes how you can add Google Maps to your site in a basic way. There are also some advanced techniques. If you want to develop special applications with Google Maps please refer to the Google maps documentation.

Step 1. Get your Google maps API-key
First of all you have to sign up for a Google maps API-key. You also have to have a Google account. Go to http://code.google.com/apis/maps/signup.html to get a key for your website. This key only works for one top-level domain e.g. www.yoursite.com. However you can use it also to develop your site.


Step 2. Edit the page properties
Go to WX5 and select (not open!) the page on which you want to display a map in the 'Map Creation' dialog. Click on the 'Page properties button' (the last button on the toolbar).




Select the 'Advanced-tab' and enter the following code in the field 'Code to add in the page HEAD':

<SCRIPT src="http://maps.google.com/maps?file=api&v=2&key=YOUR API KEY" type="text/javascript">
</SCRIPT>

And into the last field of this dialog enter the text

onload="load()" onunload="GUnload()

Your dialog now looks like:



Of course you have to change YOUR API KEY into the string you have received from Google...

Then click on [OK]

Step 3. Add the Google maps code to your webpage
Add a HTML-object on your page. Open it and add the following code in the HTML-object:

<DIV id="map" style="width:100%; height:100%; position:absolute; left:0px; top:0px; z-index:1;">
</DIV>

<script type="text/javascript">

function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallZoomControl());
map.setCenter(new GLatLng(<lat>, <lng>), <zoomlevel);
map.open;
var marker = new GMarker(map.getCenter());
map.addOverlay(marker);
}
}
</script>

N.B. Note that the code to load the map has been moved to the page properites-dialog!

You can find the correct center and zoom level for your map in the Google Maps Helper page. Users of the Internet Explorer are in for a special treat..

Change the 'html object height' to suit your needs and then click on [OK].

Test the page...