WebsiteX5.info - The ultimate guide for Incomedia's WebsiteX5
Add Google Maps to your WebsiteX5 pages
How to... > Google maps
This page describes how to add Google Maps on your site using version 7 of WebsiteX5 Evolution. For version 8 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. Change the body-tag in your template
Find the template your are using. Go to the Style Template Selection-dialog of WX5. In the tree you can see the template name. For example, this website uses the template 'Simpe lines' and Vertical menu's. The index.html-file will be in the directory
C:\Program Files\WebSite X5 Evolution\Models\Simple lines\Ver
Edit the file index.html in this directory (Windows Notepad will be fine)
Change the html-tag <body> to <body onunload="GUnload();">
This will free any memory Google has used.
Save the file.
Step 3. Add the Google key to your page
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:
<SCRIPT src="http://maps.google.com/maps?file=api&v=2&key=<YOUR API KEY>" type="text/javascript">
</SCRIPT>
Your dialog looks like:
Of course you have to change <YOUR API KEY> into the string you have received from Google...
Then click on [OK]
It is possible to add this code to the <head>-section of the index.html-file which comes with your template. However because the Google website is accessed with every pageload each page, even if it hasn't got a map on it will a little bit slower.
Step 4. 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);
}
}
if (navigator.appName == "Netscape") {
setTimeout("load()", 500);
}
else {
load();
}
</script>
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...