Googlemaps integration

Simple integration for Googlemaps (the first script tag contains a URL string, broken here to fit on screen):

<script src="http://maps.google.com/maps?file=api&v=2&
  key=ABQIAAAAz2glLiCZA9cwx_W7F15_dxRw7z9gIfJXBTlxiGNDDGfPz8RNfRQLqNo
  3TCLFxRbVAeQCAfOmMffm1w" type="text/javascript"></script>

<script type="text/javascript">
//<![CDATA[

if (GBrowserIsCompatible()) {
  var mapAddress = new GMap2(document.getElementById("mapAddress"));
  mapAddress.setCenter(new GLatLng(geocode ref, zoom factor);
  mapAddress.addControl(new GSmallMapControl());
  var labelAddress = "<strong>Label</strong><br />Can use HTML";
  var markerAddress = new GMarker(mapAddress.getCenter());
  GEvent.addListener(markerAddress, "click", function() {
    markerAddress.openInfoWindowHtml(labelAddress);
  });
  mapAddress.addOverlay(markerAddress);
}

//]]>
</script>
  1. Place the empty mapAddress div referred to above where you want it on the page (I've cleverly/confusingly used the same name for the div and var..)
  2. The script call can go anywhere, make sure the API key is correct for the target site
  3. Apply CSS to the div for sizing, if it's smaller than 400 or so pixels wide, you'll probably want to add
div#mapAddress span {
  overflow: hidden;
}

Other notes:

Geocode coordinates look something like -37.831924,144.952658 (latitude, longitude). 13 is a fairly good zoom factor for Australian metro maps.

Each different URL (& subdomain) needs a new API key.

Posted 08 Apr 2008, tagged with javascript google api html