Google Map API sample
by Jean-Marc Autexier, 11/10/2005

How does it work?

First you must register at google maps API . You can register a site (URL) and will get a key which is valid for this site only (the key below is only valid for the site "http://www.autexier.de/jma/dev/maps").
Add this key to the header of your web page.

<script
 src="http://maps.google.com/maps?file=api&amp;v=1&amp;
 key=ABQIAAAAu7NbzIMgSQecXcTggP6RuRQI_AtnodQrmdZTwvTwQUTs3yHvQRQeqODtzV4cRqXYdCc7AzfhEgEJSQ"
 type="text/javascript"></script>

Now come some JavaScript woodoo ;-)

Create a GMap object  and add some controls to it. The object will be displayed on the location of your element with the name "map". Finally, center and zoom the object to your desired position.

var map = new GMap(document.getElementById("map"), [G_SATELLITE_TYPE]);
map.addControl(new GLargeMapControl ());
map.addControl(new GMapTypeControl());
map.addControl(new GScaleControl());
map.centerAndZoom(new GPoint(7.006660,49.231149), 1);

Next, create an icon. One can choose the image, the size and several other attributes (see google map API, link below).

var icon_jmau = new GIcon();
icon_jmau.image = "http://www.autexier.de/jmau/jmau5.png";
icon_jmau.iconSize = new GSize(40, 50);
icon_jmau.iconAnchor = new GPoint(6, 20);
icon_jmau.infoWindowAnchor = new GPoint(5, 1);

When the marker is clicked, we want an overlay to display some text. For this, we create a marker at the same position than the icon and add it as overlay to the map. A click event is registered and the text is displayed.

function createMarker(point,name,icon) {
var marker = new GMarker(point, icon);
map.addOverlay(marker);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(name);
});
}
createMarker(new GPoint(7.006660, 49.231149),"<b>test</b>Jean-Marc Autexier, Saarbrücken", icon_jmau);

Google Map API: http://maps.google.com/apis/maps/documentation