Let's add more functions on the SFO map example.
Opening a Info Window
To create a basic baloon-like floating "info window", call the openInfoWindow(htmlElement) method,
passing it a location and a DOM element as an argument to create a text node.
map.openInfoWindow(new GLatLng(37.622934, -122.392159),
document.createTextNode("SFO"));
or, use similar method openInfoWindowHtml(htmlString) which takes an HTML string as its argument
rather than a DOM element.
map.openInfoWindowHtml(
new GLatLng(37.622934, -122.392159), "SFO");
Opening a Info Window on Click
Simply calling these methods above just display the info windows upon loading the map.
If you want the info window opened by clicking a marker, you need to use event listeners.
The static method, GEvent.addListener takes a marker as the 1st argument,
the event as the 2nd argument, and a function as the 3rd argument.
The events provided by GMap2 Class include; click, infowindowopen and infowindowclose.
To open a info window on click, write:
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml("SFO<br/>CA 94128");
});
Finally, to give the event to the custom icon previously made,
create a new function to combine both displaying the icon and call the click event.
The function createMarker takes four arguments, latitude, longitude, icon image URL, and description (html).
In addition to the GIcon properties previously set, define
infoWindowAnchor and
infoShadowAnchor as well.
var desc_sfo ="SFO - San Francisco Intl Airport<br/>CA 94128";
var marker_sfo = createMarker(37.622934, -122.392159, "icons/sfo.png", desc_sfo);
map.addOverlay(marker_sfo);
function createMarker(lat, lng, ico, html) {
var point = new GLatLng(lat, lng);
if (ico!=null) {
var icon = new GIcon();
icon.image = ico;
icon.shadow = "http://www.google.com/mapfiles/shadow50.png";
icon.iconSize = new GSize(26, 44);
icon.shadowSize = new GSize(50, 44);
icon.iconAnchor = new GPoint(13, 44);
icon.infoWindowAnchor = new GPoint(9, 2);
icon.infoShadowAnchor = new GPoint(18, 25);
}
var marker = new GMarker(point, icon);
GEvent.addListener(marker, 'click', function() {
marker.openInfoWindowHtml(html);
});
return marker;
}
See also: Google Maps API Version 2 Reference
Anchor point of the icon is the "pointy" tip where also its shadow image originates.
In this case, the anchor point is 13 pixels over and 44 pixels down from the top-left corner of the SFO icon,
and this is defined by 
