Getting help

Google Maps API Tutorial

There’s lots more info at the Mapki

You can search the Google Group for similar problems

You can also ask for help there but if you do, please post a link to your page where you’re having problems, that will vastly increase your chances of getting useful assistance. Avoid posting large chunks of Javascript code to the group, links to web pages are much preferred, since we can immediately run our Javascript debugging tools on them.

Advertisements

Problem solving

Google Maps API Tutorial

When your page doesn’t work, the first thing to do is look to see if there are any Javascript errors reported.
In Firefox, launch the “Javascript Console” from the “Tools” menu.
In IE, double-click on the error icon in the status bar.
The error messages can often provide clues to what’s gone wrong

Don’t forget to check the “potential pitfalls” associated with each of these tutorial sections.

Resources

Google Maps API Tutorial

How GLayers Work

When you add GLayer()s to your map, the API creates something like a GTileLayerOverlay() onto the G_MAP_OVERLAY_LAYER_PANE (pane 1).

The images on the layer are not individual icons, they’re painted onto tiles. The tiles look like this:

and have URLs like:
http://mlt3.google.com/mapslt?lyrs=lmc:panoramio&x=2013&y=1318&z=12&w=256&h=256
http://mlt3.google.com/mapslt?lyrs=lmc:youtube&x=2013&y=1318&z=12&w=256&h=256
http://mlt3.google.com/mapslt?lyrs=lmc:wikipedia_en&x=2013&y=1318&z=12&w=256&h=256

If you have more than one GLayer() on your map, there’s still only one layer of tiles. The different types of content are all assembled onto the same set of tiles, like this:

with URLs like:
http://mlt1.google.com/mapslt?lyrs=lmc:panoramio,lmc:wikipedia_en,lmc:youtube&x=2013&y=1316&z=12&w=256&h=256

The order in which you addOverlay the GLayers onto the map controls the order in which the LMCs appear in the URL. The order of the LMCs within the URL controls the order in which the images overlap. In the above example, the panoramio images are on the bottom, then the wikipedia images, and the youtube images are on the top.

The tiles are normally palletized PNG files with 8 bits per pixel, if the beowser is MSIE they will be full colour PNG files with 32 bits per pixel. I guess that the API chooses the smaller 8-bit images if the browser environment supports it.

Clicks

GLayer()s reside below all other clickable overlays. Polygons and polylines reside on thge same pane, but at a higher z-index value. All other clickable overlays reside in higher panes.

If there’s a clickable overlay covering a particular point, then a click at that point will be grabbed by that overlay, and won’t reach the GLayer(). So, if you want the GLayer() to be clicked when below a semitransparent GPOlygon, you’ll need to make that GPolygon unclickable by using {clickable:false}

When the user clicks on a GLayer icon, the click does not trigger a map “click” event.

When the user right-clicks on the map while a GLayer() is present, the details returned by the “singlerightclick” event are those of the GLayer(), not those of the map.

As well as the images, the API receives information about the positions of the hot spots, which it uses for changing the cursor when you hover over a hot spot. This information is not accessible.

There doesn’t appear to be any way to programmatically trigger a click on a GLayer hot spot.

LMCs

All possible layers are identified by an LMC. The documented layers also have IDs. You can use either an ID or an LMC when you create your GLayer. E.g. GLayer(“lmc:panoramio/0”) is the same thing as GLayer(“com.panoramio.popular”). It’s a good idea to use the ID whenever you’re adding a documented layer, because Google just might change the details of undocumented features.

Resources

Google Maps API Tutorial

How It Works – Looking Inside the Dynamic HTML

The API Javascript is an engine that takes commands in the form of Javascript Method calls,
and manipulates a dynamic HTML element, the map container div.

I took a snapshot of the structure of the dynamic HTML of a simple page in Firefox.
I’ve saved a copy of the raw, uncommented, HTML code here
The page from which the snapshot was taken looks like this

The HTML would be slightly different in different browsers.
The API Javascript generates different HTML so that, as far as possible, the results look the same when displayed in those browsers.

I switched off SVG on the map, so that the polyline appears in the dynamic HTML.
With SVG enabled, the polyline doesn’t use any HTML.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"><title>Google Maps</title>
</head>
    <link rel="stylesheet" type="text/css" href="noprint.css" title="Frame" media="print">
    <link rel="stylesheet" type="text/css" href="noscreen.css" title="Frame" media="screen">
<body>

This is the start of the map container div

<div id="map" style="width: 550px; height: 450px; position: relative; background-color: rgb(229, 227, 223);">

This is the start of the div that contains everything that moves as the map pans.
It contains the map tiles, markers, polylines, info windows and shadows.

  <div style="overflow: hidden; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;">
    <div style="position: absolute; left: 0px; top: 0px; z-index: 0; cursor: url(http://www.google.com/intl/en_ALL/mapfiles/openhand.cur), default;">
      <div style="position: absolute; left: 0px; top: 0px; display: none;">
        <div style="position: absolute; left: 0px; top: 0px; z-index: 0;">
          <img src="http://www.google.com/intl/en_ALL/mapfiles/transparent.png" style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: 0px; top: 0px; width: 256px; height: 256px; -moz-user-select: none;">
          <img src="http://www.google.com/intl/en_ALL/mapfiles/transparent.png" style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: 0px; top: 0px; width: 256px; height: 256px; -moz-user-select: none;">
          <img src="http://www.google.com/intl/en_ALL/mapfiles/transparent.png" style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: 0px; top: 0px; width: 256px; height: 256px; -moz-user-select: none;">
          <img src="http://www.google.com/intl/en_ALL/mapfiles/transparent.png" style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: 0px; top: 0px; width: 256px; height: 256px; -moz-user-select: none;">
          <img src="http://www.google.com/intl/en_ALL/mapfiles/transparent.png" style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: 0px; top: 0px; width: 256px; height: 256px; -moz-user-select: none;">
          <img src="http://www.google.com/intl/en_ALL/mapfiles/transparent.png" style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: 0px; top: 0px; width: 256px; height: 256px; -moz-user-select: none;">
          <img src="http://www.google.com/intl/en_ALL/mapfiles/transparent.png" style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: 0px; top: 0px; width: 256px; height: 256px; -moz-user-select: none;">
          <img src="http://www.google.com/intl/en_ALL/mapfiles/transparent.png" style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: 0px; top: 0px; width: 256px; height: 256px; -moz-user-select: none;">
          <img src="http://www.google.com/intl/en_ALL/mapfiles/transparent.png" style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: 0px; top: 0px; width: 256px; height: 256px; -moz-user-select: none;">
          <img src="http://www.google.com/intl/en_ALL/mapfiles/transparent.png" style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: 0px; top: 0px; width: 256px; height: 256px; -moz-user-select: none;">
          <img src="http://www.google.com/intl/en_ALL/mapfiles/transparent.png" style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: 0px; top: 0px; width: 256px; height: 256px; -moz-user-select: none;">
          <img src="http://www.google.com/intl/en_ALL/mapfiles/transparent.png" style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: 0px; top: 0px; width: 256px; height: 256px; -moz-user-select: none;">
          <img src="http://www.google.com/intl/en_ALL/mapfiles/transparent.png" style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: 0px; top: 0px; width: 256px; height: 256px; -moz-user-select: none;">
          <img src="http://www.google.com/intl/en_ALL/mapfiles/transparent.png" style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: 0px; top: 0px; width: 256px; height: 256px; -moz-user-select: none;">
          <img src="http://www.google.com/intl/en_ALL/mapfiles/transparent.png" style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: 0px; top: 0px; width: 256px; height: 256px; -moz-user-select: none;">
          <img src="http://www.google.com/intl/en_ALL/mapfiles/transparent.png" style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: 0px; top: 0px; width: 256px; height: 256px; -moz-user-select: none;">
          <img src="http://www.google.com/intl/en_ALL/mapfiles/transparent.png" style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: 0px; top: 0px; width: 256px; height: 256px; -moz-user-select: none;">
          <img src="http://www.google.com/intl/en_ALL/mapfiles/transparent.png" style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: 0px; top: 0px; width: 256px; height: 256px; -moz-user-select: none;">
          <img src="http://www.google.com/intl/en_ALL/mapfiles/transparent.png" style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: 0px; top: 0px; width: 256px; height: 256px; -moz-user-select: none;">
          <img src="http://www.google.com/intl/en_ALL/mapfiles/transparent.png" style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: 0px; top: 0px; width: 256px; height: 256px; -moz-user-select: none;">
        </div>
      </div>

This contains the map tile images.

      <div style="position: absolute; left: 0px; top: 0px;">
        <div style="position: absolute; left: 0px; top: 0px; z-index: 0;">
          <img src="http://mt2.google.com/mt?n=404&v=ap.41&x=70&y=92&zoom=9" style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: -191px; top: -304px; width: 256px; height: 256px; -moz-user-select: none;">
          <img src="http://mt3.google.com/mt?n=404&v=ap.41&x=70&y=93&zoom=9" style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: -191px; top: -48px; width: 256px; height: 256px; -moz-user-select: none;">
          <img src="http://mt0.google.com/mt?n=404&v=ap.41&x=70&y=94&zoom=9" style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: -191px; top: 208px; width: 256px; height: 256px; -moz-user-select: none;">
          <img src="http://mt1.google.com/mt?n=404&v=ap.41&x=70&y=95&zoom=9" style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: -191px; top: 464px; width: 256px; height: 256px; -moz-user-select: none;">
          <img src="http://mt3.google.com/mt?n=404&v=ap.41&x=71&y=92&zoom=9" style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: 65px; top: -304px; width: 256px; height: 256px; -moz-user-select: none;">
          <img src="http://mt0.google.com/mt?n=404&v=ap.41&x=71&y=93&zoom=9" style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: 65px; top: -48px; width: 256px; height: 256px; -moz-user-select: none;">
          <img src="http://mt1.google.com/mt?n=404&v=ap.41&x=71&y=94&zoom=9" style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: 65px; top: 208px; width: 256px; height: 256px; -moz-user-select: none;">
          <img src="http://mt2.google.com/mt?n=404&v=ap.41&x=71&y=95&zoom=9" style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: 65px; top: 464px; width: 256px; height: 256px; -moz-user-select: none;">
          <img src="http://mt0.google.com/mt?n=404&v=ap.41&x=72&y=92&zoom=9" style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: 321px; top: -304px; width: 256px; height: 256px; -moz-user-select: none;">
          <img src="http://mt1.google.com/mt?n=404&v=ap.41&x=72&y=93&zoom=9" style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: 321px; top: -48px; width: 256px; height: 256px; -moz-user-select: none;">
          <img src="http://mt2.google.com/mt?n=404&v=ap.41&x=72&y=94&zoom=9" style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: 321px; top: 208px; width: 256px; height: 256px; -moz-user-select: none;">
          <img src="http://mt3.google.com/mt?n=404&v=ap.41&x=72&y=95&zoom=9" style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: 321px; top: 464px; width: 256px; height: 256px; -moz-user-select: none;">
          <img src="http://mt1.google.com/mt?n=404&v=ap.41&x=73&y=92&zoom=9" style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: 577px; top: -304px; width: 256px; height: 256px; -moz-user-select: none;">
          <img src="http://mt2.google.com/mt?n=404&v=ap.41&x=73&y=93&zoom=9" style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: 577px; top: -48px; width: 256px; height: 256px; -moz-user-select: none;">
          <img src="http://mt3.google.com/mt?n=404&v=ap.41&x=73&y=94&zoom=9" style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: 577px; top: 208px; width: 256px; height: 256px; -moz-user-select: none;">
          <img src="http://mt0.google.com/mt?n=404&v=ap.41&x=73&y=95&zoom=9" style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: 577px; top: 464px; width: 256px; height: 256px; -moz-user-select: none;">
          <img src="http://mt2.google.com/mt?n=404&v=ap.41&x=74&y=92&zoom=9" style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: 833px; top: -304px; width: 256px; height: 256px; -moz-user-select: none;">
          <img src="http://mt3.google.com/mt?n=404&v=ap.41&x=74&y=93&zoom=9" style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: 833px; top: -48px; width: 256px; height: 256px; -moz-user-select: none;">
          <img src="http://mt0.google.com/mt?n=404&v=ap.41&x=74&y=94&zoom=9" style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: 833px; top: 208px; width: 256px; height: 256px; -moz-user-select: none;">
          <img src="http://mt1.google.com/mt?n=404&v=ap.41&x=74&y=95&zoom=9" style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: 833px; top: 464px; width: 256px; height: 256px; -moz-user-select: none;">
        </div>
      </div>

This is G_MAP_MAP_PANE, pane number 0.
In earlier versions, the map tiles were in this pane, but now they have their own layer below the panes.

      <div style="position: absolute; left: 0px; top: 0px; z-index: 100;">
      </div>

This is the unnamed pane number 1.
It contains the polyline image.

      <div style="position: absolute; left: 0px; top: 0px; z-index: 101;">
        <img src="http://mt.google.com/mld?width=193&height=10&path=IImJ?%7DoR&color=0,0,255,140.25&weight=5" style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: 179px; top: 245px; -moz-user-select: none; z-index: 1000;">
      </div>

This is G_MAP_MARKER_SHADOW_PANE, pane number 2
It contains the marker shadow images.

      <div style="position: absolute; left: 0px; top: 0px; z-index: 102;">
        <img src="http://www.google.com/intl/en_ALL/mapfiles/shadow50.png" style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: 266px; top: 191px; width: 37px; height: 34px; -moz-user-select: none; z-index: -4300000;">
      </div>

This is unnamed pane number 3

      <div style="position: absolute; left: 0px; top: 0px; z-index: 103;">
      </div>

This is G_MAP_MARKER_PANE, pane number 4
It contains the marker images.
Each marker is listed twice, once using the PNG image to be displayed on the screen.
Once using the GIF image to be printed.

      <div style="position: absolute; left: 0px; top: 0px; z-index: 104; cursor: default;">
        <img src="http://www.google.com/intl/en_ALL/mapfiles/marker.png" style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: 266px; top: 191px; width: 20px; height: 34px; -moz-user-select: none; z-index: -4300000;">
        <img src="http://www.google.com/intl/en_ALL/mapfiles/markerff.gif" style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: 266px; top: 191px; width: 20px; height: 34px; -moz-user-select: none; z-index: -4300000;">
      </div>

This is G_MAP_FLOAT_SHADOW_PANE, pane number 5
It contains the info window shadow image.
As you can see, the info window graphics are quite complicated.

      <div style="position: absolute; left: 0px; top: 0px; z-index: 105;">
        <div style="position: absolute; left: 219px; top: 118px; z-index: -4300000;">
          <div style="overflow: hidden; width: 70px; height: 30px; position: absolute; left: 29px; top: 0px;">
            <img src="http://www.google.com/intl/en_ALL/mapfiles/iws2.png" style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: 0px; top: 0px; width: 1044px; height: 370px; -moz-user-select: none;">
          </div>
          <div style="overflow: hidden; width: 70px; height: 30px; position: absolute; left: 258px; top: 0px;">
            <img src="http://www.google.com/intl/en_ALL/mapfiles/iws2.png" style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: -710px; top: 0px; width: 1044px; height: 370px; -moz-user-select: none;">
          </div>
          <div style="overflow: hidden; width: 70px; height: 60px; position: absolute; left: 0px; top: 30px;">
            <img src="http://www.google.com/intl/en_ALL/mapfiles/iws2.png" style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: -3px; top: -310px; width: 1044px; height: 370px; -moz-user-select: none;">
          </div>
          <div style="overflow: hidden; width: 70px; height: 60px; position: absolute; left: 259px; top: 30px;">
            <img src="http://www.google.com/intl/en_ALL/mapfiles/iws2.png" style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: -373px; top: -310px; width: 1044px; height: 370px; -moz-user-select: none;">
          </div>
          <div style="overflow: hidden; width: 140px; height: 60px; position: absolute; left: 70px; top: 30px;">
            <img src="http://www.google.com/intl/en_ALL/mapfiles/iws2.png" style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: -470px; top: -310px; width: 1044px; height: 370px; -moz-user-select: none;">
          </div>
          <div style="overflow: hidden; position: absolute; left: 99px; top: 0px; width: 159px; height: 30px;">
            <div style="overflow: hidden; width: 640px; height: 30px;">
              <img src="http://www.google.com/intl/en_ALL/mapfiles/iws2.png" style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: -70px; top: 0px; width: 1044px; height: 370px; -moz-user-select: none;">
            </div>
          </div>
          <div style="overflow: hidden; position: absolute; left: 29px; top: 30px; width: 360px; height: 280px; visibility: hidden;">
            <div style="overflow: hidden; width: 360px; height: 280px; bottom: -1px;">
              <img src="http://www.google.com/intl/en_ALL/mapfiles/iws2.png" style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: 0px; top: -30px; -moz-user-select: none;">
            </div>
          </div>
          <div style="overflow: hidden; position: absolute; left: 288px; top: 30px; width: 360px; height: 280px; visibility: hidden;">
            <div style="overflow: hidden; width: 360px; height: 280px; bottom: -1px;">
              <img src="http://www.google.com/intl/en_ALL/mapfiles/iws2.png" style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: -684px; top: -30px; -moz-user-select: none;">
            </div>
          </div>
          <div style="overflow: hidden; position: absolute; left: 70px; top: 30px; width: 0px; height: 60px;">
            <div style="overflow: hidden; width: 320px; height: 60px;">
              <img src="http://www.google.com/intl/en_ALL/mapfiles/iws2.png" style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: -73px; top: -310px; width: 1044px; height: 370px; -moz-user-select: none;">
            </div>
          </div>
          <div style="overflow: hidden; position: absolute; left: 210px; top: 30px; width: 49px; height: 60px;">
            <div style="overflow: hidden; width: 320px; height: 60px;">
              <img src="http://www.google.com/intl/en_ALL/mapfiles/iws2.png" style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: -73px; top: -310px; width: 1044px; height: 370px; -moz-user-select: none;">
            </div>
          </div>
          <div style="overflow: hidden; position: absolute; left: 99px; top: 30px; width: 640px; height: 598px; visibility: hidden;">
            <div style="overflow: hidden; width: 640px; height: 598px;">
              <img src="http://www.google.com/intl/en_ALL/mapfiles/iws2.png" style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: -360px; top: -30px; width: 1044px; height: 370px; -moz-user-select: none;">
            </div>
          </div>
        </div>
      </div>

This is G_MAP_MARKER_MOUSE_TARGET_PANE, pane number 6
It contains the invisible click targets for the markers, so that the click targets are above the info window shadow.
In Firefox, the target is controlled by the image maps, such as “#gmimap0”, which are defined later.

      <div style="position: absolute; left: 0px; top: 0px; z-index: 106;">
        <img usemap="#gmimap0" src="http://www.google.com/intl/en_ALL/mapfiles/markerTransparent.png" style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: 266px; top: 191px; width: 20px; height: 34px; -moz-user-select: none; z-index: -4300000;">
      </div>

This is G_MAP_FLOAT_PANE, pane number 7
It contains the info window.
As you can see, the info window graphics are quite complicated.

      <div style="position: absolute; left: 0px; top: 0px; z-index: 107; cursor: default;">
        <div style="position: absolute; left: 194px; top: 32px; z-index: -4300000;">
          <div style="overflow: hidden; width: 25px; height: 25px; position: absolute; left: 0px; top: 0px;">
            <img src="http://www.google.com/intl/en_ALL/mapfiles/iw1.png" style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: 0px; top: 0px; width: 690px; height: 786px; -moz-user-select: none;">
          </div>
          <div style="overflow: hidden; width: 25px; height: 25px; position: absolute; left: 224px; top: 0px;">
            <img src="http://www.google.com/intl/en_ALL/mapfiles/iw1.png" style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: -665px; top: 0px; width: 690px; height: 786px; -moz-user-select: none;">
          </div>
          <div style="overflow: hidden; width: 98px; height: 96px; position: absolute; left: 76px; top: 65px;">
            <img src="http://www.google.com/intl/en_ALL/mapfiles/iw1.png" style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: 0px; top: -690px; width: 690px; height: 786px; -moz-user-select: none;">
          </div>
          <div style="overflow: hidden; width: 25px; height: 25px; position: absolute; left: 0px; top: 65px;">
            <img src="http://www.google.com/intl/en_ALL/mapfiles/iw1.png" style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: 0px; top: -665px; width: 690px; height: 786px; -moz-user-select: none;">
          </div>
          <div style="overflow: hidden; width: 25px; height: 25px; position: absolute; left: 224px; top: 65px;">
            <img src="http://www.google.com/intl/en_ALL/mapfiles/iw1.png" style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: -665px; top: -665px; width: 690px; height: 786px; -moz-user-select: none;">
          </div>
          <div style="overflow: hidden; position: absolute; left: 25px; top: 0px; width: 199px; height: 25px;">
            <div style="overflow: hidden; width: 640px; height: 25px;">
              <img src="http://www.google.com/intl/en_ALL/mapfiles/iw1.png" style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: -25px; top: 0px; width: 690px; height: 786px; -moz-user-select: none;">
            </div>
          </div>
          <div style="overflow: hidden; position: absolute; left: 0px; top: 25px; width: 25px; height: 40px;">
            <div style="overflow: hidden; width: 25px; height: 598px;">
              <img src="http://www.google.com/intl/en_ALL/mapfiles/iw1.png" style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: 0px; top: -25px; width: 690px; height: 786px; -moz-user-select: none;">
            </div>
          </div>
          <div style="overflow: hidden; position: absolute; left: 224px; top: 25px; width: 25px; height: 40px;">
            <div style="overflow: hidden; width: 25px; height: 598px;">
              <img src="http://www.google.com/intl/en_ALL/mapfiles/iw1.png" style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: -665px; top: -25px; width: 690px; height: 786px; -moz-user-select: none;">
            </div>
          </div>
          <div style="overflow: hidden; position: absolute; left: 25px; top: 65px; width: 51px; height: 25px;">
            <div style="overflow: hidden; width: 640px; height: 25px;">
              <img src="http://www.google.com/intl/en_ALL/mapfiles/iw1.png" style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: -25px; top: -665px; width: 690px; height: 786px; -moz-user-select: none;">
            </div>
          </div>
          <div style="overflow: hidden; position: absolute; left: 174px; top: 65px; width: 50px; height: 25px;">
            <div style="overflow: hidden; width: 640px; height: 25px;">
              <img src="http://www.google.com/intl/en_ALL/mapfiles/iw1.png" style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: -25px; top: -665px; width: 690px; height: 786px; -moz-user-select: none;">
            </div>
          </div>
          <div style="overflow: hidden; position: absolute; left: 25px; top: 25px; width: 199px; height: 40px;">
            <div style="overflow: hidden; width: 640px; height: 598px;">
              <img src="http://www.google.com/intl/en_ALL/mapfiles/iw1.png" style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: -25px; top: -25px; width: 690px; height: 786px; -moz-user-select: none;">
            </div>
          </div>
          <img src="http://www.google.com/intl/en_ALL/mapfiles/close.gif" style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: 225px; top: 10px; width: 14px; height: 13px; -moz-user-select: none; z-index: 10000; cursor: pointer;">
          <img src="http://www.google.com/intl/en_ALL/mapfiles/maximize.gif" style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: 207px; top: 10px; width: 14px; height: 13px; -moz-user-select: none; z-index: 10000; visibility: hidden; cursor: pointer;">
          <img src="http://www.google.com/intl/en_ALL/mapfiles/restore.gif" style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: 207px; top: 10px; width: 14px; height: 13px; -moz-user-select: none; z-index: 10001; visibility: hidden; cursor: pointer;">
          <div style="position: absolute; left: 16px; top: 16px; width: 217px; height: 58px; z-index: 10;">
            <div>Some stuff to display in the
              <br>Info Window
            </div>
          </div>
          <map name="iwMap0" id="iwMap0">
          <area coords="0,0,0,90,129,90,80,161,174,90,249,90,249,0" href="javascript:void(0)" shape="poly">
          <area coords="81,159,78,160,76,161,74,163,72,167,72,171,73,173,74,175,77,178,79,182,80,185,81,189,81,193,83,193,83,189,84,185,85,183,86,180,88,177,90,175,92,171,92,167,90,163,88,161,87,160,85,159" href="javascript:void(0)" shape="poly">
          </map>
          <img usemap="#iwMap0" src="http://www.google.com/intl/en_ALL/mapfiles/transparent.gif" style="border: 0px none ; margin: 0px; padding: 0px; -moz-user-select: none; position: absolute; left: 0px; top: 0px; width: 249px; height: 161px;">
        </div>
      </div>
    </div>
  </div>

That’s the end of the stuff that moves when the map pans.
From here onwards, the elements remain in fixed positions.

This div contains the copytight text and Terms of Use link.

  <div style="color: black; font-family: Arial,sans-serif; font-size: 11px; white-space: nowrap; -moz-user-select: none; position: absolute; right: 3px; bottom: 2px;">
    <span>Map data ©2007  TeleAtlas -
    </span>
    <a style="color: rgb(119, 119, 204);" href="http://www.google.com/intl/en_ALL/help/terms_local.html">Terms of Use
    </a>
  </div>

This is the Google Logo.

  <a style="-moz-user-select: none; position: absolute; left: 2px; bottom: 0px;" href="http://maps.google.com/maps?ll=43,-79&spn=1.807822,3.02124&z=8&key=ABQIAAAAPDUET0Qt7p2VcSk6JNU1sBRRwPhutbWBmyj82Go_H6JlE7EvFBSKFFFHFePAwvib9UM0geoA3Pgafw&oi=map_misc&ct=api_logo" title="Click to see this area on Google Maps">
  <img src="http://www.google.com/intl/en_ALL/mapfiles/poweredby.png" style="border: 0px none ; margin: 0px; padding: 0px; width: 62px; height: 30px; -moz-user-select: none; cursor: pointer;">
  </a>

This is the GLargeMapControl().

  <div style="width: 59px; height: 256px; -moz-user-select: none; position: absolute; left: 7px; top: 7px;">
    <div style="overflow: hidden; position: absolute; left: 0px; top: 0px; width: 59px; height: 226px;">
      <img src="http://www.google.com/intl/en_ALL/mapfiles/lmc.png" style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: 0px; top: 0px; width: 59px; height: 354px; -moz-user-select: none;">
      <div log="pan_up" title="Pan up" style="position: absolute; left: 20px; top: 0px; width: 18px; height: 18px; cursor: pointer;">
      </div>
      <div log="pan_lt" title="Pan left" style="position: absolute; left: 0px; top: 20px; width: 18px; height: 18px; cursor: pointer;">
      </div>
      <div log="pan_rt" title="Pan right" style="position: absolute; left: 40px; top: 20px; width: 18px; height: 18px; cursor: pointer;">
      </div>
      <div log="pan_down" title="Pan down" style="position: absolute; left: 20px; top: 40px; width: 18px; height: 18px; cursor: pointer;">
      </div>
      <div log="center_result" title="Return to the last result" style="position: absolute; left: 20px; top: 20px; width: 18px; height: 18px; cursor: pointer;">
      </div>
      <div log="zi" title="Zoom In" style="position: absolute; left: 20px; top: 65px; width: 18px; height: 18px; cursor: pointer;">
      </div>
    </div>
    <div style="position: absolute; left: 0px; top: 226px; width: 59px; height: 30px;">
      <img src="http://www.google.com/intl/en_ALL/mapfiles/lmc-bottom.png" style="border: 0px none ; margin: 0px; padding: 0px; width: 59px; height: 30px; -moz-user-select: none;">
      <div log="zo" title="Zoom Out" style="position: absolute; left: 20px; top: 11px; width: 18px; height: 18px; cursor: pointer;">
      </div>
    </div>
    <div style="position: absolute; left: 19px; top: 86px; width: 22px; height: 150px; cursor: pointer;">
      <img src="http://www.google.com/intl/en_ALL/mapfiles/slider.png" style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: 0px; top: 72px; width: 22px; height: 14px; -moz-user-select: none; cursor: url(http://www.google.com/intl/en_ALL/mapfiles/openhand.cur), default;">
    </div>
  </div>

This is the GMapTypeControl().

  <div style="color: black; font-family: Arial,sans-serif; font-size: small; -moz-user-select: none; position: absolute; right: 7px; top: 7px; width: 210px; height: 19px;">
    <div title="Show street map" style="border: 1px solid black; position: absolute; background-color: white; text-align: center; width: 5em; cursor: pointer; right: 11em;">
      <div style="border-style: solid; border-color: rgb(176, 176, 176) white white rgb(176, 176, 176); border-width: 1px; font-size: 12px; font-weight: bold;">Map
      </div>
    </div>
    <div title="Show satellite imagery" style="border: 1px solid black; position: absolute; background-color: white; text-align: center; width: 5em; cursor: pointer; right: 5.5em;">
      <div style="border-style: solid; border-color: white rgb(176, 176, 176) rgb(176, 176, 176) white; border-width: 1px; font-size: 12px;">Satellite
      </div>
    </div>
    <div title="Show imagery with street names" style="border: 1px solid black; position: absolute; background-color: white; text-align: center; width: 5em; cursor: pointer; right: 0em;">
      <div style="border-style: solid; border-color: white rgb(176, 176, 176) rgb(176, 176, 176) white; border-width: 1px; font-size: 12px;">Hybrid
      </div>
    </div>
  </div>

This is the GScaleControl().

  <div style="width: 116px; height: 26px; color: black; font-family: Arial,sans-serif; font-size: 11px; -moz-user-select: none; position: absolute; left: 68px; bottom: 5px;">
    <div style="overflow: hidden; position: absolute; left: 0px; top: 0px; width: 4px; height: 26px;">
      <img src="http://www.google.com/intl/en_ALL/mapfiles/scale.png" style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: 0px; top: 0px; -moz-user-select: none;">
    </div>
    <div style="overflow: hidden; position: absolute; left: 3px; top: 11px; width: 112px; height: 4px;">
      <img src="http://www.google.com/intl/en_ALL/mapfiles/scale.png" style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: -12px; top: 0px; -moz-user-select: none;">
    </div>
    <div style="overflow: hidden; position: absolute; left: 115px; top: 11px; width: 1px; height: 4px;">
      <img src="http://www.google.com/intl/en_ALL/mapfiles/scale.png" style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: -412px; top: 0px; -moz-user-select: none;">
    </div>
    <div style="overflow: hidden; position: absolute; left: 72px; top: 0px; width: 4px; height: 12px;">
      <img src="http://www.google.com/intl/en_ALL/mapfiles/scale.png" style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: -4px; top: 0px; -moz-user-select: none;">
    </div>
    <div style="overflow: hidden; position: absolute; left: 112px; top: 14px; width: 4px; height: 12px;">
      <img src="http://www.google.com/intl/en_ALL/mapfiles/scale.png" style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: -8px; top: 0px; -moz-user-select: none;">
    </div>
    <div style="position: absolute; left: 8px; bottom: 16px;">20 mi
    </div>
    <div style="position: absolute; left: 8px; top: 15px;">50 km
    </div>
  </div>

The image maps that are used for the marker click targets are defined here.

  <map name="gmimap0">
  <area href="javascript:void(0)" alt="" shape="poly" coords="9,0,6,1,4,2,2,4,0,8,0,12,1,14,2,16,5,19,7,23,8,26,9,30,9,34,11,34,11,30,12,26,13,24,14,21,16,18,18,16,20,12,20,8,18,4,16,2,15,1,13,0" log="miw" id="map_undefined">
  </map>
</div>
</body>
</html>

Resources

Google Maps API Tutorial

The Mashups Book

Beginning Google Maps Mashups with Mapplets, KML, and GeoRSS

If you’re new to JavaScript, or have never programmed in any computer language, and are having difficulties following this tutorial and the Google documentation, then get this book.

Beginning Google Maps Mashups with Mapplets, KML, and GeoRSS by Sterling Udell takes you through the basics of Google Maps, explaining almost every line of code in considerable detail.

Unlike the previous Google Maps Applications book you don’t need any prior knowledge of anything to be able to get into this book. The concepts that you’ll need to use are explained from scratch, assuming no prior knowledge of JavaScript, XML, KML, GeoRSS, PHP, mySQL, etc. Similarly, any mapping concepts that you might need (such as degrees, minutes and seconds of latitude and longitude, or the Mercator projection) are explained in some detail. Using MyMaps to create KML files is explained almost click by click.

The downside of explaining everything from scratch in so much detail is that the book ends up not covering an awful lot of ground. If you already have some knowledge of Javascript, and are capable of following online tutorials and the Google documentation, then you’ll probably find large chunks of this book redundant.

One common problem with books related to the Internet is that they get out of date really fast. The Google Maps API continues to grow, with new features being added all the time. That doesn’t apply to this book very much because it doesn’t push the boundaries of what’s available. In fact, the author recommends that for live sites you load a specific version of the API code, so as to be protected against possible future changes in the API. The examples in the book are written to use release v2.124, which came out in August 2008.

Throughout the book, the author encourages the use of appropriate standards and best coding practice.

The book is divided into four parts.

Part 1: The Geoweb and the Google Maps API explains the basic philosophy behind the Mashupconcept – that machine readable Geodata in standard formats can allow that other people to map the data in useful ways that the creator of the data never thought of. It covers creating your first Google Map, using GGeoXml to add someone else’s data to it, and adding some extra features like driving directions and traffic overlays.

Part 2: Mashing up Google Maps with Mapplets covers creating and publishing simple Mapplets. The author provides a modified version of my EGeoXml extension which uses iGoogle Gadget calls to read KML files from any domain, thus allowing XML files to be rendered within the mapplet.

Part 3: Ready for the big leagues An assortment of slightly more advanced API topics is covered, plus the ability to use PHP and SQL to dynamically generate KML and GeoRSS feeds. Finally there’s a case study of a comprehensive project.

Appendixes These cover:

  • Mapping concepts: like latitude, longitude and the Mercator projection
  • A Javascript primer: a pretty decent attempt to cover Javascript in only 23 pages
  • Debugging tips
  • A list of online resources

Resources

Google Maps API Tutorial

The Book

Beginning Google Maps Applications with PHP and Ajax

If you want to take your Google Maps further. If you want to take them a lot further, then get the book.

Beginning Google Maps Applications with PHP and Ajax by Michael Purvis, Jeffrey Sambells and Cameron Turner goes a long way beyond what I’ve been able to include in this tutorial.

Don’t be confused by the word “beginning” in the title of the book. This is not a book for beginners. If you don’t have solid grounding in HTML, Javascript and PHP then this book is going to leave you standing. Familiarity with CSS, mySQL, Ajax and XML will also help. I confess that some of the sections were beyond me.

The book isn’t perfect. There are a few typos that you’ll spot immediately you try to write pages that use their code [like “map.addControl(GMap2TypeControl());”]. I, personally, think that it’s a mistake to assume that all your users will have Javascript enabled, rather than using <noscript> to explain to users without Javascript why they’re looking at a blank page. I also think that the section of using the Yahoo Geocoder should have mentioned that it is a violation of the Yahoo Terms to use the Yahoo Geocoder with Google Maps.

One problem with books related to the Internet is that they get out of date really fast. An awful lot has changed since 2006 when the book was published. When the book was written, the API had no GDirections, GGeoXml, GAdsManager, StreetView, GScreenOverlay, GGroundOverlay, Encoded polylines, G_PHYSICAL_MAP, G_SATELLITE_3D_MAP, GMarkerManager or GTRafficOverlay. The Open Source library did not exist, so there was no MarkerManager, LabeledMArker, ExtMapTypeControl, ExtInfoWindow or MapIconMaker. Polygons and polylines were rendered with either VML or via the image server, not SVG or canvas. There were no My Maps, and no Google Spreadsheets. No Google Charts, no Google static maps and no embedded maps. In wider Internet, there was no Firebug, no Safari for Windows, and no Google Chrome.

When it came out, I reckoned that the book should be an indispensable part of the toolkit of any professional web designers who want to include advanced Google Map techniques in their web sites. Things have changed so much in the last two years that make the book rather less useful these days.

The book is divided into three parts.

Part 1: Your First Google Maps covers things like allowing users to add markers and related information to your map and store it in a mySQL database and fetch it back so that other users can see it.

Part 2: Beyond the basics covers things like handling huge numbers of points using several techniques, including creating a custom tile layer generating the tile graphics dynamically in the server, and caching the images to improve response times.
There’s an example at http://googlemapsbook.com/chapter7/ServerCustomTiles with a map that displays over 115,000 data points.

Part 3: Advanced Map Features and Methods covers some advanced topics, like the ability to write your own geocoding service, like this one: http://googlemapsbook.com/chapter11/UKRest/index.php?code=AB10.

There’s also lots of ongoing support from the web site associated with the book,http://googlemapsbook.com including copies of all the source code printed in the book and updated information about things like available geocoders and data sets.

Resources

Google Maps API Tutorial

Some Recommended Tools

Venkman Javascript Debugger

Venkman is the original Javascript Debugger for Firefox and Mozilla. Venkman forms part of the standard Mozilla package and is available as a Firefox extension. You can get the Firefox version here. It’s got a pretty steep learning curve.

I now recommend Firebug (see below) rather than Venkman.

Tidy HTML Validator

There are several HTML validation routines around. I happen to like this one because it’s not overly pedantic about tiny details, and it gives a neat concise explanation of the reasons why it thinks your HTML is incorrect.

It comes as a Firefox extension, and puts a little green tick on the status bar when it considers your code to be valid, so you don’t have to keep remembering to send your page to an external validator whenever you change something, you just watch to see if the green tick turns into a yellow triangle or a red cross.

The Windows version is here. There are Linux, MacOSX and FreeBSD versions here.

Web Developer

An indispensable Firefox Extension for general web development.

For Google maps API work, its “Information:View Javascript” facility is very useful for instantly collecting together all the Javascript contained in the webpage and in all the files that it loads. And the “Disable:Disable Styles:Disable Individual Stylesheet” comes in handy for spotting if any of the strange behaviours of your map are due to CSS settings.

Download the Firefox version here.

Javascript: The Definitive Guide

By David Flanagan. This is the book to read if you want to learn more about Javascript.

It’s part of the O’Reilly series of Definitive Guides, which are all excellent resources for their respective topics.

w3schools

w3schools  is an excellent resource for finding details of almost any web-related technology. Of particular interest to API programmers are their Javscript Tutorial and their Javascript Reference, but their information on other topics can be very useful. If you just want to know about how to use one or two features of a technology like XSLT or CSS, you’ll find comprehensive information and clear examples.

The technologies covered are: HTML, XHTML, CSS, TCP/IP, XML, XSL, XSLT, XSL-FO, XPath, XQuery, XLink, XPointer, DTD, Schema, XML DOM, XForms, SOAP, WSDL, RDF, RSS, WAP, Web Services, JavaScript, HTML DOM, DHTML, VBScript, E4X, WMLScript, SQL, ASP, ADO, PHP, .NET, .NET Microsoft, .NET ASP, .NET Mobile, Media, SMIL, SVG and Flash.

And it’s all free.

MS Visual Web Developer Express

msdn.microsoft.com/vstudio/express/vwd/

Some people have recommended this Microsoft tool. I can’t comment since my computer falls short of the system requirements in almost every category, so I’ve not tried it.

Debugbar

Provides a facility within MSIE that mimics Firebug.

It contains a DOM inspector, HTTP inspector, Javascript Inspector, Javascript console, HTML validator.

It’s still in beta, and performs very erratically on my machine, and interferes with the behaviour of Google Maps, but it’s an awful lot better than nothing.

http://www.debugbar.com/

Companion.js

Javascript debugger for MSIE.

http://www.my-debugbar.com/wiki/CompanionJS/HomePage

Requires Microsoft Script Debugger.

I’ve not tried this out yet.

ieTab

https://addons.mozilla.org/firefox/1419/

Embeds a copy of Internet Explorer inside a Mozilla/Firefox tab.

I think there are only versions for Windows.

This is a great tool for web developers, since you can develop your code in Firefox. Then, with a single click of the ieTab icon, you can see what sort of mess MSIE makes of it, and still be in a Firefox environment.

Firebug

http://www.getfirebug.com

Firebug is an extension that integrates with Firefox to put a wealth of development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.

Unlike Web Developer, Firebug works on the dynamic version of the page, so, for example, you can look at the way the html elements that contain the map change as you make calls to the API.

To get the best out of Firebug, you need to install the Firefox DOM Inspector. The DOM Inspector isn’t an extension, it’s an optional component of Firefox. To install the DOM Inspector you need to re-install Firefox and choose the “Custom Setup” option instead of “Standard”.

There seem to occasionally be severe conflicts between Venkman and Firebug, when Venkman tries to handle errors that are thrown by the Firebug code. I’ve ended up uninstalling Firebug for now, because I’ve already invested a lot of time learning Venkman. If you’re starting out from scratch, I’d suggest learning Firebug rather than Venkman plus Web Developer.

Chrome Inspector

View your page in Google Chrome, right-click on an element and select “Inspect Element”.

This gives you:

  • A detailed view of the dynamic HTML and styles, including the details of what’s going on inside the map structure.
  • A Javascript command console.
  • Information about the timing and size of resources such as image files and Javascript modules.

Pagetest

Useful for addressing performance issues. Provides standard performance tests for your web page.

Paste the URL of your page into pagetest.patrickmeenan.com:8080/

I recommend this rather than using the resources information from Firebug or Google Chrome because they give results that are distorted by the fact that connectivity to your own server may well be perceived as being much faster than other people will see it. The tests are performed with MSIE, which has performance issues which may need to be addressed which Firefox and Chrome don’t exhibit. You get the option to perform the tests over three different line speeds.

Resources

Google Maps API Tutorial

GEvents

Here’s a list of the accessible GEvent types.

Event Object Parameters
“addmaptype” GMap2, GMap map type
“addoverlay” GMap2, GMap overlay
“clearoverlays” GMap2, GMap
“click” GMap2, GMap overly, latlng, overlaylatlng
“dblclick” GMap2, GMap the first parameter is always null
The second parameter is the GLatLng
“drag” GMap2, GMap
“dragend” GMap2, GMap
“dragstart” GMap2, GMap
“infowindowbeforeclose” GMap2, GMap
“infowindowclose” GMap2, GMap
“infowindowopen” GMap2, GMap
“load” GMap2, GMap
“maptypechanged” GMap2, GMap
“move” GMap2, GMap
“moveend” GMap2, GMap
“movestart” GMap2, GMap
“mousemove” GMap2, GMap GLatLng
“mouseout” GMap2, GMap GLatLng
“mouseover” GMap2, GMap GLatLng
“removemaptype” GMap2, GMap map type
“removeoverlay” GMap2, GMap overlay
“resize” GMap2, GMap
“singlerightclick” GMap2, GMap 1. GLatLng() identifying the pixel position of the mouse within the map div.
2. URL of tile (if over the base map)
3. Map container if over the base map. Reference to the Gmarker if over a marker.
“zoomend” GMap2, GMap old zoom level, new zoom level
“zooming” GMap2, GMap
“zoomstart” GMap2, GMap direction (+1 = zoom in, -1 = zoom out)
latlng pivot
bool recentering
Event Object Parameters
“zoom” GMap old zoom level, new zoom level (v1 syntax)
Event Object Parameters
“newcopyright” GMapType copyright
Event Object Parameters
“newcopyright” GTileLayer copyright
Event Object Parameters
“newcopyright” GCopyrightCollection copyright
Event Object Parameters
“click” GMarker latlng of marker
“changed” GMarker marker, previous position
“dblclick” GMarker latlng of marker
“drag” GMarker latlng
“dragend” GMarker latlng
“dragstart” GMarker latlng
“infowindowbeforeclose” GMarker marker
“infowindowclose” GMarker marker
“infowindowopen” GMarker marker
“infowindowprepareopen” GMarker marker
“mousedown” GMarker latlng of marker
“mouseover” GMarker latlng of marker
“mouseout” GMarker latlng of marker
“mouseup” GMarker latlng of marker
“remove” GMarker
“visibilitychanged” GMarker true if the marker is now visible, else false
Event Object Parameters
“changed” GMarkerManager GBounds indicating active region in units of 1024×1024 pixels, number of active markers
Event Object Parameters
“cancelline” GPolyline
“click” GPolyline GLatLng of clicked location
“endline” GPolyline
“lineupdated” GPolyline
“mouseout” GPolyline
“mouseover” GPolyline
“remove” GPolyline
“visibilitychanged” GPolyline true if the poly is now visible, else false
Event Object Parameters
“cancelline” GPolygon
“click” GPolygon GLatLng of clicked location
“endline” GPolygon
“lineupdated” GPolygon
“mouseout” GPolygon
“mouseover” GPolygon
“remove” GPolygon
“visibilitychanged” GPolygon true if the poly is now visible, else false
Event Object Parameters
“moveend” GKeyboardHandler
“movestart” GKeyboardHandler
Event Object Parameters
“animate” [GInfoWindow] proportion of the animation that has been performed
“closeclick” [GInfoWindow]
“maximizeclick” [GInfoWindow]
“maximizeend” [GInfoWindow]
“restoreclick” [GInfoWindow]
“restoreend” [GInfoWindow]
Event Object Parameters
“click” GDraggableObject browser-specific event object
“dblclick” GDraggableObject browser-specific event object
“drag” GDraggableObject browser-specific event object
“dragend” GDraggableObject browser-specific event object
“dragstart” GDraggableObject browser-specific event object
“mouseup” GDraggableObject browser-specific event object
“mousedown” GDraggableObject browser-specific event object
“move” GDraggableObject
Event Object Parameters
“visibilitychanged” GScreenOverlay true if the overlay is now visible, else false
Event Object Parameters
“visibilitychanged” GGroundOverlay true if the overlay is now visible, else false
Event Object Parameters
“load” GGeoXml
Event Object Parameters
“changed” GTrafficOverlay true if the viewport contains traffic data
Event Object Parameters
“error” GStreetViewPanorama error code
“initialized” GStreetViewPanorama location object
“pitchchanged” GStreetViewPanorama pitch
“yawchanged” GStreetViewPanorama yaw
“zoomchanged” GStreetViewPanorama zoom
Event Object Parameters
“changed” GStreetViewOverlay true if the viewport contains StreetView data

Notes

  1. Watch out for those parameters. The same event can have different parameters with different objects.
  2. The GInfoWindow class isn’t directly accessible, but you can use GEvent.addListener(map.getInfoWindow(),”closeclick” …).
  3. The “closeclick” event is only triggered when the user actually clicks on the info window close icon, not for anything else that closes the info window.
  4. Watch out for the difference between the “zoom” event (GMap() only) which returns zoom levels in APIv1 format and the “zoomend” event which returns zoom levels in APIv2 format.
  5. To differentiate the situation where the user moves the map rather than the map being moved by code, you can use drag* and dblclick events. The move* events are triggered by anything that moves the map, which can include calls made by your own Javascript code and the opening of an info window.

Custom Events

It’s also possible to use the GEvent system to pass messages between different parts of your own code with custom events. Simply use GEvent.addListener(marker, “myevent”) to listen for the event andGEvent.trigger(marker, “myevent”) to trigger it. You can pass up to two parameters.

You can pass these custom events on any object, these can be API objects, HTML elements, data structures, or any type of Object().

 GEvent.addListener(map, "myevent", ... GEvent.addListener(document.getElementById("message"), "thisevent", ... var fred = new Object(); GEvent.addListener(fred, "thatevent", ... 

GEvent.addDomListener

It’s also possible to use GEvent.addDomListener() to listen for Dom events on HTML Elements.

Writing GEvent.addDomListener(document.getElementById(“button”), “mouseover”, … has a similar effect to writing <input id=”button” onmouseover=”…”>, but there are one or two advantages to using the GEvent system:

  1. You may find it easier to add or remove GEvent listeners
  2. You can use GEvent.trigger on these events

You can use this system to handle any of the standard HTML Dom events: “blur”, “click”, “dblclick”, “focus”, “keydown”, “keypress”, “keyup”, “load”, “mousedown”, “mousemove”, “mouseout”, “mouseover”, “mouseup”.

When using this system, the full event details are passed in the first parameter. So for example you could write

GEvent.addDomListener(document.getElementById("map"), "click", function(e) {...

and then examine the details of the event “e” and behave differently if, say, the ALT or CTRL keys were pressed by testing if (e.altKey) or if (e.ctrlKey).

Note that if you write GEvent.addDomListener(map, “click” then you don’t get the Dom event because a GMap2() object isn’t a HTML element. You get the conventional “map click” event instead, with the parameters “overlay” and “latlng”.

Resources

Google Maps API Tutorial

Unofficial Reference

This page is an unofficial reference to all the objects, classes, properties and methods that are accessible in the API

See also the Official Google Maps API Documentation

GAddCopyright
GAddMessages
GAdsManager
GBounds
GBrowserIsCompatible
GClientGeocoder
GControl
GControlPosition
GCopyright
GCopyrightCollection
GDirections
GDownloadUrl
GDraggableObject
GEvent
GFactualGeocodeCache
GGeoXml
GGeocodeCache
GGroundOverlay
GHierarchicalMapTypeControl
GIcon
GInfoWindow
GInfoWindowTab
GKeyboardHandler
GLargeMapControl
GLargeMapControl3D
GLatLng
GLatLngBounds
GLayer
GLoad
GLoadMapsScript
GLog
GMap
GMap2
GMapType
GMapTypeControl
GMapUIOptions
GMarker
GMarkerManager
GMenuMapTypeControl
GMercatorProjection
GNavLabelControl
GOverlay
GOverviewMapControl
GPoint
GPolygon
GPolyline
GProjection
GRoute
GScaleControl
GScreenOverlay
GScreenPoint
GScreenSize
GScript
GSize
GSmallMapControl
GSmallZoomControl
GSmallZoomControl3D
GStep
GStreetviewClient
GStreetviewOverlay
GStreetviewPanorama
GTileLayer
GTileLayerOverlay
GTrafficOverlay
GUnload
GUnloadApi
GValidateKey
GVerify
GXml
GXmlHttp
GXslt
G_ANCHOR_BOTTOM_LEFT
G_ANCHOR_BOTTOM_RIGHT
G_ANCHOR_TOP_LEFT
G_ANCHOR_TOP_RIGHT
G_API_VERSION
G_DEFAULT_ICON
G_DEFAULT_MAP_TYPES
G_GEO_BAD_KEY
G_GEO_MISSING_ADDRESS
G_GEO_SERVER_ERROR
G_GEO_SUCCESS
G_GEO_TOO_MANY_QUERIES
G_GEO_UNAVAILABLE_ADDRESS
G_GEO_UNKNOWN_ADDRESS
G_GOOGLEBAR_LINK_TARGET_BLANK
G_GOOGLEBAR_LINK_TARGET_PARENT
G_GOOGLEBAR_LINK_TARGET_SELF
G_GOOGLEBAR_LINK_TARGET_TOP
G_GOOGLEBAR_RESULT_LIST_INLINE
G_GOOGLEBAR_RESULT_LIST_SUPPRESS
G_HYBRID_MAP
G_MAPMAKER_HYBRID_MAP
G_MAPMAKER_MAP_TYPES
G_MAPMAKER_NORMAL_MAP
G_MAP_FLOAT_PANE
G_MAP_FLOAT_SHADOW_PANE
G_MAP_MAP_PANE
G_MAP_MARKER_MOUSE_TARGET_PANE
G_MAP_MARKER_PANE
G_MAP_MARKER_SHADOW_PANE
G_MAP_OVERLAY_LAYER_PANE
G_MARS_ELEVATION_MAP
G_MARS_INFRARED_MAP
G_MARS_MAP_TYPES
G_MARS_VISIBLE_MAP
G_MOON_ELEVATION_MAP
G_MOON_MAP_TYPES
G_MOON_VISIBLE_MAP
G_NORMAL_MAP
G_PHYSICAL_MAP
G_SATELLITE_3D_MAP
G_SATELLITE_MAP
G_SKY_MAP_TYPES
G_SKY_VISIBLE_MAP
G_TRAVEL_MODE_DRIVING
G_TRAVEL_MODE_WALKING

G_ANCHOR_BOTTOM_LEFT

Constant containing the number 2. Can be used for setting a GControlPosition() anchor.
G_ANCHOR_BOTTOM_RIGHT

Constant containing the number 3. Can be used for setting a GControlPosition() anchor.
G_ANCHOR_TOP_LEFT

Constant containing the number 0. Can be used for setting a GControlPosition() anchor.
G_ANCHOR_TOP_RIGHT

Constant containing the number 1. Can be used for setting a GControlPosition() anchor.
G_API_VERSION

undocumented Constant indicating the digits after the “.” in the API version number. E.g. for v2.126 it returns 126.
G_DEFAULT_ICON

A GIcon() object describing the default icon.
Has all the properties and methods of the GIcon() class.
G_DEFAULT_MAP_TYPES

An array of GMapType() objects identifying the map types which will be available by default.
G_GEO_BAD_KEY

A constant containing the code number that represents a GClientGeocoder failure due to an incorrect API key being used.
G_GEO_MISSING_ADDRESS

A constant containing the code number that represents a GClientGeocoder failure due to no address being submitted.
G_GEO_SERVER_ERROR

A constant containing the code number that represents a GClientGeocoder failure but the reason is not known.
G_GEO_SUCCESS

A constant containing the code number that represents a GClientGeocoder success.
G_GEO_TOO_MANY_QUERIES

A constant containing the code number that represents a GClientGeocoder failure due to your quota being exceeded..
G_GEO_UNAVAILABLE_ADDRESS

A constant containing the code number that represents a GClientGeocoder failure due to legal or contractual reasons.
G_GEO_UNKNOWN_ADDRESS

A constant containing the code number that represents a GClientGeocoder failure due to no known location matching the address.
G_GOOGLEBAR_LINK_TARGET_BLANK

A string constant that can be used in googleBarOptions.
G_GOOGLEBAR_LINK_TARGET_PARENT

A string constant that can be used in googleBarOptions.
G_GOOGLEBAR_LINK_TARGET_SELF

A string constant that can be used in googleBarOptions.
G_GOOGLEBAR_LINK_TARGET_TOP

A string constant that can be used in googleBarOptions.
G_GOOGLEBAR_RESULT_LIST_INLINE

A string constant that can be used in googleBarOptions.
G_GOOGLEBAR_RESULT_LIST_SUPPRESS

A string constant that can be used in googleBarOptions.
G_HYBRID_MAP

A GMapType() object describing the Hybrid Map Type
Has all the properties and methods of the GMapType() class.
G_MAPMAKER_MAP_TYPES

An array of GMapType() objects identifying a set of MapMAker map types.
G_MAPMAKER_NORMAL_MAP

A GMapType() object describing a Map Type containing MapMaker street maps.
Has all the properties and methods of the GMapType() class.
This feature us currently disabled by loader token _mF[188].
G_MAPMAKER_HYBRID_MAP

A GMapType() object describing a Map Type that is a hybrid of the satellite tiles and the MapMaker streets.
Has all the properties and methods of the GMapType() class.
This feature us currently disabled by loader token _mF[188].
G_MAP_FLOAT_PANE

Constant containing the number 7. Can be used with the GMap2.getPane() method to get a reference to a pane.
G_MAP_FLOAT_SHADOW_PANE

Constant containing the number 5. Can be used with the GMap2.getPane() method to get a reference to a pane.
G_MAP_MAP_PANE

Constant containing the number 0. Can be used with the GMap2.getPane() method to get a reference to a pane.
G_MAP_MARKER_MOUSE_TARGET_PANE

Constant containing the number 6. Can be used with the GMap2.getPane() method to get a reference to a pane.
G_MAP_MARKER_PANE

Constant containing the number 4. Can be used with the GMap2.getPane() method to get a reference to a pane.
G_MAP_MARKER_SHADOW_PANE

Constant containing the number 2. Can be used with the GMap2.getPane() method to get a reference to a pane.
G_MAP_OVERLAY_LAYER_PANE

Constant containing the number 1. Can be used with the GMap2.getPane() method to get a reference to a pane.
G_MARS_ELEVATION_MAP

A GMapType() object describing the Mars Elevation Map Type
Has all the properties and methods of the GMapType() class.
G_MARS_INFRARED_MAP

A GMapType() object describing the Mars Infra Red Map Type
Has all the properties and methods of the GMapType() class.
G_MARS_MAP_TYPES

An array of GMapType() objects identifying the map types associated with Mars. You can use it like {mapTypes:G_MARS_MAP_TYPES} when creating the GMap2.
G_MARS_VISIBLE_MAP

A GMapType() object describing the Mars Visible Map Type
Has all the properties and methods of the GMapType() class.
G_MOON_ELEVATION_MAP

A GMapType() object describing the Lunar Elevation Map Type
Has all the properties and methods of the GMapType() class.
G_MOON_MAP_TYPES

An array of GMapType() objects identifying the map types associated with the Moon. You can use it like {mapTypes:G_MOON_MAP_TYPES} when creating the GMap2.
G_MOON_VISIBLE_MAP

A GMapType() object describing the Lunar Visible Map Type
Has all the properties and methods of the GMapType() class.
G_NORMAL_MAP

A GMapType() object describing the Normal Map Type
Has all the properties and methods of the GMapType() class.
G_PHYSICAL_MAP

A GMapType() object describing the Physical Map Type
Has all the properties and methods of the GMapType() class.
G_SATELLITE_3D_MAP

A GMapType() object describing the Google Earth Map Type
Has all the properties and methods of the GMapType() class.
The Google Earth Map Type requires the Google Earth Browser Plug-In.

Only a limited number of features are supported in this map type.

G_SATELLITE_MAP

A GMapType() object describing the Satellite Map Type
Has all the properties and methods of the GMapType() class.
G_SKY_MAP_TYPES

An array of GMapType() objects identifying the map types associated with the sky view. You can use it like {mapTypes:G_SKY_MAP_TYPES} when creating the GMap2.
G_SKY_VISIBLE_MAP

A GMapType() object describing the Sky Map Type
Has all the properties and methods of the GMapType() class.
G_TRAVEL_MODE_DRIVING

Constant containing the number 0. Can be used for GDirections travelMode.
G_TRAVEL_MODE_WALKING

Constant containing the number 1. Can be used for GDirections travelMode.

GAddCopyright()

This function can be used to add information about the copyright text for a region within a map type.
parameters
a string the getUrlArg() of the maptype to which the copyright applies.
b string id
c float min latitude
d float min longitude
e float max latitude
f float max longitude
g integer min zoom level
h string copyright text
i integer max zoom level
j boolean I’m not sure what this does
GAddMessages()

This undocumented function inserts text strings into the language specific message list.
parameters
a object An object specifying the list of messages.

For example:
GAddMessages({10093:’Conditions d\x27utilisation’,10507:’Déplacer vers la gauche’});
replaces the texts “Terms of Use” and “Pan Left” with their French equivalents.

GAdsManager()

Controls the display of AdSense adverts on the map.
parameters
map the map on which the ads are to be displayed.
AdSense Id Publisher id of your AdSense account
opts options

options
maxAdsOnMap Maximum number of ads to be displayed: default = 3.
channel AdSense channel, can be used to track ad revenue.
minZoomLevel Minimum zoom level for ad display: default = 6.

Methods
enable() Enables ad display.
disable() Disables ad display.
GBounds()

Identifies a rectangular geographical region using APIv1 syntax, or a rectangular region specified in pixels
Constructor new GBounds(array)
An array of GPoint()s or GLatLng()s. The GBounds object that just includes those points is created.
properties
minX Coordinate of the West edge
maxX Coordinate of the East edge
minY Coordinate of the South edge
maxY Coordinate of the North edge
Methods
containsBounds(bounds) Returns true if it fully contains the other bounds
containsPoint(gpoint) Returns true if it contains the GPoint
copy() undocumented Returns a new GBounds that is a copy of this one.
equals(bounds) returns true if the two GBounds are equal
extend(point) Enlarges the bounds to be the smallest rectangle containing the previous area plus the specified location
toString() Returns a string in the format ((33.123, -120.123), (45.123, -100.234)).
max() Returns a GPoint() representing the Northeast corner.
min() Returns a GPoint() representing the SouthWest corner.
mid() Returns a GPoint() representing the centre.
Static Methods
GBounds().intersection(bounds,bounds) undocumented Returns a new GBounds representing the intersection of the two supplied GBounds
GBounds().intersects(bounds,bounds) undocumented Returns true if the two GBounds intersect.
GBrowserIsCompatible()

This function returns true if the current browser supports the Google Maps API.

parameters
a bool If true, the agent name is used as the class attribute of the <body> element. What it means in practice is that your page behaves as if you had written <body class=”firefox”> or <body class=”msie”>, etc.
So by calling GBrowserIsCompatible(true) you can have different CSS behaviour depending on the browser, simply by writing different CSS styles for .opera, .netscape etc. The known compatible agent names are “opera”, “msie”, “safari”, “firefox”, “netscape” and “mozilla”. If another browser happens to pass the compatibility tests (by supporting regExp and DOM, and not being a known incompatible browser) then you get whatever it uses as its agent name.

GClientGeocoder

Implements calls to the Google Geocoder.
Constructor new GClientGeocoder(gcache, key, client, channel). The parameters are optional.

If the first parameter is present it specifies the GGeocodeCache or GFactualGeocodeCache to be used. If omitted, a new GFactualGeocodeCache is created.

If the second parameter is present it specifies a key to be used for geocoding. This key is only used if the API code itself was loaded without a key.

Methods
getAddresses(glatlng,callback) undocumetned Sends a reverse geocode request to the server.
Returns a structure similar to that returned by .getLocations(). If the request fails, it returns a structure containing an error code. (Now that the server is switched on, this works in versions from v2.98)
getAddressInBounds(glatlngbounds,callback) undocumetned Sends a reverse geocode request to the server.
Returns a structure similar to that returned by .getLocations(), but containing a single Placemark. Presumably the Placemark that best fits the size of the bounds of those returned by a reverse geocode request on the bounds centre.
getCache() Returns a reference to the cache being used.
getLatLng(address,function) Passes a GLatLng to the function that identifies the location that most closely matches the address. If no address is found, “null” is passed to the function. (From v2.131a, getLatlng() also accepts a GLatLng as the first parameter, and returns the GLatLng of the nearest geocodable location).
getLocations(address or latlng,function) Attempts to geocode the address or reverse geocode the latlng. and passes an anonymous structure containing reply details to the function. (Reverse geocoding using getLocations() works in versions from v2.131a)
reset() Resets the geocoder and clears its cache entries.
setCache(gcache) Changes the cache being used by the geocoder. If the parameter is omitted, caching is switched off.

Reverse geocoded locations

The reverse geocoder seems to have two modes: street mode and town mode.

If your GLatLng is within about 100 metres of an addressable street known to the database, then the returned information is for the street address. If your GLatLng is more than about 100 metres from a known street address, then the returned information is for a nearby town, which could be tens of kilometres away.

Note that reverse-geocodable addresses are not the same as street locations known to GDirections. Roads that have no properties, such as country lanes and interstates, may have only one reverse-geocodable address along their entire length.

For example, reverse geocoding (28.48282,-82.04569) returns you the correct street name, “N Grade Rd, Webster, FL 33597, USA” but the returned coordinates are over 4 kilometers away. The nearby point (28.48400,-82.04697) is over 100 metres from “N Grade Rd” so it returns “Sumter South, Florida, USA” which is over 21 kilometres away.

GControl()

Creates a “control” structure, such as GMapTypeControl() or GLargeMapControl().
It is possible to create your own “control” structures with it, by applying your own methods.
Constructor new GControl(a,b);
a bool Set this true if the control structure is to be included when the map is printed.
If false or omitted, the structure is given the attribute class=”gmnoprint”.
b bool Set this true if the control structure is “selectable” (?).
Methods
clear() undocumented ?????
copy() undocumented Returns a copy of this GControl
getDefaultPosition() Set this to a function that returns the default position of your control structure as a GControlPosition() object.
initialize(a) Set this to a function that creates your control structure.
The optional parameter can be anything you want, just pass a suitable value when you use map.addControl() on it.
printable() Returns the first bool value you set in the constructor
selectable() Returns the second bool value you set in the constructor
GControlPosition()

Can be used to control the placement of GControl() objects.
Constructor new GControlPosition(anchor,offset);
anchor integer Specifies a corner of the map. Use one of the G_ANCHOR_BOTTOM_LEFT type variables.
offset GSize() Specifies the distance of the nearest point of the control div from the specified corner.
Methods
apply(element) Applies style attributes to an element that cause it to be positioned in the specified location. The element need not necessarily be the div of a GControl() object.
example
Suppose we have any HTML element with the attribute id=”message”. It can be positioned near the top left corner of the map by using

var pos = new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(100,10));
pos.apply(document.getElementById(“control”));
document.getElementById(“map”).appendChild(document.getElementById(“control”));
This simply positions the element on top of the map. It doesn’t turn it into a GControl(). Info windows will not attempt to avoid passing underneath it.
GCopyright

Stores the copyright texts for a region and range of zoom levels.
Constructor GCopyright(id, bounds, minZoom, text)
id integer Each GCopyright object must have a different id.
bounds GLatLngBounds Specifies the region of the map to which the copyright applies.
minZoom integer Specifies the lowest zoom level to which the copyright applies.
text string The copyright text to be displayed.
maxZoom integer Specifies the highest zoom level to which the copyright applies.
f boolean I’m not sure what this does

properties and methods GCopyright has no accessible properties or methods.

GCopyrightCollection()

Holds all the GCopyright() objects that are related to a particular GTileLayer().
This initially starts off empty, but whenever the map changes to display a region where the information has not been collected, a new GAddCopyright() object will be fetches from the server and added to the collection.
Constructor new GCopyrightCollection(prefix)

parameters
prefix text Text to appear in the copyright string before the name of the copyright owner.
methods
addCopyright(gcopyright) Adds information from a GCopyright object to the collection.
getCopyrightNotice(latlngbounds,zoom) Returns a string containing the assembled copyright notice for the specified region and zoom level.
getCopyrights(latlngbounds, zoom) Returns an array of copyright strings that apply to the specified region and zoom level.
GDirections()

Constructor new GDirections(map, sidebar)
Both paramters are optional.

If the first parameter is present, then the route will be plotted on the map as a polyline with start and end markers, and the map will be centred and zoomed to fit the route. (You don’t need to have previously performed map.setCenter().)

If the second parameter is present, then the route information will be appended to that HTMLElement, just like they are in the sidebar on maps.google.com.

If both parameters are used, then clicking on the entries in the sidebar will cause blowups to be shown on the map.

Methods
load(query,options) This is the Method that does all the hard work.
The first parameter is a string in the format “from: address to: address …”, e.g. “from: Chicago to: Pittsburgh to: New York”
The second parameter contains options
Note:GDirections.load() is asynchronous.
loadFromWaypoints(array,options) The same as .load() except that the first parameter is an array of locations, e.g. [“Chicago”, “Pittsburgh”]
clear() Removes the direction information, removes the overlays, clears out the sidebar info.
getBounds() returns a GLatLngBounds that bounds the directions
getCopyrightsHtml() returns a HTML string containing the copyright associated with the directions.
getDistance() returns an Object that contains the distance information
.getDistance().html is a HTML string that describes the distance in suitable units
.getDistance().meters is a number indicating the distance in metres
getDuration() returns an Object that contains the duration information
.getDuration().html is a HTML string that describes the duration in suitable units
.getDuration().seconds is a number indicating the estimated duration in seconds
getGeocode(n) returns an Object that contains Geocode information about the start and end points.
.getGeocode(n).AddressDetails contains the address details returned from the geocoder
.getGeocode(n).Point contains the coordinates as three entries in an array: longitude, latitude and altitude
.getGeocode(n).address is a string containing the parsed address
.getGeocode(n).id – I don’t know what this does.
getMarker(n) returns a reference to the start or end marker
getNumGeocodes() returns the number of geocodes
getNumRoutes() returns the number of routes (each waypoint adds an additional route)
getPolyline() returns a reference tot he polyline
getRoute(n) returns a GRoute Object
getStatus() returns an Object that contains the completion status
.getStatus().code returns the status code. 200=success. The error codes are the same as the error codes for geocoding.
.getStatus().request always seems to return “directions” even if the error obviously occurred in the geocoding.
getSummaryHtml() returns a HTML string containing something like “790 mi (about 12 hours 28 mins)”
Options
avoidHighways bool Set this true to obtain a route that avoids highways
getPolyline bool Instructs the system to return Polyline data. This defaults to true if the GDirections() Object was created with a map parameter.
getSteps bool Instructs the system to return text direstions. This defaults to true if the GDirections() Object was created with a sidebar parameter.
locale string Specifies the language to be used
preserveViewport bool Suppresses the zoom that normally fits the view to the direction results.
travelMode integer Set this to G_TRAVEL_MODE_WALKING to obtain a route that is allowed to do things like walk the wrong way up one-way streets, avoids highways, and walks at lower speeds (which affects the choice of fastest route). It even goes at different speeds uphill and downhill.

GDownloadUrl()

This function will perform the GXmlHttp() processing required to fetch the contents of a text file. The specified file is read asynchronously, and when the read is complete, the data is passed as one long string to specified function.
You could use this to read a plain text data file, and use the String.split() method to split the result.

You could use this to read snippets of HTML code from a server, and drop the whole thing into a side panel

loadPanel = function(a) {
document.getElementById(“sidePanel”).innerHTML = a;
}
GDownloadUrl(“server.php?query=getdetials&id=fred”, loadPanel);
parameters
a string The URL of the file to be loaded.
b function The function to be called when the load has completed.
c string (Optional) Request to be POSTed to the server. If absent, the GET method will be used rather than POST.
d string (Optional) MIME type of the POST request. The default is “application/x-www-form-urlencoded”.
With the GET method, any request data is limited to the 512 bytes that can be appended as parameters to the end of the URL.
With the POST method, large amounts of request data can be sent to the server, and the MIME type can be specified.
GDraggableObject

Constructor new GDraggableObject(HTMLElement, opts)
Options
container HTML Element An element that will act as a bounding box for the draggable object
draggableCursor string The cursor to show on mousover.
draggingCurosr string The cursor to show while dragging.
left Number The left starting position of the object.
top Number The top starting position of the object.
restrictX Boolean undocumented I have no idea what this does.
scroller object of unexposed class undocumented Object that performs the actual drag operation.

Properties
left Horizontal starting position of object
top Vertical starting position of object

Note Setting the .top and .left of a GDraggableObject() will not immediately move the html element. The element will jump to the specified position the next time it starts to be dragged.

Static Methods
getDraggableCursor() Returns a string containing the current draggable cursor setting.
getDraggingCursor() Returns a string containing the current dragging cursor setting.
setDraggableCursor(string) Sets the cursor to be used for subsequent draggable objects
setDraggingCursor(string) Sets the cursor to be used for subsequent draggable objects while they are being dragged

Standard cursors are “auto”, “crosshair”, “default”, “help”, “move”, “pointer”, “text”, “wait”, and in some browsers “hand”.

See Custom Cursors for info about using your own custom cursors.

Instance Methods
disable() Disables dragging
dragging() Returns true if the object is currently being dragged
enable() Enables dragging
enabled() Returns true if dragging is currently enabled
moveTo(see below) Moves the object to the specified location
moveBy(see below) Moves the object by the specified pixel offset

The parameters for .moveTo() in v2.84 to v2.88 were two integers: left, top.
From v2.89 there’s a single GPoint() parameter.

The parameters for .moveBy() in v2.86 to v2.88 were two integers: left, top.
From v2.89 there’s a single GSize() parameter.

GEvent

Handles event registration and triggering.
Here’s a list of the event types that can occur on directly accessible objects.
GCopyrightCollection newcopyright
GMap2 addmaptype, addoverlay, clearoverlays, click, dblclick, drag, dragend, dragstart, infowindowbeforeclose, infowindowclose, infowindowopen, infowindowprepareopen, infowindowupdate, load, maptypechanged, markerload, markerunload, move, moveend, movestart, mousemove, mouseout, mouseover, mousewheel, removemaptype, removeoverlay, resize, singlerightclick, tilesloaded, zoomend, zooming, zoomstart, DOMMouseScroll
GMap [all the GMap2 events], zoom
GMapType newcopyright
GMarker click, changed, dblclick, infowindowbeforeclose, infowindowclose, infowindowopen, infowindowprepareopen, mousedown, mouseout, mouseover, mouseup, remove, updatejson, visibilitychanged
GMarkerManager changed
GPolygon click, remove, visibilitychanged
GPolyline click, remove, visibilitychanged
GTileLayer newcopyright
GKeyboardHandler moveend, movestart
GInfoWindow animate, closeclick, maximizeclick, maximizeend, restoreclick, restoreend
anything clearlisteners
document logclick
GDraggableObject click, dblclick, drag, dragend, dragstart, mousedown, mouseup, move
GLargeMapControl zoomto
GGeoXml load, refreshpointhook
GStreetviewPanorama drivingdirectionsinfo

GEvent.addDomListener() Adds an event listener to a HTML element.
parameters
a object The html element on which the events may occur, e.g. document.getElementById(“button”)
b string The name of the event, e.g. “click” or “moveend”
c function A function to handle the event. Can be an anonymous function or a function name.

GEvent.addListener() Adds an event listener.
parameters
a object The object on which the events may occur, e.g. a marker or the map
b string The name of the event, e.g. “click” or “moveend”
c function A function to handle the event. Can be an anonymous function or a function name.

GEvent.bind() Binds the given method of the given object to the given source event
parameters
a object The object on which the events may occur, e.g. a marker or the map
b string The name of the event, e.g. “click” or “moveend”
c object The object which will be the “this” when the method is called
d method A method to handle the event

GEvent.bindDom() Binds the given method of the given HTML Element to the given source event
parameters
a object The HTML Element on which the events may occur, e.g. document.getElementById(“button”)
b string The name of the event, e.g. “click” or “moveend”
c object The object which will be the “this” when the method is called
d method A method to handle the event

GEvent.callback() Returns a function that calls the second parameter as a method of the first parameter.
parameters
a object the object to which the method is to be applied
b function the function to be used as a method of the object

GEvent.callbackArgs() Returns a function that calls the second parameter as a method of the first parameter.
parameters
a object the object to which the method is to be applied
b function the function to be used as a method of the object
Any additional parameters are passed to the method

GEvent.clearInstanceListeners() Removes all listeners on a specified object.
parameters
a object The object on which the events may occur, e.g. a marker or the map

GEvent.clearListeners() Removes all listeners of a specified type on a specified object.
parameters
a object The object on which the events may occur, e.g. a marker or the map
b string The name of the event, e.g. “click” or “moveend”

GEvent.clearNode() Removes all listeners on a specified object and those on its child nodes.
parameters
a object The object on which the events may occur, e.g. a marker or the map

GEvent.removeListener() Removes a named listener.
parameters
a listener The listener to be removed. Use the token that was returned from the GEvent.addListener() call

GEvent.trigger() Triggers an event.
parameters
a object The object on which the events is to be triggered, e.g. a marker or the map
b string The name of the event, e.g. “click” or “moveend”
Any additional parameters are passed tot he event handler function.
GFactualGeocodeCache

Stores Geocode information.
Constructor new GFactualGeocodeCache()

It is the same as the GGeocodeCache class, except that its .isCacheable() method performs stricter tests.

GGeocodeCache

Stores Geocode information.
Constructor new GGeocodeCache()

Methods
get(address) Returns the reply that was stored for this address.
isCacheable(reply) Returns true if the GClientGeocoder.getLocations() reply should be cached.
put(address,reply) Stores the address and its reply in the cache, if the reply is cacheable.
reset() Erases the contents of the cache.
toCanonical(address) Returns the address in “canonical” form, using standardized punctuation and lower case.
GGeoXml

Renders a KML or GeoRSS file as a map overlay.
Constructor
GGeoXml accepts an indefinite number of parameters, which include:

parameters
url string URL of KML or GeoRSS file
The file must be placed on a webhost where the Google server can read it
callback function Function to be called when processing is complete
sideBarHandler function undocumented Function to be notified of the structure and contents of the items added
opts options object undocumented I don’t know what options are available.
Use map.addOverlay() to add the overlay to the map.

methods
copy() Returns a new GOverlay that is a copy of this one.
initialize() Used by map.addOverlay() to set up the overlay.
redraw() The overlay is redrawn.
remove() Used by map.removeOverlay() to recover memory.
supportsHide() Returns false, thus indicating that the overlay does not support .hide(), .show() and .isHidden()
getDefaultBounds() Returns a GLatLngBounds that contains all the objects added.
getDefaultCenter() Returns a GLatLng at the centre of those bounds.
getDefaultSpan() Returns a GLatLng. The coordinates of the GLatLng represent the width abd height of those bounds.
getTileLayerOverlay() Returns the tile layer overay that GGoeXml has used, if there is one. Otherwise returns null.
gotoDefaultViewport() Sets the viewport to fit the objects added
hasLoaded() Returns true if the loading is complete
loadedCorrectly() Returns true if the XML file loaded correctly (only meaningful if .hasLoaded() is true)
hide() Hides all the child overlays that support .hide() .
show() Unhides all the child overlays that support .hide() .
isHidden() Returns true if currently hidden by .hide()
supportsHide() Returns true

Extra overlay properties

GGeoXml can add extra properties to the overlays that it creates. They are all undocumented. Note that not all overlays have all these properties. They always seem to have description, snippet and name but the presence of other properties varies. It’s possible that you either get hiddenInStream or (parentGeoXml and parentFolderForCallbackOverlayAddTimeout) I’m not sure about that.
description text from the <description> field in the KML
name text from the <name> field in the KML
snippet text from the <snippet> field in the KML
hiddenInStream boolean: I don’t know what this does
parentFolderForCallbackOverlayAddTimeout Integer: I don’t know what this does
parentGeoXml pointer to the parent GEoXml object
GGroundOverlay

Renders an image file as a map overlay.
Constructor new GGroundOverlay(url, latlngbounds, opts)

Use map.addOverlay() to add the overlay to the map.

methods
copy() Returns a new GOverlay that is a copy of this one.
hide() Hides the overlay
initialize(map) Used by map.addOverlay() to set up the overlay.
isHidden() returns true if the overlay is hidden
redraw() Redraws the overlay.
remove() Used by map.removeOverlay() to recover memory.
show() Shows the overlay
supportsHide() Returns true, thus indicating that the overlay supports .hide(), .show() and .isHidden()

The .hide() and .show() methods also exist, but they simply throw a “Interface not implemented” error.

I don’t know what options exist or what they do. The code that handles the opts is particularly obscure.

GHierarchicalMapTypeControl()

A GControl() structure that manages map type switching, typically in the top right corner of the map. Has all the properties and methods of the GControl() class.
Similar to GMapTypeControl() except that it uses a parent/child layout instead of a row of separate buttons.

It additionally accepts an optional parameters.

parameters
tiny bool If present and true, the control will use short names in the map type buttons.

methods
addRelationship(parent, child, name, isDefault) Makes one map type a child of another.
The first two parameters are required references to the parent and child GMapType instances.
The third optional parameter allows you to specify a different name for the child box in the layout.
The fourth optional parameter can be set true to cause the child maptype to be activated when the parent maptype is selected.
removeRealationship(child) Removes the relationship from a child GMapType.
clearRelationships() Clears all the relationships. All GMapTypes become parents.
GIcon()

Constructor new GIcon(gicon, image, label, shadow)
All parameters are optional.
If the first parameter is present, then all properties of that GIcon() object are copied to the new GIcon().

If the second parameter is present, then it is used for the GIcon().image property.
If the fourth undocumented parameter is present, then it is used for the GIcon().shadow property.
E.g. var myIcon = new GIcon(G_DEFAULT_ICON, “mymarker.png”)creates a GIcon() that has the same shape and size as the default icon, but has a different image.

If the third undocumented parameter is present it is used as a “label”
A “label” is an extra image component that lies on top of the main icon image. This feature allows you to build your icon from a background image plus a foreground label. Prior to the introduction of this feature, if you wanted to have markers with different letters and different background colours, you had to create a separate icon image for each combination.
The label is an object of unnamed class that has the following properties:
label undocumented
url This string identifies the URL of the label image file.
size A GSize() object that identifies the pixel size of the label image.
anchor A GPoint() object that identifies the position offset of the label image relative to the main image.
properties
image This string identifies the main image of the marker.
iconSize A GSize() object that identifies the pixel size of the main image.
shadow Optional string that identifies the image to be used for the shadow.
shadowSize A GSize() object that identifies the pixel size of the shadow image.
iconAnchor A GPoint() object which identifies the pixel which will be placed on the specified geographical location. You can think of it as the point that the image points at.
infoWindowAnchor A GPoint() object which identifies the pixel that the tip of the info window stem will touch.
label undocumented (Optional) see above
transparent (Optional) is the name of a transparent image used for capturing clicks and mouseovers in IE.
printImage (Optional) identifies a GIF file to be used for printing.
mozPrintImage (Optional) identifies a GIF file to be used for printing from the Mozilla or Firefox browser.
printShadow (Optional) identifies a GIF file to be used for printing the shadow.
imageMap (Optional) an array of integers representing the “shape” parameters of a HTML ImageMap. Used for capturing marker clicks in non-IE browsers.
imageMapType (Optional) Undocumented specifies the shape type of the ImageMap. Can be “poly”, “circle” or “rect”.
dragCrossAnchor GPoint(): indicates the hot spot of the drag cross image, but with the x coordinate negated. E.g. if you want the anchor point of your image to be the pixel (4,9) then you need to specify “new GPoint(-4,9)”
dragCrossImage String: indicates an image to be used as the drag cross. If you set it to the null string, you get the default drag_cross_67_16.png image.
dragCrossSize GSize(): indicates the size of the drag cross.
maxHeight integer: The maximum difference in height between the marker anchor and the drag cross anchor during dragging. Setting the maxHeight to zero causes it to use the default 13.
sprite Undocumented Object of format {image:string, width:number, height:number}. If it exists, it is used instead of .image and .iconSize
GInfoWindow()

There is only one object in the GInfoWindow class. You can obtain a reference to it via map.getInfoWindow() and then use its methods.
The class itself in no longer exposed, so you can’t create new GInfoWindow() objects.

Properties GInfoWindow has no accessible properties

methods
create(pane1,pane2) undocumented Used by .initialize() to create the divs.
The parameters are references to the panes in which the info window and the shadow are to be placed.
getContentContainers() Returns the array of HTML Elements reprenting the contents of each tab.
getTabs() Returns the array of GInfoWindowTab() objects in this info window
maximize(instant) Expands the infowindow. Only works if the infowindow has a maxUrl or maxContent.
If the undocumented parameter is true, then the large infowindow opens instantly, otherwise an animation is performed.
restore(instant) Contracts an expanded infowindow. Only works if the infowindow has a maxUrl or maxContent.
If the undocumented parameter is true, then the small infowindow opens instantly, otherwise an animation is performed.
getPixelOffset() Returns the pixel offset of the info window
getPoint() Returns a GLatLng indicating the location of the info window
getSelectedTab() Returns a number indicating which tab is selected, counting from zero.
hide() Makes the info window invisible
initialize(map) undocumented Used by the openInfoWIndow methods to create the info window if it does not exist
isHidden() Returns true if the info window is hidden or closed
redraw(force) undocumented Redaws the info window if the parameter is true.
remove() undocumented destroys the info window divs
reset(point, tabs, size, offset, selectedTab) Changes some or all of the info window properties.
The fourth and fifth arguments are optional.
point: a GLatLng() indicating the geographical location.
tabs: array of GInfoWindowTab()s with HTML DOM elements (not HTML text strings) in the contentElem.
size: a GSize() indicating the size of the info window display area. When using .reset(), the API will not automatically calculate the size for you, but will enforce the minimum size if you try to set it smaller.
offset: (optional) a GSize() indicating the pixel offset.
selectedTab: (optional) an integer indicating which tab is selected.
selectTab(i) Activates the specified tab
show() Makes the info window visible
supportsHide() Returns true, thus indicating that the overlay supports .hide(), .show() and .isHidden()
disableMaximize() If the info window is open, removes the “maximize” icon from the info window and disables maximization.
enableMaximize() If the info window is open, displays the “maximize” icon in the info window and enables maximization if the corresponding options are set.
copy() Undocumented Currently does nothing.

GInfoWindowTab()

These are used to hold information about the tabs of tabbed info windows.
Constructor
new GInfoWindowTab(label,contents)

properties
contentElem undocumented HTML elements representing the contents of the info window corresponding to this tab
It must be a HTML DOM element if using .openInfoWindow(), and must be a HTML string if using .openInfoWindowHtml().
name undocumented Text displayed in the tab to identify it
onclick undocumented Possibly an optional function to be called when the tab is clicked.
GKeyboardHandler()

Create one of these if you want your map to respond to keyboard input like Google Local does.
Constructor
new GKeyboardHandler(map,window)

(The second parameter is undocumented)

The GKeyboardHandler has no accessible properties or methods.

GLargeMapControl()

A GControl() object controlling zooming an panning
Has all the properties and methods of the GControl() class.
GLargeMapControl3D()

A GControl() object controlling zooming an panning, using the new “3D” graphics
Has all the properties and methods of the GControl() class.
GLatLng()

Identifies a geographical location.
Constructor new GLatLng(latitude,longitude, nofix)
(Note that the latitude and longitude are in the opposite order from GPoint)
If the optional nofix parameter is absent or false, the latitude is restricted to the range -90 to +90, and the longitude is wrapped round the globe to the value in the range -180 to +180. E.g. (-100,270) would become (-90,-90)

The constructor initially creates the x and y parameters as copies of the hidden parameters that control the location. Changing the values of the x and y parameters does not change the location of the GLatLng object.

Properties
y Latitude expressed in degrees (read only, deprecated)
x Longitude expressed in degrees (read only, deprecated)
Methods
lat() Returns the latitude
lng() Returns the longitude
latRadians() Returns the latitude expressed in radians
lngRadians() Returns the longitude expressed in radians
distanceFrom(latlng, radius of planet) Returns the distance expressed in metres from the specified location.
The second parameter is optional.
equals(latlng) Returns true if the two latlngs identify the same location
toString() undocumented Returns a string in the format “(1.123456789,-1.123456789)”
toUrlValue(n) Returns a string in the format “1.123457,-1.123457”. The values are rounded to n decimal places (default 6).

Static Methods
GLatLng.fromRadians(lat,lng,nofix) undocumented Constructs a GLatLng from radian values instead of degrees
GLatLng.fromUrlValue(string) undocumented Constructs a GLatLng from a string in the format “1.123457,-1.123457”.
GLatLngBounds()

Identifies a rectangular geographical region
Constructor new GLatLngBounds(latlng,latlng)
If two parameters are passed, they are taken to represent the SouthWest and NorthEast corners of the rectangle. The corners must be in the right order for it to work correctly.
If one parameter is passed, the region contains just that point.
If no parameters are passed, the regions is set to the empty region GLatLngBounds(new GLatLng(57.29577951308232, 180), GLatLng(-57.29577951308232, -180)). (The corners are in the wrong order).

All the coordinates are normalized into the range -90 to +90 for the latitudes and -180 to +180 for the longitudes.
properties: GLatLngBounds has no accessible properties

Methods
contains(latlng) Returns true if the bounds contain the location
containsBounds(latlngbounds) Returns true if it fully contains the other bounds
containsLatLng(glatlng) Returns true if it contains the GLatLng
equals(latlngbounds) Returns true if the bounds are equal
extend(latlng) Enlarges the bounds to be the smallest rectangle containing the previous area plus the specified location
getCenter() Returns a GLatLng representing the centre
getNorthEast() Returns a GLatLng representing the NorthEast corner
getSouthWest() Returns a GLatLng representing the SouthWest corner
intersects(latlngbounds) Returns true if the two bounds intersect
isEmpty() Returns true if the bounds specify a negative region (i.e. the corners are specified in the wrong order)
isFullLat() Returns true if the latitude range covers the whole Earth from -90 to +90
isFullLng() Returns true if the longitude range covers the whole Earth -180 to +180
toSpan() Returns a GLatLng object which represents the width and height of the region.
toString() undocumented Returns a string in the format ((33.123, -120.123), (45.123, -100.233)). The values may differ slightly from what you originally specified due to being converted to radians and back to degrees.
Static Methods
GLatLng.fromUrlValue(string) undocumented Constructs a GLatLngBounds from a string which contains four numbers separated by commas. Other punctuation is ignored, so a string with brackets, like that output by .toString(), will also work.
GLayer()

Adds a Panoramio or Wikipedia overlay to the map.
Constructor new GLayer(ID or LMC)

The list of official IDs is at spreadsheets.google.com/pub?key=p9pdwsai2hDN-cAocTLhnag . In additon to the official IDs, there are “com.paroramio.popular” and a few more Wikipedia languages than are officially listed.

It’s also possible to use an LMC instead of an ID. The only available LMC that I lnow of that doesn’t have an ID is “lmc:panoramio/1”. Use map.addOverlay() to add the overlay to the map.

methods
initialize(map) Used by map.addOverlay() to set up the overlay.
hide() Hides the layer
redraw(bool) Redraws the overlay.
remove() Used by map.removeOverlay() to recover memory.
show() Shows a hidden layer
setParameter() undocumented I don’t know what this does

static methods
addInitializer() undocumented I don’t know what this does
isHidden(ID) Returns true if the specified layer is hidden
GLoad()

undocumented
This function is used during the API loading sequence, to load the API.

GLoadMapsScript()

undocumented
This function is used during the API loading sequence to load the selected API Javascript file.

GLog()

A system that allows debugging information to be displayed.
The GLog() methods are all static. You call them like ‘GLog.write(text);’ rather than using ‘var log = new GLog(); log.write(text)’
methods
write(txt,colour) Writes the text to a log window that appears at the bottom of the screen.
The optional colour parameter can be a string containing a colour specification, like “blue” or “#FF8888”.
writeHtml(txt) Writes the text to a log window that appears at the bottom of the screen, applying any HTML formatting.
writeUrl(txt) Writes the text to a log window that appears at the bottom of the screen, formatted as a clickable link.
getMessages() undocumented Returns an array of strings containing the text of all messages perviously written.
GMap()

A Gmap() object is a GMap2() object with a few extra methods layered on top, to provide backward compatibility.
Constructor new GMap(a,b,c,d)

parameters
a html element The map container, usually a <div>
b[ ] array of maptypes (optional) list of map types allowed on this map
c integer (optional) Width of map
d integer (optional) Height of map
properties GMap() has no accessible properties

additional methods
centerAndZoom(point,zoom) Centres and zooms the map
centerAtLatLng(point) Centres the map
getBoundsLatLng() Returns a GBounds() object identifying the map bounds.
getCenterLatLng() Returns a GPoint() identifying the centre
getSpanLatLng() Returns a GSize() identifying the width and height of the map in lng and lat degrees
getZoomLevel() Returns the APIv1 type zoom level.
Note that this can be a negative value when the new deep v2 zoom levels are active.
openInfoWindowXslt() Does nothing
recenterOrPanToLatLng(point) Centres the map, doing a fluid pan to the point if it is within the current viewport
zoomTo(zoom)
overwritten methods These methods overwrite the GMap2() methods of the same name
setMapType(a) Sets the map type. The parameter is a GMapType() object.
openInfoWindow(a,b,c,d,e) Opens the info window, see below for parameters
openInfoWindowHtml(a,b,c,d,e) Opens the info window, see below for parameters
Modified Event Returns
zoomend oldZoom, newZoom (using APIv1 zoom level syntax)
GMap2()

Constructor new GMap2(container,opts)
parameters
container html element The map container, usually a <div>
opts (optional)Anonymous object may contain more information

opts If you want to set up any of the other internal properties of your GMap2() you have to bundle them into an anonymous object. The constructor copies the named properties of this anonymous object into the hidden internal properties of the GMap2. E.g.

var map = new GMap2(document.getElementById(“map”),{mapTypes:[G_SATELLITE_TYPE]});
option type purpose
draggableCursor string Specifies a cursor to use when the map is draggable
draggingCursor string Specifies a cursor to use when the map is being dragged
googleBarOptions options object Specifies a set of options to be applied to the Google Bar, if present
logoPassive string undocumented Set true to make the Google Logo unclickable.
mapOrderMarkers function(GMarker,GMarker) returning an integer undocumented The API will use this as an “order function” in an Array.sort() call, to sort its internal array of markers.
The function should return a negative or positive value depending on whether the first GMarker is to be sorted before or after the second GMarker.
I have no idea why you might want to do this.

mapTypes Array of GMapType()s List of map types allowed on this map
noResize bool undocumented Suppresses “resize” events
size GSize() Size of map
suppressCopyright bool undocumented Set true to suppress the copyright message (e.g. for overview maps and blowup maps)
usageType string undocumented Possible values are “o” for overview maps and “p” for blowup maps.
Standard cursors are “auto”, “crosshair”, “default”, “help”, “move”, “pointer”, “text”, “wait”, and in some browsers “hand”.

See Custom Cursors for info about using your own custom cursors.

googleBarOptions

The possible entries in the googleBarOptions are:
option type purpose
linkTarget string Use one of these string variables to control the link target pane G_GOOGLEBAR_LINK_TARGET_BLANK, G_GOOGLEBAR_LINK_TARGET_PARENT, G_GOOGLEBAR_LINK_TARGET_SELF, G_GOOGLEBAR_LINK_TARGET_TOP
resultList string Use one of these string variables to control result list suppression G_GOOGLEBAR_RESULT_LIST_INLINE, G_GOOGLEBAR_RESULT_LIST_SUPPRESS
onGenerateMarkerHtmlCallback function Function to be called when the info window is about to be opened on one of the results. Must return the (modified) html string to be used for the info window contents.
onIdleCallback function Function be be called when the GoogleBar finishes searching
onMarkersSetCallback function Function to be called after the markers have been placed on the map.
onSearchCompleteCallback function Function to be called when the search is complete, before the reults are plotted
showOnLoad bool If true, the Google Bar will be expanded when the map has loaded.
suppressInitialResultSelection bool If true, the info window is not opened on the firest result.
suppressZoomToBounds bool If true, the map does not zoom and pan to fit the results.

methods
addControl(control,controlposition) Causes the GControl() object to be added to the map If a GControlPosition() is not specified, the getDefaultPosition() is used.
addMapType(maptype) Adds a map type to the map
addOverlay(overlay) Causes the overlay to be added to the map.
checkResize() Checks to see if the map container has changed size, and if so resizes the map
clearOverlays() Removes all overlays except GTileLayerOverlay()s.
closeInfoWindow() Closes the info window
continuousZoomEnabled() Returns true if “continuous zoom” animations are enabled.
disableContinuousZoom() Disables the “continuous zoom” animations.
disableDoubleClickZoom() Causes double-click to just centre the map.
disableDragging() Disables map dragging
disableGoogleBar() Removes the Google Bar
disableInfoWindow() Disables the info window
diablePinchToZoom() Disables the Pinch-to-zoom feature on multitouch capable devices.
disableScrollWheelZoom() Disables the scroll wheel zoom.
doubleClickZoomEnabled() Returns true if double click zoom is enabled.
draggingEnabled() Returns true if map dragging is enabled.
enableContinuousZoom() Enables the “continuous zoom” animations – zooming in or out by one level is then amimated.
enableDragging() Enables map dragging.
enableDoubleClickZoom() Causes double-click to zoom in by one level and centre the map.
enableInfoWindow() Enables the info window
enableGoogleBar() Activates a Google Bar on top of the Google Logo
enablePinchToZoom() Enables the Pinch-to-zoom feature on multitouch capable devices.
enableScrollWheelZoom() Enables the scroll wheel zoom.
focus() Undocumented If the info window is open, returns its location as a GLatLng().
fromContainerPixelToLatLng(point) Converts a container pixel to a GLatLng()
fromDivPixelToLatLng(latlng,nofix) Converts a “dragObject” div pixel to a GLatLng()
If the optional second undocumented parameter is true, then the output is not normalized.
Note: The values for ContainerPixel and DivPixel are initially the same, but the div moves when the map pans and the container doesn’t. Markers keep the same DivPixel position when the map moves, and only get a new value when it zooms.

fromLatLngToContainerPixel(latlng) Converts a GLatLng() to a pixel relative to the map container.
fromLatLngToDivPixel(latlng,point) Converts a GLatLng() to a “dragObject” div pixel
The optional second parameter is for resolving normalization ambiguities. When zoomed out, the same latlng position can be present on more than one tile. Without the second parameter, the copy nearest the centre is chosen. If the second parameter is present, its .x value controls which copy is chosen.
getBounds() Returns a GLatLngBounds which indicates the bounds of the region covered by the map.
getBoundsZoomLevel(latlngbounds) Returns the number of the deepest permitted zoom level of the current map type which is large enough to contain the specified region.
getCenter() Returns a GLatLng() indicating the centre point of the map.
getContainer() Returns a reference to the map <div>
getCurrentMapType() Returns a reference to the current GMapType()
getDefaultUI() Returns the default User Interface for this map.
.getDragObject() Returns a reference to the special GDraggableObject that contains all the parts of the map that move when the map pans: the map tiles and overlays, but not the map controls.
All the properties and instance methods of GDraggableObject are accessible.
.getEarthInstance(callbackfn) Obtains the instance of the Google Eath Plugin. The instance reference is returned to the callback function.
Posessing the instance reference allows Google Earth API calls to be performed on the Google Earth maptype within Google Maps. For example this call makes the Google Map “borders” layer visible.

map.getEarthInstance(function(earth) {
earth.getLayerRoot().enableLayerById(earth.LAYER_BORDERS, true);
});
getInfoWindow() Returns a reference to the info window object.
getMapTypes() Returns an array of GMapType()s that are allowed on this map.
getPane(i) Returns a reference to one of the map panes.
The draggable part of the map contains seven html <div> elements referred to as “panes”. Different types of map elements are placed in different panes, e.g. the map tiles are placed in the lowest pane, markers are placed on a higher plane.
The values G_MAP_MARKER_SHADOW_PANE, G_MAP_MARKER_PANE, G_MAP_FLOAT_SHADOW_PANE, G_MAP_MARKER_MOUSE_TARGET_PANE, G_MAP_FLOAT_PANE can be used to specify a specific pane.

getSize() Returns a GSize() object indicating the size of the map in pixels.
getZoom() Returns the current zoom level number.
hideControls() undocumented Hides all hideable controls. The Logo, copyright and Terms are not hideable, all other controls are hideable.
infoWindowEnabled() Returns true if the info window is enabled
infoWindowSizeWatcher() undocumented This has something to do with GGeoXml.
isLoaded() Returns true if the map has a map type.
When initially created, a map has no map type. It will be given a map type the first time that setCenter() or setMapType() or setZoom() is used.
openInfoWindow(a,b,c) Opens the info window, see below for parameters
openInfoWindowHtml(a,b,c) Opens the info window, see below for parameters
openInfoWindowTabs(a,b,c) Opens the info window, see below for parameters
openInfoWindowTabsHtml(a,b,c) Opens the info window, see below for parameters
panBy(gsize) Pans the map by the specified number of pixels in the x and y directions.
panDirection(a,b) Pans in the direction specified by (a,b)
e.g. map.panDirection(2,-1) causes the screen to pan two units North and one unit West
Each pan unit is equal to half a screen.
panTo(a) Recentres or pans to the specified GLatLng() position
pinchToZoomEnabled() Returns true if the Pinch-to-zoom feature for multitouch capable devices is enabled.
removeControl(a) Removes a GControl(). The parameter is the token returned from addControl()
removeMapType(maptype) Removes a map type
removeOverlay(a) Removes an overlay.
returnToSavedPosition() Resets the map to the values saved by map.savePosition()
savePosition() Saves the map centre and zoom level information which gets used when the user clicks on the “Return to last result” icon
scrollWheelZoomEnabled() Returns true if the scroll wheel zoom is enabled.
setCenter(a,b,c) If “a” is present, it is a GLatLng() specifying the new map centre.
If “b” is present, it is n integer specifying the new zoom level.
If “c” is present, it is a GMapType() specifying the new map type.
All three parameters are optional.
setUI(gmapuioptions) Activates the specified User Interface.
setUIToDefault() Activates the default User Interface for this map.
setFocus(latlng,force) undocumented Normally when you zoom in or out, the centre point stays in a fixed location on the screen. setFocus(latlng) changes this behaviour so that the specified point is the one that remains in a fixed location. If a zoom animation is in progress, then setFocus is ignored unless the second parameter is set true.
setFocus() with no parameters changes things back to the default behaviour.
setMapType(a) Sets the map type. The parameter is a GMapType() object.
setZoom(a) Sets the zoom level. The parameter is an integer.
showControls() undocumented Makes hidden controls visible.
showMapBlowup(a,b) Opens the info window with a blowup maplet, see below for parameters
zoomIn(latlng,bool,bool) Zooms in by one zoom level
If the first undocumented parameter is present and the second parameter is present and true, then the map is centred at the specified GLatLng
If the first undocumented parameter is present and the second parameter is absent or false, then the map centre is shifted in such a way that the specified GLatLng remains in the same position relative to the map container
If the third undocumented parameter is present and set to true, then an animated zoom is performed if continuous zoom is enabled.
zoomOut(latlng,bool) Zooms out by one zoom level
If the first undocumented parameter is present then the map centre is shifted in such a way that the specified GLatLng remains in the same position relative to the map container
If the second undocumented parameter is present and set to true, then an animated zoom is performed if continuous zoom is enabled.
updateCurrentTab(modifier function, onupdate function) Updates the currently selected info window tab, causing a resize of the info window, without repositioning. The modifier function is used to modify the currently selected tab and is passed a GInfoWindowTab as an argument.
updateInfoWindow(tabs, onupdate function) Updates the content of the currently open info window, without repositioning. The info window is resized to fit the new content.
Event Returns
addmaptype maptype
addoverlay overlay
clearoverlays none
click overlay, latlng
dblclick overlay, latlng (the first parameter is always null)
drag none
dragend none
dragstart none
infowindowbeforeclose none
infowindowclose none
infowindowopen none
load none
maptypechanged none
move none
moveend none
movestart none
mousemove latlng
mouseout latlng
mouseover latlng
removemaptype maptype
removeoverlay overlay
resizeundocumented none
singlerightclick latlng, src, overlay
zoomend oldZoom, newZoom
zoomingundocumented none
zoomstartundocumented direction (+1=in, -1=out), latlng pivot, bool recentering
openInfoWindow() Methods

There are a set of 15 methods for opening info windows, 5 methods each for GMap(), GMap2() and GMarker() objects. Some of the methods are inherited by the GMap() class from the GMap2() class, and some are overwritten with different parameters.
I’m documenting them all in one chunk here, rather than repeating all the details 15 times.

The different methods take slightly different parameters. Chosen from this list:
point GLatLng() Geographical location.
htmlElem HTML DOM element Info Window contents expressed as a DOM Element.
htmlStr HTML string Info Window contents expressed as a string.
tabElemArray array of GInfoWindowTab()s One for each tab, with a HTML DOM element in the contentElem
tabStrArray array of GInfoWindowTab()s One for each tab, with a HTML string in the contentElem
offset GSize() (Optional) Pixel offset from the point.
selectedTab integer (Optional) Specifies the number of the tab to be initially selected. Counting from zero. If omitted, tab zero is selected.
maxWidth integer (Optional) (Possibly) Maximum width that can be considered for info window contents size calculations.
If omitted, the screen.width is used.
The height calculations go wrong if this is set less than 217, the minimum infoWindow contents width.
openFn function (Optional) Function to be called when the info window opens.
closeFn function (Optional) Function to be called when the info window closes.
opts anonymous object (Optional) may contain some or all of the following object properties:
selectedTab: integer
maxWidth: integer
noCloseOnClick: boolean
onOpenFn: function
onCloseFn: function
zoomLevel: integer
mapType: GMapType()
maxContent: string
maxTitle: string
pixelOffset: GSize()
undocumented maxHeight: integer
undocumented autoScroll: boolean
undocumented onPrepareOpenFn: function
undocumented onBeforeCloseFn: function
undocumented suppressMapPan: boolean
undocumented limitSizeToMap: boolean
undocumented contentSize: GSize
undocumented noClearOnClose: boolean
undocumented noCloseBeforeOpen: boolean
undocumented onCloseClick:function
undocumented onMaximizeClick:function
undocumented onRestoreClick:function
undocumented buttons: See below
for example: {pixelOffset:new GSize(32,5), maxWidth: 540}
Note: The onOpenFn, onPrepareOpenFn, onCloseFn and onBeforeCloseFn options only work for the map methods. When using marker.infoWindowOpen*(), those options are hijacked and replaced by calls to API internal functions that throw the corresponding events on the marker.

zoom integer (Optional) Zoom level for the contained map.
maptype GMapType() (Optional) Map type for the contained map

The individual methods take the following parameters:

GMap2().openInfoWindow(point,htmlElem, opts)
GMap2().openInfoWindowHtml(point, htmlStr, opts)
GMap2().openInfoWindowTabs(point, tabElemArray, opts)
GMap2().openInfoWindowTabsHtml(point, tabStrArray, opts)

GMap().openInfoWindow(point, htmlElem, offset, openFn, closeFn)
GMap().openInfoWindowHtml(point, htmlStr, offset, openFn, closeFn)
GMap().openInfoWindowTabs(point, tabElemArray, opts)
GMap().openInfoWindowTabsHtml(point, tabStrArray, opts)

marker.openInfoWindow(htmlElem, opts)
marker.openInfoWindowHtml(htmlStr, opts)
marker.openInfoWindowTabs(tabElemArray, opts)
marker.openInfoWindowTabsHtml(tabStrArray, opts)

GMap2().showMapBlowup(point, opts)
GMap().showMapBlowup(point, zoom, maptype, offset, openFn, closeFn)
marker.showMapBlowup(opts)

In addition there is GMap().openInfoWindowXslt() and marker.openInfoWindowXslt(). These methods do nothing. They do not open an info window. They exist only so that maps written using this documented v1 syntax don’t crash.

openInfoWindow() {buttons} option

Controls the display of the info window buttons.
It’s a bit complicated, because there are three layers of options:

The {buttons} option itself
The options for specifying the four types of button: close, maximise, restore and fullscreen
The options for specifying the details of each button.
For example
marker.openInfoWindowHtml(html, {buttons:{close:{height:16,width:5}}});
moves the close button up nearer the corner of the info window.
The syntax allows for lots of different button details to be set, but many of them get countermanded by the API. The only ones that you can actually change are

width:
height:
padding:
show:
width: height: and padding: accept integers which control the position of the button.
The show: option is bit coded, except that show:0 has a special meaning

show:0 show in all situations
show:1 not used in the API
show:2 show when the info window is normal
show:4 not used in the API
show:8 show when the info window is maximised
show:16 not used in the API (info window is full screen)
For example, the close button is typically available all the time, so that’s {show:0}. The restore button is typically only available if the window has a maxUrl and is currently either maximised or full screen, so that’s {show:24}. The maximize button will only show if the infoWindow also has maxUrl, maxConetnt or maxTitle (in earlier releases, this could be controlled via the “group” option but that now gets countermanded).
If you cause a button to be displayed in an inappropriate context, e.g. the restore button in a non-maximized info window, then the button will do nothing. So the options are really only useful for adjusting the positions of the buttons and for switching them off (e.g. switching off the restore button so that the user can’t switch back to the non-maximized info window).

The details of this option have changed from time to time. If you do use it, I recommend locking in to a specific release of the API code, so that if the syntax changes in later releases it won’t affect your page.

GMapType()

Holds the information about a map type.
Constructor new GMapType(tileLayers, projection, name, opts)
parameters
tilelayers An array of GTileLayer() objects
projection A reference to the projection function, e.g. new GMercatorProjection(22)
name The long name for the map type
opts (optional)An anonymous object which may contain more information

opts If you want to set up any of the other internal properties of your GMapType() you have to bundle them into an anonymous object. The constructor copies the named properties of this anonymous object into the hidden internal properties of the GMapType.

option purpose default
shortName Name to be used if GMapTypeControl() is in “tiny” mode “”
urlArg A string which can be used to identify the map type. It can be used to link copyright information to map types. “c”
maxResolution Maximum zoom level supported The highest zoom level supported by any of the GTileLayers
minResolution Minimum zoom level supported The lowest zoom level supported by any of the GTileLayers
textColor the text colour to by used for any text drawn above the map (e.g. the copyright text, and the numbers in GScaleControl). Can use a named colour, like “black”, or a hex value like “#ffffff”. “black”
linkColor the text colour to be used for any links that are drawn above the map (e.g. “Terms of Use”). It can use a named colour, like “black”, or a hex value like “#ffffff”. “#7777cc”
tileSize an integer that specifies the size of the tiles. Tiles are always square. 256
errorMessge a string containing the error message to be used if no tile can be served. “”
alt a string containing the tooltip text to be used in the GMapTypeControl. “”
radius Radius of planet (not currently used) defaults to 6378137 “”
enableZoomLevelLimits ???? “”
properties
PIXEL_MARGIN Margin to be added when using getSpanZoomLevel. Defaults to 3 pixels.
methods
getBoundsZoomLevel(latlngbounds,viewsize) Returns the highest supported zoom level for which the latlngbounds will fit in the specified viewsize.
getErrorMessage() Returns a string containing the error message to be used if no tile can be served.
getLinkColor() Returns the text colour to be used for any links that are drawn above the map (e.g. “Terms of Use”). It can use a named colour, like “black”, or a hex value like “#ffffff”.
getMaximumResolution(a) Returns the number of the highest Zoom level that the map type supports. The function is coded to accept an optional parameter, but that parameter is always void.
getMinimumResolution() Returns the number of the lowest Zoom level that the map type supports.
getName(bool) Returns the name to be used in GMapTypeControl(). If the optional parameter is present and true, returns the short name to be used on tiny maps.
getProjection() Returns the GProjection() object associated with the map type.
getSpanZoomLevel(latlng,latlng,viewsize) Returns the highest supported zoom level for which a map centred at the first latlng will have a span greater than or equal to that specified by the second latlng plus the PIXEL_MARGIN. If no supported zoom level achieves that, it will return zero, even if that’s not supported by this map type.
getTextColor() Returns the text colour to by used for any text drawn above the map (e.g. the copyright text, and the numbers in GScaleControl). Can use a named colour, like “black”, or a hex value like “#ffffff”.
getTileLayers() Returns an array of GTileLayer() objects. A map type can have more than one layer (as does G_HYBRID_MAP)
getTileSize() Returns an integer that specifies the size of the tiles. Tiles are always square.
getUrlArg() Returns a (one-character) string which can be used to identify the map type. It is used to identify the map type in the &t= parameter of Google Local.
getAlt() Returns the alternate text associated with the map type button for this map type
GMapTypeControl()

A GControl() structure that manages map type switching, typically in the top right corner of the map.
Has all the properties and methods of the GControl() class.
It additionally accepts an optional parameter.
parameters
a bool If present and true, the control will use short names in the map type buttons.
GMapUIOptions()

A GMapUIOptions() object holds details about a set of user interface options.
Constructor
new GMapUIOptions(gsize)

If the parameter is omitted, the returned GMapUIOptions has no properties (the “controls”, “maptypes” and “zoom” properties must then be added before it can be used in a map.setUI() call).

If the gsize parameter is present, then the default UIOptions for a map of the specified size is returned.

properties
controls specifies the map controls to be displayed. The options are: {largemapcontrol3d}, {smallzoomcontrol3D}, {maptypecontrol}, {menumaptypecontrol}, {scalecontrol} each of which are boolean
keyboard (optional) boolean
maptypes specifies the maptypes to be used.The options are: {hybrid}, {normal}, {physical}, {satellite} each of which are boolean
zoom specifies whether double clicks or scroll wheel movements zoom the map.The options are: {doubleclick}, {scrollwheel} each of which are boolean
E.g.

var ui = new GMapUIOptions();
ui.maptypes = {normal:true, physical:true}
ui.zoom = {};
ui.controls = {largemapcontrol3d:true};
ui.keyboard = false;
map.setUI(ui);
GMarker()

A GMarker() object plots an icon at a specified point on a map.
Constructor format 1 new GMarker(point, icon, inert) deprecated
point GLatLng() Specifies the geographical location where the marker is to be plotted.
icon GIcon() (Optional) Icon to be plotted. If omitted, G_DEFAULT_ICON is used.
inert bool (Optional) If true, the .clickable property is set false.

Constructor format 2 new GMarker(point, opts)
point GLatLng() Specifies the geographical location where the marker is to be plotted.
opts (optional)Anonymous object may contain more information

opts You can use either format for the GMarker constructor. The “draggable” option can only be set using format 2.

E.g. var marker = new GMarker(point, {icon: myIcon, draggable:true});

option type purpose
autoPan boolean Set false to disable map autopanning when this marker is dragged to the edge of the map.
bouncy boolean Set false to disable the silly bounce animation of draggable markers.
bounceGravity float Controls the downward acceleration of a released draggable marker
bounceTimeout integer undocumented Controls the time between animation frames of a released draggable marker (and hence the velocity)
clickable bool false to make the marker inert
description string undocumented I don’t know what this does.
draggable bool true to make the marker draggable
dragCrossMove bool true to make the cross move downwards rather than the icon move upwards during dragging.
hide bool true to make marker initially hidden
icon GIcon() Icon to be plotted. If omitted, G_DEFAULT_ICON is used.
id string undocumented sets the marker.id property
name string undocumented I don’t know what this does.
title string tooltip text
zIndexProcess function(GMarker) returning an integer Instead of having the API determine the way that one marker overlays another, you can associate a zIndexProcess with a marker which returns the value that that API will use for the z-index.
See Setting the z-index of markers

A GMarker() has no accessible properties

methods
copy() undocumented Returns a new GMarker that is a copy of this one.
disableDragging() Disables marker dragging.
dragabble() Returns true if this marker was created as a draggable marker
dragging() undocumented returns true if this marker is currently being dragged
draggingEnabled() Returns true if dragging is enabled on this marker
enable Dragging() Enables dragging, if the marker was created as a draggable marker
getIcon() Returns the GIcon() associated with the marker
getPoint() Returns the GLatLng() where the marker is located
getLatLng() Returns the GLatLng() where the marker is located [an alias of getPoint().]
hide() Hides the marker
initialize(map) Used by map.addOverlay() to set up the marker.
isHidden() Returns true if the marker is hidden
openInfoWindow(a,b) Opens the info window, see above for parameters
openInfoWindowHtml(a,b) Opens the info window, see above for parameters
openInfoWindowTabs(a,b) Opens the info window, see above for parameters
openInfoWindowTabsHtml(a,b) Opens the info window, see above for parameters
redraw(bool) If the optional parameter is present and true, the marker is redrawn.
remove() Destroys the images[ ]. Used by map.removeOverlay() to recover memory.
setImage(filename) Changes the marker image.
setPoint(latlng) Changes the location of the marker, recalculates the z-index and redraws it.
setLatLng(latlng) Changes the location of the marker, recalculates the z-index and redraws it. [an alias of setPoint().]
show() Makes a hidden marker visible
showMapBlowup(a,b) Opens the info window with a blowup maplet, see above for parameters
getTitle() Returns the {title} associated with this marker.
closeInfoWindow() Closes the info window only if the info window is associated with this marker.
bindInfoWindow(node,options) See below.
bindInfoWindowHtml(text,options) See below.
bindInfoWindowTabs(tabElemArray,options) See below.
bindInfoWindowTabsHtml(tabStrArray,options) See below.

The marker.bindInfoWindow*() methods create GEvent listeners that perform the corresponding marker.openInfoWindow*() calls when the marker is clicked.

E.g.
marker.bindInfoWindowHtml(“hello world”,{maxWidth:500})
seems to be shorthand for

GEvent.addListener(marker,”click”, function() {
marker.openInfoWindowHtml(“hello world”,{maxWidth:500});
});

There are differences in the timing of the evaluation of the variables. You don’t need a createMarker() function to hold function closure on the .bindInfoWindow() parameters.

GMarkerManager()

A GMarkerManager() can be used to manage large numbers of markers efficiently as long as you’re careful to only have a modest number of markers visible in the viewport at any one time.
Constructor new GMarkerManager(map, options)

properties
There are no accessible properties

Options
borderPadding integer Specifies, in pixels, the extra padding outside the map’s current viewport monitored by a manager. Increasing the value makes it more likely that a marker will be already rendered when the map pans, but decreases the efficiency of redrawing the markers (e.g. when the zoom level changes).
maxZoom integer The maximum zoom level to be managed. Defaults to the max zoom of the map type that is current when the manager is created.
trackMarkers boolean Automatically refresh the marker display when a managed marker changes position with .setPoint().

methods
addMarker(marker, minzoom, maxzoom) Adds a marker to be displayed when the zoom number is in the specified range.
addMarkers(markerArray, minzoom, maxzoom) Adds an array of markers to be displayed when the zoom number is in the specified range.
getMarkerCount(zoom) Returns the number of managed markers for the specified zoom level.
refresh() Redraws the managed markers.
GMenuMapTypeControl()

A GControl() structure that manages map type switching, typically in the top right corner of the map. Has all the properties and methods of the GControl() class.
Similar to GMapTypeControl() except that it uses a drop down menu instead of separate buttons.

It additionally accepts two optional parameters.
parameters
a bool If present and true, the control will use short names in the map type buttons.
b bool undocumented If present and true, the control will have an extra border.
GMercatorProjection()

Handles the translation between geographical locations and pixel positions for a map type that uses Mercator maps.
The GMercatorProjection() constructor and methods assume a tile size of 256 by 256. The getTileSize() information from the GMapType() is not used.

Constructor
new GMercatorProjection(maxResolution)

properties
There are no accessible properties

methods
fromLatLngToPixel(latlng,zoom) Returns a GPoint() containing the pixel position (in the tilespace) corresponding to the geographical location.
fromPixelToLatLng(point,zoom,nofix) Returns a GLatLng() containing the geographical location corresponding to the point in tilespace. If the optional nofix parameter is not present, out of range latitudes are fixed to +-90, and out of range longitudes are wrapped around the globe into the range +-180.
getWrapWidth(zoom) Returns the wrap width of the tile space in pixels.
tileCheckRange(point,zoom,tilesize) Returns true if point.y is within the tilespace for the specified zoom level, and wraps point.x around the globe to a value that is within the tilespace.
If point.y is outside the tilespace, then it returns false without wrapping point.x.
The tilespace is a square array of tiles that cover the Earth.
The Mercator projection never actually reaches the poles. In this implementation, the mapping stops at about latitude 85.0511.
The pixel represented by GPoint(0,0) always represents the geographical location GLatLng(85.0511, -180).
At zoom level 0, there is one tile, tileBounds[0] is 1, pixelOrigo[0] is GPoint(128,128) – the distance from a corner of that tile to the centre.
At zoom level 1, there are four tiles in a 2*2 grid, tileBounds[1] is 2, pixelOrigo[1] is GPoint(256,256).
At zoom level 17, there are 17,179,869,184 tiles in a 131072*131072 grid, tileBounds[17] is 131072, pixelOrigo[17] is GPoint(16777216, 16777216).
GNavLabelControl()

GControl() structure that reverse geocodes the current map position and displays some of the upper levels of the address details as clickable links.
GOverlay()

This class holds the common methods that are inherited by GMarker(), GPolyline() , GPolygon(), GInfoWindow(), GGeoXml(), GTrafficOverlay(), GGroundOverlay() and GTileLayerOverlay()
This class can also be used to create custom overlays, in which case you may need to create your own copies of the methods.

methods
copy() Returns a new GOverlay that is a copy of this one.
hide() Hides the overlay
initialize(map) Used by map.addOverlay() to set up the overlay.
redraw(bool) If the optional parameter is present and true, the overlay is redrawn.
remove() Used by map.removeOverlay() to recover memory.
show() Shows the overlay
Static Method
GOverlay.getZIndex(lat) Returns a z-index value for a given latitude. It computes a z index such that overlays further south are on top of overlays further north, thus creating the 3D appearance of marker overlays.
GOverviewMapControl()

A GControl() object providing an overview map
Has all the properties and methods of the GControl() class plus the methods described below.
parameters
a GSize() undocumented Specifies the size of the overview map.
methods
getOverviewMap() undocumented Returns a pointer to the overview map div.
hide(instant) Reduces the overview map to a small icon.
If the undocumented parameter is set true then the overview closes instantly, otherwise there’s a short animation.
show(instant) Expands a hidden overview map. If the undocumented parameter is set true then the overview opens instantly, otherwise there’s a short animation.
setMapType(a) undocumented Sets the map type. The parameter is a GMapType() object.
GPoint()

Identifies a pixel position or a pixel offset.
Constructor new GPoint(x,y)

properties
x horizontal position
y vertical position
methods
equals(point) Returns true if the two points are equal.
toString Returns a string in the format “(123,123)”

GPolyline()

Describes a vector polyline.
Constructor new GPolyline(points, color, weight, opacity, opts)

parameters
points An array of GLatLng() or GPoint() objects
color String: the colour of the line in the format “#ffffff”
weight Integer: the width of the line
opacity Float: the opacity of the line in the range 0.0 to 1.0
opts Object Literal: A set of GPolylineOptions
options
id undocumented I don’t know what this does.
mapsdt undocumented I don’t know what this does.
name undocumented I don’t know what this does.
geodesic When set true, a geodesic line is drawn instead of a straight line on the screen.
clickable When set false the clicks drop through to the underlying map.

properties
undocumented
color The colour of the line
opacity The opacity of the line
weight The width of the line
If you change any of the properties, call the .redraw(true) method to cause the changes to take effect.
Now that the documented .setStrokeStyle() Method is available, there’s no need to use these undocumented properties.

methods
copy() Returns a new GPolyline that is a copy of this one.
deleteVertex(N) Removes the specified vertex.
The poly must already be addOverlay()ed to a map
disableEditing() Cancels .enableEditing()
enableDrawing(opts) Allows the user to contruct or modify the poly.
The poly must already be addOverlay()ed to a map
The options are: {maxVertices:integer, fromStart:true}
enableEditing(opts) Allows the user to edit an existing poly.
The poly must already be addOverlay()ed to a map
The options are: {maxVertices:integer}
getVertex(N) Returns a GLatLng() object specifying the location of the Nth point.
getVertexCount() Returns the number of points in the polyline.
initialize(map) Used by map.addOverlay() to set up the polyline.
insertVertex(N,latlng) Inserts a new vertex.
redraw() The polyline is redrawn. [Prior to V2.101 you had to use .redraw(true)]
remove() Used by map.removeOverlay() to recover memory.
supportsHide() Returns true or false indicating whether the overlay supports .hide(), .show() and .isHidden()
Currently true if SVG or VML is used to draw the graphic, and false otherwise.
hide() Hides the polyline
show() Shows the polyline
isHidden() returns true if the polyline is hidden
getLength() Returns the length of the polyline in metres
getBounds(v1,v2) Returns the bounds for the polyline as a GLatLngBounds. The undocumented optional parameters can be used to specify the vertex numbers of a section of the polyline.
setStrokeStyle(opts) Changes the style of the poly.
The poly must already be addOverlay()ed to a map.
The options are: {color:string, weight:number, opacity:number}

defaults
If you omit the colour, weight or opacity, the default values will be used: “#0000ff”, 5, 0.45

Static methods
fromEncoded(code,opts) Creates a polyline from an encoded string. See The official documentation
GPolygon()

Describes a filled polygon.
Constructor new GPolygon(points, strokeColor, strokeWeight, strokeOpacity, fillColor, fillOpacity, opts)

parameters
points An array of GLatLng() or GPoint() objects
strokeColor String: the colour of the boundary in the format “#ffffff”
strokeWeight Integer: the width of the boundary
strokeOpacity Float: the opacity of the boundary in the range 0.0 to 1.0
fillColor String: the colour of the fill in the format “#ffffff”
fillOpacity Float: the opacity of the fill in the range 0.0 to 1.0
opts Object Literal: A set of GPolygonOptions
options

id undocumented I don’t know what this does.
name undocumented I don’t know what this does.
mapsdt undocumented I don’t know what this does.
outline undocumentedBoolean: set false to switch off the boundary
clickable When set false the clicks drop through to the underlying map.

properties
undocumented
color The colour of the polygon fill
opacity The opacity of the polygon fill
outline Boolean: set to false to switch off the boundary
If you change any of the properties, call the .redraw(true) method to cause the changes to take effect.
Now that the documented .setStrokeStyle() and .setFillStyle() Methods are available, there’s no need to use these undocumented properties.

methods
copy() Returns a new GPolygon that is a copy of this one.
deleteVertex(N) Removes the specified vertex.
The poly must already be addOverlay()ed to a map
disableEditing() Cancels .enableEditing()
enableDrawing(opts) Allows the user to contruct or modify the poly.
The poly must already be addOverlay()ed to a map
The options are: {maxVertices:integer, fromStart:true}
enableEditing(opts) Allows the user to edit an existing poly.
The poly must already be addOverlay()ed to a map
The options are: {maxVertices:integer}
getVertex(N) Returns a GLatLng() object specifying the location of the Nth point.
getVertexCount() Returns the number of points in the polyline.
initialize(map) Used by map.addOverlay() to set up the polyline.
insertVertex(N,latlng) Inserts a new vertex.
redraw(bool) If the optional parameter is present and true, the polygon is redrawn.
remove() Used by map.removeOverlay() to recover memory.
supportsHide() Returns true or false indicating whether the overlay supports .hide(), .show() and .isHidden()
Currently true if SVG or VML is used to draw the graphic, and false otherwise.
hide() Hides the polygon
show() Shows the polygon
isHidden() returns true if the polygon is hidden
getArea() Returns the area of the polygon in square metres.
getBounds() Returns the bounds of the polygon as a GLatLngBounds
setFillStyle(opts) Changes the fill style of the poly.
The poly must already be addOverlay()ed to a map.
The options are: {color:string, opacity:number}
setStrokeStyle(opts) Changes the stroke style of the poly.
The poly must already be addOverlay()ed to a map.
The options are: {color:string, weight:number, opacity:number}

defaults
Although GPolygon defines defaults for strokeWeight and fillColour, it never uses them.

If you omit the strokeWeight, the stroke is not performed.

If you omit the fillColor, GPolygon sets the fill colour to the default value, “#0055ff”, but then doesn’t perform the fill.

The default fillOpacity is 0.25.

The defaults for strokeColour and strokeOpacity are the same as those for GPolyline: “#0000ff” and 0.45

Static methods
fromEncoded(code,opts) Creates a polygon from an encoded string.
GProjection()

This class provides a general structure for projection calculations. It is only used internally by GMercatorProjection() since that’s the projection system that Google maps use.
The methods provided by GProjection() are empty stubs. Any real GProjection() object would have to overwrite them with its own methods that perform the relevant calculations.

It is possible to write your own GProjection() instance that uses a non-Mercator projection, such as Gall-Peters or Mollweide, or to write a flat projection for mapping non-spherical domains by writing suitable code to replace the method stubs.
methods
fromLatLngToPixel(latlng,zoom) Stub: Throws a an error “Required interface method not implemented”
fromPixelToLatLng(point,zoom,nofix) Stub: Throws a an error “Required interface method not implemented”
getWrapWidth(zoom) Returns Infinity.
tileCheckRange(point,zoom,tilesize) Returns true.
GRoute()

A GDirections() object can contain one or more routes, an additional route for each additional waypoint. The GRoute() object describes information specific to one route. There is no GRoute() constructor, you can only obtain a GRoute() by using GDirections.getRoute(n).
methods
getDistance() returns an Object that contains the distance information
.getDistance().html is a HTML string that describes the distance in suitable units
.getDistance().meters is a number indicating the distance in metres
getDuration() returns an Object that contains the duration information
.getDuration().html is a HTML string that describes the duration in suitable units
.getDuration().seconds is a number indicating the estimated duration in seconds
getEndGeocode Returns geocode information for the end point
getEndLatLng Returns a GLatLng object specifying the end point of the actual polyline.
getNumSteps Returns the number of steps in this route
getStartGeocode Returns geocode information for the start point
getStep(n) Returns a GStep() object
getSummaryHtml() returns a HTML string containing something like “790 mi (about 12 hours 28 mins)”
GScaleControl()

A GControl() structure that displays a map scale, typically in the bottom left corner of the map.
Has all the properties and methods of the GControl() class, and additionally has the properties shown below.
If _mPreferMetric is set to true, then the metric scale is on top instead of below the feet/miles scale.

It additionally accepts an optional parameter.
parameters
a integer undocumented (Optional) Max length of the scale in pixels.
properties
bar A div containing part of the graphics
cap A div containing part of the graphics
container A div containing all the other divs
fpsBar A div containing part of the graphics
fpsLbl A div containing the text for non-metric measurements
map A reference to the map that contains this Scale
maxLength Max length of the scale in pixels
metricBar A div containing part of the graphics
metricLbl A div containing the text for metric measurements
GScreenOverlay

Places an image on the screen which remains in a fixed position. It does not move when the map drags.
The overlay does not capture mouse clicks. You can drag the map through the overlay. You can’t, however, click on markers through the overlay.

The overlay is below the map controls, so clicks on the map controls do work.

The info window does not attempt to avoid opening underneath a GScreenOverlay.

In MSIE, the API throws the image to the DirectX AlphaImageLoader. One consequence of this is that animated gifs are inanimate in MSIE.

GScreenOverlay() accepts an indeterminate number of parameters, among which are:

parameters
image string URL of the image
position GScreenPoint position of the image on the screen
anchor GScreenPoint point of the scaled image which is anchored to that position
size GScreenSize size

methods
GScreenOverlay is a GOverlay and has all the methods of that Class, however some of those methods (e.g. .redraw()) don’t actually do anything.

GScreenPoint

Something like a GPoint(), used for placing a GScreenOverlay().
parameters
x number horizontal position
y number vertical position
xunits optional string can be “pixels” or “fraction”
yunits optional string can be “pixels” or “fraction”

properties
point GPoint(x,y)
xunits can be “pixels” or “fraction”
yunits can be “pixels” or “fraction”

If you modify the properties, the new values only take effect the next time you addOverlay() the GScreenOverlay that uses it.

GScreenSize

Something like a GSize(), used for placing a GScreenOverlay().
parameters
x number width
y number height
xunits optional string can be “pixels” or “fraction”
yunits optional string can be “pixels” or “fraction”

properties
size GSize(x,y)
xunits can be “pixels” or “fraction”
yunits can be “pixels” or “fraction”

If you modify the properties, the new values only take effect the next time you addOverlay() the GScreenOverlay that uses it.

GSize()

Represents the pixel size of a region or object.
Constructor new GSize(width, height)
properties
width Width in pixels.
height Height in pixels
methods
equals(gsize) Returns true if the GSize() objects are equal.
toString() Returns a string in the format “(123,123)”
getHeightString() undocumented Returns the height in the format “123px”
getWidthString() undocumented Returns the width in the format “123px”
There is also a class property GSize.ZERO, which constructs a new GSize() object with zero height and width.

GSmallMapControl()

A GControl() structure that provides zoom and pan controls, typically in the top left corner of the map.
Has all the properties and methods of the GControl() class.
GSmallZoomControl()

A GControl() structure that provides zoom controls, typically in the top left corner of the map.
Has all the properties and methods of the GControl() class.
GSmallZoomControl3D()

A GControl() structure that provides zoom controls using the new “3D” graphics, typically in the top left corner of the map.
Has all the properties and methods of the GControl() class.
GScript()

undocumented
This function loads a Javscript file into the current page.

parameters
url URL of the .js file to be loaded
GStreetviewClient()

Obtains details of Streetview locations from the Streetview server.
Constructor
new GStreetviewClient(client)
The optional parameter is a string which defaults to “api”.

properties
A GStreetviewClient() has no accessible properties

methods
getNearestPanorama(latlng,callback) Returns full details of the Streetview location to the callback function.
getNearestPanoramaLatLng(latlng,callback) Returns the latlng of the Streetview location, or null
getPanoramaById(id,callback) Returns full details of the Streetview location to the callback function.

reply
The full details reply may look like this: In APIv2.103, the “copyright”, “location” and “links” elements are absent.
code Status code. 200 is supposed to mean success, but a reply may well contain only a success code and no further details
Data.copyright undocumented Copyright text
location.description Description of the location
location.latlng GLatLng of the actual view point.
location.panoId ID of the panorama
location.pov Initial point of view
location.zoomLevels undocumented Number of zoom levels
Links undocumented Array of up to two adjacent View points
copyright Copy of .Data.copyright
Location Copy of .location
links Copy of .Links

The Links information looks like this:
description Description of the adjacent location
panoId Panorama ID of the adjacent location
yawDeg bearing to the adjacent location
The panorama has a yellow band which points in the “yawDeg” directions, is labelled with the “description” texts and clicking on the arrows moves to the viewpoint specified by the corresponding “panoId”.

GStreetviewOverlay()

Creates a GTileLayerOverlay containing tiles that indicate locations which have Streetview imagery.
Constructor
new GStreetviewOverlay()

properties
A GStreetviewOverlay() has no accessible properties

methods
costructor(tilelayer) undocumented This might not be a real Method, it may be a weird back reference from an instance to its constructor.
copy() Returns a new GTileLayerOverlay that is a copy of this one.
getTileLayer() undocumented Returns a reference to the GTileLayer()
hide() Hides the overlay
initialize(map) Used by map.addOverlay() to set up the overlay.
isHidden() returns true if the overlay is hidden
redraw() Does nothing.
refresh() undocumented Performs a .refresh() on the GTileLayerOverlay
remove() Used by map.removeOverlay() to recover memory.
show() Unhides the overlay
supportsHide() Returns true, thus indicating that the overlay supports .hide(), .show() and .isHidden()
GStreetviewPanorama()

Displays Streetview imagery.
Constructor
new GStreetviewPanorama(container,client/options)

parameters

The fist parameter is the HTML element, typically a <div>, in which the panorama is to be displayed.

In v2.103, the second paramter is optional “context”, and defaults to “api”

In v2.104 onwards, the second paramter is optional set of options. The options can include {latlng}, {pov} and {context}. The context defaults to “api”, the pov defaults to {yaw:0,pitch:5,zoom:0}. If the {latlng} is absent, the panorama it not initiated until one of the .setLocation methods is used.

properties
A GStreetviewPanorama() has no accessible properties

methods
blur() undocumented Removes the input focus from the panorama. The view will no longer respond to key presses
checkResize() Call this if the size of the container changes
focus() undocumented Applies the input focus to the panorama. The view will respond to the arrow keys, page up, page down, plus and minus.
followLink(bearing) Follows the link to the next panorama that’s closest to the requested bearing
Doesn’t seem to work when testing locally.
getPOV Returns an anonymous POV object which contains {pitch: yaw: zoom:} information.
NOTE: When testing locally, this is the initial point of view that you requested, it doesn’t reflect movements performed by the user within the Flash. When testing on a real web site, it does reflect movements performed by the user within the Flash.
hide() Hides the panorama.
Doesn’t seem to work when testing locally.
isHidden() Returns true is the panoram is hidden.
panTo(POV,longWayRound) Pans to the specified point of view.
The first parameter is a POV object which may contain some or all of {pitch: yaw: zoom: viewHeight:}
If the second parameter is true, it yaws the long way round (performing a 360 degree spin if the yaw was already correct).
Doesn’t seem to work when testing locally.
remove() Deletes the current panorama. You must call .remove() before setting a new location. It is safe to call .remove() on a panorama which is alrady removed.
You should call .remove() before closing the container or exiting the page, otherwise the memory used by the Flash Player will not be recovered in some browsers.

retarget(container) undocumented Removes the current panorama, and changes the container in which the panoramas will be displayed.
setContainer() Performs a .retarget(), then redisplays the current panorama in the new container
setLocationAndPOV(latlng,POV) Sets the panorama view.
The first parameter is a GLatLng.
The second optional parameter is a POV object which may contain some or all of {pitch: yaw: zoom: viewHeight:}
setLocationAndPOVFromServer Response(reply,POV) undocumented Sets the panorama view.
The first parameter is a reply from GStreetviewClient(). Only the panoId is used.
The second optional parameter is a POV object which may contain some or all of {pitch: yaw: zoom: viewHeight:}
setPOV(POV) Jumps to the specified point of view.
The parameter is a POV object which may contain some or all of {pitch: yaw: zoom: viewHeight:}
Doesn’t seem to work when testing locally.
show() Performs an .unhide() then redisplays the panorama. It’s the opposite of .remove()
unhide() undocumented Displays a panorama that was hidden with .hide(), but not .remove()d

POV

Describes the point of view from the Viewpoint. The parameters are
pitch Elevation angle of the view direction. Default=5
yaw Bearing of the view direction, 0=looking North. Default=0
zoom Zoom level. Default=0
viewHeight undocumented Not used? Default=0
All the parameters are optional.
Event Returns
error error code
yawchanged yaw
pitchchanged pitch
zoomchanged zoom
flashstart undocumented none
flashresponse undocumented string, see below
initialized object, see below
infolevel undocumented ?? don’t know

The “yawchanges”, “pitchchanged” and “zoomchanged” events trigger when the corresponding parameter changes.

The “flashstart” event triggers when Flash Player is launched.

I think the “flashresponse” triggers when new information is received from the panorama server, but I don’t understand what provokes the exchange of information.

The “initialized” event triggers when the viewpoint moves to a new location (but not when the moved by GStreetviewPanorama.setLocationAndPOV). It triggers when the user moves the viewpoint along the street, and when GStreetviewPanorama.followLink() is used.

I don’t know what causes the “infolevel” event to trigger.

The “flashresponse” string looks something like this: “324:1,325:39.740116;-104.987404,327:119768;6,322:1;1”.

It looks like it breaks down into a series of sections separated by commas. Each section is formatted like tag:value;value. The only one I can recognise is tag 325 which contains the latitude and longitude.

The object returned from the “initialized” event contains the following properties:
description String: name of street.
lat number: latitude
lng number: longitude
latlng GLatLng object
panoId string: panorama ID
pov POV object. The zoom: and pitch: elements are always void, even if the panorama is zoomed and pitched
streetRange string: ?
yaw number
GTileLayer()

A GMapType() can have more than one layer of tiles. For example the G_HYBRID_MAP has one GTileLayer() that contains the satellite imagery, and a second GTileLayer() that contains the roads and town names.
Some or all of the methods provided by the GMapType() class need to be overwritten by code specific to the tile layer when defining the GTileLayer() object.
Constructor new GTileLayer(copyCollection,minResolution,maxResolution)

parameters
copyCollection A GCopyrightCollection() object
minResolution The minimum zoom level
maxResolution The maximum zoom level
The API code seems to be intended to allow you to omit the copyCollection parameter, but if you do, the code will crash later, so you need to create some sort of GCopyrightCollection(), even if you never use it. E.g. new GTileLayer(new GCopyrightCollection(“”), 7, 14) sets up a tile layer which supports zoom levels 7 to 14.

methods
getCopyright(latlngbounds,zoom) Reads data from the GCopyrightCollection
getOpacity() Returns 1
getTileUrl(tile,zoom) Stub: Throws a an error “Required interface method not implemented”
The “tile” parameter is a GPoint(x,y) object, but the x and y represent tile numbers, not pixels.
isPng() Returns false
maxResolution() Returns the maximum resolution of the layer
minResolution() Returns the minimum resolution of the layer
getCopyrights(latlngbounds,zoom) Returns copyright information.
GStep()

A GRoute() object can contain several steps. The GStep() object describes information specific to one step. There is no GStep() constructor, you can only obtain a GStep() by using GRoute.getStep(n).
methods
getDescriptionHtml() Returns a HTML string containing the driving instructions.
getDistance() returns an Object that contains the distance information
.getDistance().html is a HTML string that describes the distance in suitable units
.getDistance().meters is a number indicating the distance in metres
getDuration() returns an Object that contains the duration information
.getDuration().html is a HTML string that describes the duration in suitable units
.getDuration().seconds is a number indicating the estimated duration in seconds
getLatLng Returns a GLatLng object specifying the location of the step.
getPolylineIndex Returns a number which indicates the corresponding Vertex number in the polyline
GTileLayerOverlay()

Places a tilelayer above a base map as a separate object rather than as part of a map type.
Constructor
new GTileLayerOverlay(tilelayer,opts)

parameters
tile layer The GTileLayer() object to be used as an overlay.
opts Currently the only option is {zPriority} whicha can be used to set the z-index. Defaults to 10

properties
zPriority undocumented z-index relative to other elements on this Pane

methods
copy() Returns a new GTileLayerOverlay that is a copy of this one.
initialize(map) Used by map.addOverlay() to set up the GTileLayerOverlay.
redraw(bool) Does nothing.
remove() Used by map.removeOverlay() to recover memory.
supportsHide() Returns false, thus indicating that the overlay does not support .hide(), .show() and .isHidden()
getTileLayer() Returns a reference to the GTileLayer associated with this overlay
refresh() Causes all the tileUrls to be recalculated and the tile layer to be redrawn.

GTrafficOverlay

Adds a traffic overlay to the map.
Constructor new GTrafficOverlay()

Use map.addOverlay() to add the overlay to the map.

methods
initialize(map) Used by map.addOverlay() to set up the overlay.
redraw(bool) Redraws the overlay.
remove() Used by map.removeOverlay() to recover memory.
disableTrafficButton() Stops the traffic button being displayed alongside the map type control.
disableTrafficLayer() Disables the traffic layer.
enableTrafficButton() Displays the traffic button alongside the map type control
enableTrafficLayer() Causes the traffic layer to be displayed.
trafficButtonEnabled() Returns true if the traffic button is enabled
trafficLayerEnabled() Returns true if the traffic layer is enabled
hasTrafficInView() Returns true if there is trafic data within the current viewport.
Note: There’s a lag between the map movement and the availability of this information. Don’t try to use it within a map “moveend” listener.

By default, the traffic button is enabled and the layer is disabled. Clicking the button enables and disables the traffic layer.

The .copy(), .hide() and .show() methods also exist, but they simply throw a “Interface not implemented” error.
GUnload()

Call this function to destroy the structures created by the API, so that the memory can be recovered.
Typically, use <body onunload=”GUnload()”> to avoid memory leaks.

GUnloadApi()

Function called by GUnload() to destroy the structures created by the API.
GUnload() is included in the API loader, rather than the main API code, and behaves sensibly in situations where the main API code has not been laoded, e.g. if the browser was found to be not compatible.

GValidateKey()

undocumented
This function performs API key validation.

Hashes various subsets and variations of the current windows.location information. If one of the hashes matches the key has it returns true.
parameters
a string Key hash (typically provided by the API loader code)
GVerify()

undocumented
I’ve no idea what this is intended to do.

parameters
a string URL of an image file.
GXmlHttp()

GXmlHttp() just provides the .create() method, which accesses browser-specific XML request mechanisms.
methods
create() Creates a new ActiveXObject(“Microsoft.XMLHTTP”) or a new XMLHttpRequest() depending on the browser environment.

GXml()

GXml provides methods for processing XML content. methods
parse(text) Performs XML parsing on a text string and returns the corresponding XML DOM.
This can be used if your webserver is unable to set the MIME type correctly on your XML data file.
value(xmlNode) Returns the text content of an XML node.
This can be used to obtain data from an XML file where the data structured like this <xmltag>content</xmltag> rather than <xmltag attribute=”content” />.
GXslt()

Constructor
new GXslt(xslt)
parameters
xslt DOM element The DOM element that describes the XSLT document
methods
transformToHtml(xmlDoc, container) Transforms the XML to HTML DOM elements, placing the result into the HTML container

Javascript Concepts

Google Maps API Tutorial

avascript Concepts: Pass by Value

I was recently asked whether Javascript function parameters are passed by Reference or by Value. The really quick answer is that they are passed by Value. The full answer is actually quite complicated, and I won’t be going into all the details.

What’s it all about

Some computer languages allow function parameters to be passed either by Reference or by Value.

When a parameter is passed by Reference, then any changes made to it inside the function also change the copy of the variable that’s held outside the function. The variable used inside the function is a pointer to the external copy of the variable

When a parameter is passed by Value, then the function has its own local copy of the variable. Changes to the local copy don’t affect anything outside the function. The variable used inside the function is a local variable that (initially) has the same value as the external variable.

Created by Reference

However, Javascript differs from some other languages in that complex variables are created by Reference.

When you create a numeric or Boolean variable in Javascript, then that variable contains the numeric value you specify.

When you create any other type of variable, such as a string or an Object(), then the variable contains a Reference to the chunk of memory where the data is located. In some computer languages you might say that Object() variables are pointers.

For rather technical reasons, you don’t need to worry about strings. They end up behaving just as if they were passed by Value.

The fact that Object() variables are references does affect what happens when a function modifies a property of a passed Object(). Changing or adding a property of an Object() does affect the property of the external copy of the Object().

For example:

 function tweakIcon(a) { a.image="mymarker.png"; a = some_other_icon; } var icon = new GIcon(); tweakIcon(icon); alert(icon.image);

The “icon.image” property has been changed to “mymarker.png”, but “icon” isn’t affected by the “a = some_other_icon;” statement.

Assignment by Reference

Javascript assignment statements for complex variables are by Reference.

For example:

 var marker1 = new GMarker(point); var marker2 = marker1;

creates a second variable that points to the same chunk of memory where the marker data is located. The two variables are references to the same Object()

Whereas this:

 var marker1 = new GMarker(point); var marker2 = marker1.copy();

creates a second marker that has the same properties.

Comparison by Reference

Javascript comparison operations are by Reference.

if (marker1 == marker2) is true if the variables reference the same marker Object(), but false if marker2 is a .copy() of marker1.

Javascript Concepts

Google Maps API Tutorial

Javascript Concepts: Function Closure

Function closure is a fairly unusual computer language concept so it may take you by surprise if you’re familiar with other programming languages.

What happens is that each time a function closes, a copy of the values of its local variables is retained. Technically, a copy of the function’s “activation frame” is retained, and that contains all the local variables.

The key feature of function closure is that any callback functions (such as event handlers) which were created when the function executed will have access to the preserved activation frame, and its local variables.

Activation Frame

Activation frames do occur in other languages that support recursive functions. Consider this code

    function factorial(a) {
      if (a == 1) {return 1}
      else {return a*factorial(a-1)}
    }

When you call “factorial(5)”, then five separate instances of the factorial() function get executed, each one has its own activation frame, which contains its own local variables. In particular, each instance of the function has its own value for “a”.

Memory

If a function closes without creating a callback function, then, in a properly written browser, its activation frame will eventually be destroyed by the Garbage Collection system, and the memory recovered.

The variables are only retained if something continues to hold accessible references to them.

Closure

Note that the value of the variable that is retained is the value at the time that the function closed, not the value at the time that the callback function was created.

Updating closure variables

A callback function can change the values of variables in the activation frame of the closed function. It can’t, however, create new variables in that activation frame.

   function f1() {
      var foo=123;
      GEvent.addListener(map,"click",function(overlay,point) {
        GLog.write(foo);
        foo++;
      });
      var foo=321;
    }

The first time the map is clicked, the value “321” will be displayed (the value of “foo” when the function closed).

The second time the map is clicked, the value “322” will be displayed. The value of “foo” in the activation frame has been updated by the previous click callback.

Javascript Concepts

Google Maps API Tutorial

Javascript Concepts: Asynchronous I/O

In most computer languages, when you tell the program to read or write some data, the processing pauses until that action completes. The results of the read operation are available for use by the next statement in the program.

Most read and write operations in Javascript don’t work like that. Javascript makes a request to the I/O system for the data to be read or written and then continues to execute the following statements without waiting for the action to complete. When the action is completed, a corresponding completion event will be triggered.

If you want to be informed of the I/O completion, e.g. if you want to process the data that’s been read, you have to supply a callback function which will be called when the I/O completes. Or, in some cases, listen for an event that indicates that the operation is complete.

This makes sense when you consider that I/O operations which involve exchanging packets of data with Internet servers in distant parts of the world may take thousands of times longer to complete than I/O operations on your local peripherals. If the browser waited for one image to load before requesting the next, then it would take an awful lot longer for all the images to be displayed.

Images

Most of the time when you load an image, you’re not interested in knowing when the I/O has completed. In those cases when you do care, you can add an “onload” attribute to the <img> specifying the action to be performed when the image fetch is completed.

Alert

One example of an operation which is not asynchronous is “alert”. when you call alert(), all processing is paused until the user clicks the alert window’s “OK” button.

GDownloadUrl, GClientGeocoder and GDirections

GDownloadUrl, GClientGeocoder and GDirections calls are always asynchronous. There’s nothing you can do to make them synchronous.

The results of the I/O are not available immediately after the GDownloadUrl() call, but only within its callback function.

The results of a GDirections call are only available wne its “load” event has been triggered.

GXmlHttp

The method of using GXmlHttp() described in the documentation uses asynchronous processing.

If you really want to, you can use GXmlHttp() in synchronous mode. This is achieved by setting the third parameter of request.send() to false

     var request = GXmlHttp.create();
      request.open("GET", "example.xml", false);
      request.send(null);
      var xmlDoc = request.responseXML;

When used in this way, the “request.send()” will cause the processing to pause until the file has been fetched.

This works in standards-compliant browsers which don’t support ActiveX, and in MSIE6. There’s no guarantee that it will work in any other browsers that support ActiveX.

[The way the code works is that if the browser supports ActiveXObject, then GXmlHttp() calls ActiveXObject(“Microsoft.XMLHTTP”), if not, then if the browser supports window.XMLHttpRequest, then GXmlHttp() calls that. MSIE7 supports both technologies. The API is currently coded to use ActiveX if both are available. I’ve not tested synchronous GXmlHttp in MSIE7.]

onload functions

Another common situation where an asynchronous operation happens is when you use an onload function, either by writing <body onload=”load()”> in the HTML, or equivalently by writing window.onload=load;in the Javascript.

Code that’s placed outside any such function is executed as soon as the browser reads it, then the browser fetches any asyncronous resources that the page requires, in particular the images. After all the image fetches complete, the browser calls the onload function.

Javascript Concepts

Google Maps API Tutorial

Javascript Concepts: Scope

In common with most modern computer languages, Javascript variables and functions have “scope”. What this means is that the variable or function can only be accessed from within the function that “var”ed it.

In languages without scope, such as early versions of BASIC and COBOL, people working on different parts of the same program had to be careful not to use the same variable for different purposes. If Fred wrote a useful BASIC subroutine that used the variable “A”, and Dave incorporated that subroutine into one of his programs that also happened to use a variable called “A”, then calling the subroutine would change the value of “A” which might cause Dave’s program to behave incorrectly in a completely different part of the code that expected the original value.

In a scoped language, Fred can write a function that uses separate “local” variables which only exist inside that function, and there’s no danger of them clashing with “global” variables of the same name that exist in the calling program.

If you really really want to, you can explicitly access the global variable, by referring to it like “window.A”. Global variables are properties of the “window” object.

Undeclared variables

If you assign a value to a variable without first “var”ing it, then a global variable of that name is created for you.

In MSIE, there’s a conflict with the fact that it already creates a global variable that matches the “id” of each element that has an “id”. Attempting to assign a new value to a variable that MSIE created that way, without using “var”, will throw an error.

Not block structured

If you’re familiar with block-structured languages, such as C, Pascal and Java, then you might possibly be caught out by the fact that Javascript is not block-structured. Variables that are created inside blocks (such as for loops and if statements) persist until the end of the function. For example, if you’re used to a block-structured language, you might expect variable in this example to display the value “123”.

   function foo() {
     var i=123;
     for (var i=0; i<3; i++) {
       ...
     }
     alert(i);
   }

In Javascript, the value displayed is “3”. That’s because “i” is local to the function, not local to the “block”, so the “i” used inside the for is the same as the one declared outside the for loop.

Note that Javascript doesn’t complain if you “var” the same variable more than once within the same scope.

Calling Javascript from HTML

Whenever you make calls from HTML to Javascript, e.g. from the “onclick” of a button, the called Javascript executes in global context. This means that any functions or variables referenced in the “onclick” string must be global.

Local functions

In the same way that variables can be local to a function, functions can be local to another function.

It’s all to easy to do this by mistake if you change your code from something that runs inline to something that’s called from <body onload=”loadMap()”>. You can’t just wrap “function loadMap() {” … “}” around the whole of your code and expect it to work because functions that were previously global will have become local functions of loadMap().

Compatibility

Google Maps API Tutorial

APIv2 supports the old v1 documented commands (except openInfoWindowXslt) as well as the new v2 syntax.

If you already have a working v1 map that doesn’t use any undocumented features, then you can just change the version number when you load the API code and it may well work the same.

One significant source of incompatibility is that you must perform a map.setCenter() before adding any overlays.

Third Party Extensions

Google Maps API Tutorial

Using the EShapes extension

The EShapes extension provides a number of additional static methods for GPolyline and GPolygon for creating certain shapes. It also provides two functions that can help in the placement of such shapes.

Here’s an example

Download eshapes.js and place it on your web site.

Load the Javascript code like this <script type=”text/javascript” src=”eshapes.js”></script> after loading the main API code.

Then use any of these methods to plot shapes on your map:

GPolyline.Circle()

Plots a circle with a specified centre and radius

Parameters

latlng Centre of the circle
radius Length of radius in metres
color Color parameter for polyline
weight Weight parameter for polyline
opacity Opacity parameter for polyline
opts Options parameter for polyline

GPolygon.Circle()

Plots a filled circle with a specified centre and radius

Parameters

latlng Centre of the circle
radius Length of radius in metres
strokeColor strokeColor parameter for polygon
strokeWeight strokeWeight parameter for polygon
strokeOpacity strokeOpacity parameter for polygon
fillColor fill Color parameter for polygon
fillOpacity fillOpacity parameter for polygon
opts Options parameter for polygon

GPolyline.RegularPoly()

Plots a regular polygon (e.g. pentagon, square, octagon) with a specified centre, radius, number of vertices, and rotation.

Parameters

latlng Centre of the shape
radius Length of radius in metres
vertexCount Number of vertices, e.g. 5 for a pentagon
rotation Degrees of rotation.
When zero or omitted the southern edge of the shape is horizontal
color Color parameter for polyline
weight Weight parameter for polyline
opacity Opacity parameter for polyline
opts Options parameter for polyline

GPolygon.RegularPoly()

Plots a filled regular polygon with a specified centre, radius, number of vertices, and rotation.

Parameters

latlng Centre of the shape
radius Length of radius in metres
vertexCount Number of vertices, e.g. 5 for a pentagon
rotation Degrees of rotation.
When zero or omitted the southern edge of the shape is horizontal
strokeColor strokeColor parameter for polygon
strokeWeight strokeWeight parameter for polygon
strokeOpacity strokeOpacity parameter for polygon
fillColor fill Color parameter for polygon
fillOpacity fillOpacity parameter for polygon
opts Options parameter for polygon

GPolyline.Star()

Plots a star shape.

Parameters

latlng Centre of the shape
radius1 Length of radius of odd points in metres
radius2 Length of radius of even points in metres
points Number of points, e.g. 5 for a pentagram
rotation Degrees of rotation.
When zero or omitted the first point points due North
color Color parameter for polyline
weight Weight parameter for polyline
opacity Opacity parameter for polyline
opts Options parameter for polyline

GPolygon.Star()

Plots a filled star shape.

Parameters

latlng Centre of the shape
radius1 Length of radius of odd points in metres
radius2 Length of radius of even points in metres
points Number of points, e.g. 5 for a pentagram
rotation Degrees of rotation.
When zero or omitted the first point points due North
strokeColor strokeColor parameter for polygon
strokeWeight strokeWeight parameter for polygon
strokeOpacity strokeOpacity parameter for polygon
fillColor fill Color parameter for polygon
fillOpacity fillOpacity parameter for polygon
opts Options parameter for polygon

GPolyline.Ellipse()

Plots an ellipse.

Parameters

latlng Centre of the shape
radius1 Length of radius in the first direction
radius2 Length of radius in the second direction
rotation Degrees of rotation.
When zero or omitted the first direction is due North
color Color parameter for polyline
weight Weight parameter for polyline
opacity Opacity parameter for polyline
opts Options parameter for polyline

GPolygon.Ellipse()

Plots a filled ellipse.

Parameters

latlng Centre of the shape
radius1 Length of radius in the first direction
radius2 Length of radius in the second direction
rotation Degrees of rotation.
When zero or omitted the first direction is due North
strokeColor strokeColor parameter for polygon
strokeWeight strokeWeight parameter for polygon
strokeOpacity strokeOpacity parameter for polygon
fillColor fill Color parameter for polygon
fillOpacity fillOpacity parameter for polygon
opts Options parameter for polygon

GPolyline.Shape()

Plots a shape.

All other line shapes available in this extension are implemented by a call to this function. You could also use it to create slightly more complicated shapes.

Parameters

latlng Centre of the shape
radius1 Length of radius for odd points in the first direction
radius2 Length of radius for even points in the first direction
radius3 Length of radius for odd points in the second direction
radius4 Length of radius for even points in the second direction
rotation Degrees of rotation.
When zero or omitted the first direction is due North
vertexCount Number of vertices
color Color parameter for polyline
weight Weight parameter for polyline
opacity Opacity parameter for polyline
opts Options parameter for polyline
tilt boolean: if true, the shape is pre-rotated by 180/vertexCount
(This is used to make a 4-sided regular poly look like a square instead of a diamond.)

GPolygon.Shape()

Plots a filled shape.

Parameters

latlng Centre of the shape
radius1 Length of radius for odd points in the first direction
radius2 Length of radius for even points in the first direction
radius3 Length of radius for odd points in the second direction
radius4 Length of radius for even points in the second direction
rotation Degrees of rotation.
When zero or omitted the first direction is due North
vertexCount Number of vertices
strokeColor strokeColor parameter for polygon
strokeWeight strokeWeight parameter for polygon
strokeOpacity strokeOpacity parameter for polygon
fillColor fill Color parameter for polygon
fillOpacity fillOpacity parameter for polygon
opts Options parameter for polygon
tilt boolean: if true, the shape is pre-rotated by 180/vertexCount
(This is used to make a 4-sided regular poly look like a square insetad of a diamond.)

EOffset()

Returns the GLatLng of a location offset by a specified distance east and north.
This can be useful for aligning nearby shapes, e.g. when creating a hex grid on a wargaming map.

Parameters

latlng Starting Point
easting Distance east in metres
northing Distance north in metres

EOffsetBearing()

Returns the GLatLng of a location offset by a specified distance and bearing.
This can be useful for aligning nearby shapes, e.g. when creating a hex grid on a wargaming map.

Parameters

latlng Starting Point
radius Distance in metres
bearing Bearing in degrees

Third Party Extensions

Google Maps API Tutorial

Using the EBubble extension

The EBubble extension provides an alternative to custom info windows.

You can use EBubbles in a similar manner to info windows, but the technology is completely different, and causes significant differences in the behaviour.

  1. The background of an EBubble is fixed-size image file. That allows you to make the graphic as fancy as you like, but it’s obviously only suitable in situations where your contents conform to a standard size.
  2. The EBubble is not attached to the map, it’s attached directly to the <body>. This has the advantage that the EBubble can lie partly outside the map, but has the disadvantage that it doesn’t move when the map moves.
  3. In order not to look silly when the map moved from under it, the EBubble closes when the map moves.
  4. In order to minimise strange click-through behaviour, by default the EBubble closes when clicked.

Here’s an example

The background image for that EBubble was created in PaintShopPro using a simple speech bubble object. I applied the Inner Bevel effect to make it look a little 3D, added a central drop shadow, and gave the whole image partial transparency.

The basic procedure for using an EBubble is:

  1. Download ebubble.js and place it on your web site.
  2. Load the Javascript code like this <script type=”text/javascript” src=”ebubble.js”></script>
  3. Create one or more EBubble instances.
  4. Open the EBubble with bubble.openOnMarker(marker,html) or bubble.openOnMap(point, html, offset)

EBubble Constructor

The parameters for new EBubble() are:

map The map on which the EBubble is to appear.
image URL of the background image
imageSize GSize() specifying the size of that image
contentSize GSize() specifying the size of the inner area when the contents can be written.
contentOffset GPoint() specifying the offset of top left corner of the inner area from the top left corner of the background image
anchor GPoint() specifying the anchor point of the image
noCloseOnClick Optional: set to true to not close the EBubble when it is clicked

The content is not actually constrained by the contentSize parameter. If you put more content into it, then the contens will overflow.

Specifying noCloseOnClick may sometimes cause strange click-through behaviour, but it might improve things if you’re experiencing problems with clickable elements inside your EBubble contents.

Opening an EBubble

There are two methods provided for opening an EBubble

bubble.openOnMap

This opens the EBubble on the map that you specified in the EBubble constructor.

point A GLatLng() or GPoint() specifying the geographical location
html A string containing the HTML to be displayed.
offset (optional) A GPoint() specifying a pixel offset.

bubble.openOnMarker

This opens the EBubble on the map that you specified in the EBubble constructor, with a location derived from the specified marker.

This call uses the infoWindowAnchor parameter of the icon that is being used by the marker.

marker The marker on which the EBubble is to be opened.
html A string containing the HTML to be displayed.

Multiple EBubbles

You can have as many EBubbles as you like on the same map.

You can use different background images for different EBubbles.

Closing an EBubble

Use bubble.hide()

The EBubble wil also close automatically if the map moves or if the user clicks on the EBubble.

I provide a bubble.show() method, but I don’t recommend using it, because it doesn’t track map movements. If you want to re-open the bubble, use .openOnMap() or .openOnMarker() again.

Events

When an EBubble is clicked, it throws a “click” event.

More About The Parameters

Consider this bubble image:

While creating the image, I recorded the following information:

The total size of the image is (297,243), which makes the 3rd parameter new GSize(297,243)

The contents go in the rectangular area marked by the black box. The size of the box is (224,126), which makes the 4th parameter new GSize(224,126)

The green dot indicates the position of the black box. It is located at (36,28), which makes the 5th parameter new GPoint(36,28)

The red dot at the tip of the stem is the point which will be anchored to the map location. It is located at (175,238), which makes the 6th parameter new GPoint(175,238)

Here’s an example which uses that image.

Credits

Inspired by the Radio Shack Store Locator: www.radioshack.com/storeLocator3 (but not using any of their code) (I couldn’t understand it).

Third Party Extensions

Google Maps API Tutorial

EPolys v2

Version 2 of the EPoly extension runs much faster by storing intermediate information about the polys, rather than recalculating everything each time it gets called.

The downside of this is that it will not notice any changes that are made to the polys.

If the geometry of your polys might possibly change, e.g. by using enableEditing(), insertVertex() or deleteVertex(), then use version 1 of the EPoly extension.

Version 2 also uses more memory than version 1, to store the intermediate information.

The version 2 interface is identical to that of version 1 except that you copy the epoly2.js code into your own webspace and load it like:

    <script src="epoly2.js" type="text/javascript"> </script>

This v2 example is identical to the v1 example except that it uses version 2 of the EPoly extension, and as you can see it runs considerably faster.

Third Party Extensions

Google Maps API Tutorial

EGeoXml

The primary objective of the EGeoXml extension is to be able to take a “My Maps” KML file, change the file extension to .XML and render the markers, polylines and polygons under the API in a manner that exposes those objects, allowing them to be manipulated by the calling program.

A secondary objective is to support a reasonable range of types of KML files that were not created with MyMaps.

The extension is far from complete, but it does render markers, polylines, polygons, info windows and sidebar.

A more complete extension is available from Lance Dyas: http://www.dyasdesigns.com/geoxml/

How to use it

  1. take a copy of egeoxml.js, and place it in the same folder as your code.
  2. Call the extension code into your page after loading the API code, like this
         <script src="egeoxml.js" type="text/javascript"></script>
  3. Create an EGeoXml() instance, like this
         var exml;
         exml = new EGeoXml("exml", map, "test001.xml");
  4. Call the .parse() Method, like this
         exml.parse();

Obtaining the KML file with the Placemarks

If you click the “View in Google Earth” link of the My Maps page, then you get a KML file that contains a NetworkLink instead of a list of Placemarks. EGeoXml can’t do anything with that.

To obtain the real KML file from My Maps, you now have to right click on the “View in Google Earth” link, copy the link location (“copy shortcut” in MSIE) and then edit the resulting URL.
Find the bit that says “&output=nl” and change it to “&output=kml”.

Constructor

The EGeoXml constructor takes 4 parameters.

  1. A text string containing the name of a global variable into which you will be storing the returned reference.That’s a bit of a weird one, but I can’t see any way round it. I need a global variable so that I can create the HTML for a sidebar entry that can reference the EGeoXml properties (calls from HTML execute in global context) but I don’t think I can safely create global variables from inside a method, particularly if I want to allow you to use more than one EGeoXml instance in the same page.It might sound complicated, but you just have to make sure that when you write
    foo = new EGeoXml(“foo”,… the two “foo”s are the same.
  2. The map on which the objects are to be rendered
  3. Either A text string containing the URL of the XML file. It must be on the same server.
    Or An array of strings containing the URLs of such XML files.
  4. An optional set of {options}.

The currently available set of options are:

  • {icontype:”style”} Tries to use the icons specified in the “Style” tags of the XML file.
  • {icontype:”default”} Always uses the G_DEFAULT_ICON for the markers. If absent {icontype:”style} is used.
  • {sidebarid: … } A string containing the ID of a div to be used for the sidebar. If absent, no sidebar is generated.
  • {dropboxid: … } A string containing the ID of a div to be used for the drop down selection box. If absent, no dropbox is generated.
  • {sidebarfn:…} A reference to your own fundtion for creating sidebar entries. See below
  • {dropboxfn:…} A reference to your own fundtion for creating drop down selection entries. See below
  • {noshadow:true} Plots markers with no shadows. Doesn’t work with {icontype:”default”}.
  • {iwwidth: … } An integer specifying the width of the info window detail div. If absent, it will be set to 250.
  • {titlestyle: … } A string controlling the style of the info window title field, see below.
  • {descstyle: … } A string controlling the style of the info window description field, see below.
  • {directionstyle: … } A string controlling the style of the info window title field, see below.
  • {baseicon: … } A GIcon() to be used as a basis for the marker icons, see below.
  • {iwoptions:{ …}} A set of GInfoWindowOptions to be applied to the info windows. E.g. {iwoptions:{maxHeight:300,autoScroll:true}}
  • {markeroptions:{ … } A set of GMarkerOptions to be applied to the markers. E.g. {markeroptions:{draggable:true}}
    If you set the “icon” option, then the information from the XML file will be countermanded by your setting.
  • {createmarker: … } A reference to your own createMarker() function.
    Use this if you want to handle your own marker and sidebar creation.
    The function will be called with parameters containing the GLatLng() of the location, then strings containing the “name”, the “description” and the “styleUrl” fields from the XML file.
    NOTE: if you write your own createMarker function, then it’s up to you whether you implement any of the previous options.
  • {createpolyline: … } A reference to your own createPolyline() function.
    Use this if you want to handle your own polyline creation.
    The function will be called with the same parameters as new GPolyline(), i.e. points, colour, width, opacity.
  • {createpolygon: … } A reference to your own createPolygon() function.
    Use this if you want to handle your own polygon creation.
    The function will be called with the parameters: points, colour, width, opacity, fillcolour, fillopacity, bounds, name, description.
  • {addmarker. … } A reference to your (G)MarkerManager.addMarker() helper function. Use this if you want to manage your markers. See below.
  • {nozoom:true} If this option is absent, then the view will be zoomed to fit the data.
  • {sortbyname:true} The sidebar will be sorted by name.
  • {directions:true} Activate direction finding and local search in the info window
  • {printgif:true} Use gifs when printing icons.
  • {printgifpath:…} A string containing the location of the print gifs.
  • {elabelclass:…} A string containing the name of the CSS class to be used for ELabels, see below.
  • {elabelopacity:…} A number from 0 to 100 specifying the percent opacity of the ELabels.
  • {elabeloffset:…} A GSize specifying the offset of the ELabels.
  • {preloadimages:true} Attempts to preload images mentioned in the description, see below.
  • {polylineoptions:{ … } A set of GPolylineOptions to be applied to the polylines. E.g. {polylineoptions:{clickable:false}}
  • {polygonoptions:{ … } A set of GPolygonOptions to be applied to the polygons. E.g. {polygonoptions:{clickable:false}}

Properties

The internal structure of the EGeoXml instance is exposed via these properties:

  • .myvar – stores the first passed parameter from the Constructor.
  • .map – stores the second passed parameter from the Constructor.
  • .url – stores the third passed parameter from the Constructor.
  • .urls – stores an array of URLs to be processed.
  • .opts – stores the fourth passed parameter from the Constructor.
  • .iwwidth – a copy of the opts.iwwidth parameter, or 250 of that parametr is absent.
  • .bounds – a GLatLngBounds object which will be used for the zoom-to-bounds option.
  • .gmarkers – array of markers.
  • .gpolygons – array of polygons.
  • .gpolylines – array of polylines.
  • .groundoverlays – array of ground overlays.
  • .side_bar_html – the HTML string that is used to create the sidebar.
  • .side_bar_list – array used for sorting the sidebar.
  • .styles – an associative array containing information from the Style tags of the XML file.
  • .progress – the number of GDownloadURL requests currently in progress.
  • .lastmarker – a reference to the last marker that was clicked

Methods

EGeoXml.hide() Performs .hide() on all the markers, polylines, polygons and ground overlays, and hides the sidebar or dropbox.

EGeoXml.show() Performs .show() on all the markers, polylines, polygons and ground overlays, and unhides the sidebar or dropbox.

EGeoXml.parseString(txt) accepts a string of text containing the KML data an parses it.

It also accepts an array of strings, each string being a complete KML document.

You can use this instead of EGeoXml.parse().

When using .parseString the “url” parameter of new EGeoXml is ignored, so the whole thing looks like this:

     var exml;
     exml = new EGeoXml("exml", map, null, {sidebarid:"the_side_bar"});
     exml.parseString('<?xml version="1.0" encoding="UTF-8"?> ... </kml>');

or

     var exml;
     exml = new EGeoXml("exml", map, null, {sidebarid:"the_side_bar"});
     var doc1 = '<?xml version="1.0" encoding="UTF-8"?> ... </kml>';
     var doc2 = '<?xml version="1.0" encoding="UTF-8"?> ... </kml>';
     var doc3 = '<?xml version="1.0" encoding="UTF-8"?> ... </kml>';
     exml.parseString([doc1, doc2, doc3]);

“parsed” Event

EGeoXml throws a “parsed” event when the parsing is complete.

The EgeoXml.parse() operation is asynchronous because it uses GDownloadUrl(), so if you have code that should only operate after the markers etc. have all been created, then you’ll need to listen for that event.

Using (G)MarkerManager

EGeoXml isn’t really suitable for handling large numbers of markers, but using (G)MarkerManager can help speed things up a little.

To use (G)MarkerManager with EGeoXml, create the manager in the normal way, and write a helper function that assigns minZoom and maxZoom settings for each marker. Then use {addmarker: } to tell EGeoXml which function to use.

Whenever EGeoXml has a marker ready to be added to the map, instead of performing map.addOverlay(), it will pass the marker and some extra information to your helper function. Your function should examine the extra information to choose the minZoom and maxZoom settings for the marker and either call manager.addMarker() with that information immediately, or store the marker reference in an array to be used with manager.addMarkers() later when the “parsed” event is triggered.

The passed information is: (marker, title, description, number, iconImage). Your code can examine any of that information for clues about which manager settings to use.

It sounds complicated, but the code is quite simple, see the examples below.

Several pages of My Maps

If your My Map runs to several pages, then each of the XML files will contain data for an individual page.

Pass the URLs of those files in an array, and any overall processing (such as zooming to fit the map view to the data) will be performed on the contents of all the files taken together.

var exml = new EGeoXml(“exml”, map, [“file1.xml”,”file2.xml”,”file3.xml”]); If you use a separate EGeoXml() instance for each file, then the map view will be zoomed to fit the contents of each of those files taken separately. The map ends up being zoomed to fit whichever file request completes last.

Using info window styles

The “titlestyle”, “descstyle” and “directionstyle” options allow you to control the CSS styles of the three parts of the info window contents.

There are two basic ways to use these options. You can either use inline styles, like

   {titlestyle:'style = "color:#FF0000;text-align:center;"'}

or you can set the class attribute so that the info window uses a style from an embedded or external style sheet, like

   {directionstyle:'class = "dstyle"'}

If you set the class for the directions section, you can additionally declare styles for “.dstyle a” or “.dstyle form” to give the links and form within the directions section their own separate style settings.

Using any of these style settings wipes out the default styles that I apply to the corresponding section of the info window. My default style settings do not cascade.

You can, of course, apply your styles individually by editing the KML file. This facility just allows you to apply styles to the contents of all the info windows at once. Style information from the KML file does cascade.

Clever Stuff: I don’t actually limit you to only setting the “class” and “style” atrtributes. If you want to, you can add other attribute settings to the option strings and I’ll just plonk them in.

   {titlestyle:'class= "tstyle" onclick="titleclick()" id="Title"'}

Non-MyMap Icons

EGeoXml uses GIcon properties that use the same size of icon and shadow as the My Maps icons, (32,32) and (59,32). It also guesses the URL of the shadow image using the conventions used by My Maps. That’s fine if your XML file really is a My Maps file, but not if you’re using a XML file from another source that uses very different icons.

KML files don’t specify any information about the icon other than the URLs of the images, so EGeoXml can’t obtain the information from there.

So what you can do is create a GIcon() that contains all the properties for your icons, except the .image, and specify it in the {baseicon} option. EGeoXml will use the settings from the base icon plus the image specified in the XML file.

You should specify at least these properties for your base icon: shadow, iconSize, shadowSize, iconAnchor, infoWondowAnchor.

Printing

Google do not provide printable gif equivalents of the My Map icons.

By default, EGeoXml uses a stretched version of the default marker gif when printing. That’s pretty ugly.

A slightly better alternative is provided via the {printgif:true,printgifpath:”images/”} options.

When these options are set, EGeoXml will extract the filename of the icon, replace “.png” with “.gif” and use the specified path. E.g. if the icon image is “http://maps.google.com/mapfiles/ms/icons/sailing.png&#8221; and the printgifpath is “images/”, then EGeoXml will use “images/sailing.gif” for the print icon.

Both options must be specified. The printgifpath can be relative, like “images/” or absolute, like “http://mydomain.com/images/&#8221;.

A set of gif images matching the My Map png files can be obtained from here: printgifs.zip. To use them, unzip the file and place the gifs in your printgifpath folder.

Custom sidebars and selection boxes

You can now write your own functions for adding entries to the sidebar or drop down selection box.

Your function will be passed:

  1. the name of the global variable that points to the EGeoXml instance
  2. the placemark name
  3. the placemark type (“marker”, “polyline” or “polygon”)
  4. the index into the correspongding gmarker[], gpolyline[] or gpolygon[] array
  5. HTML that’s the same as I use for the polyline or polygon graphic in my sidebars

The drop down selection box currently only supports placemarks of type “marker”.

For example, here’s a function that creates a sidebar entry that’s the same as the EGeoXml default sidebar for markers, but returns an empty string for polylines and polygons:

    function side(myvar,name,type,i,graphic) {
      if (type == "marker") {
        return '<a href="javascript:GEvent.trigger('
          + myvar+ '.gmarkers['+i+'],\'click\')">' + name + '</a><br>';
      }
      return "";
    }

It would be invoked by using {sidebarfn:side}

ELabels

To have ELabels displayed alongside your markers, you need to:

  • Include the elabel.js extension.
  • Create a CSS style class for the label display.
  • Set the {elabelclass} option to specify that sytle class.
  • Optionally specify the {elabeloffset} to control the position of the label relative to the marker.
  • Optionally specify the {elabelopacity}. If omitted, the label will be 100% opaque.

The ELabel parameters are the same as ELabel parameters 3, 4 and 5 described in the Elabel documentation.

Preloading images

If you have images in the <description> field which don’t have a height attribute, then the API guesses that they have zero size and doesn’t make the info window graphics large enough.

The best way to fix that is to add a height attribute to all your images.

An alternative way to fix it is to use {preloadimages:true}. This will cause EGeoXml to attempt to identify all the image files that you use in your <description> fields, and preload them. If you have lots of large images, this will cause EGeoXml to execute rather slowly.

This only fixes the height of the info window. The width of the info window is controlled by the {iwwidth} parameter. If you have images wider than 250 pixels, then you will need to set {iwwidth} to at least the width of your widest image.

Remote Files

A security feature prevents EGeoXml directly reading files that are on other domains, but if your webhost supports server side scripting you can write a proxy server that reads a remote resource and echoes the data to its output stream.

Examples

Normal use with a sidebar

Using your own createMarker function

Using the default marker icon

Polylines

Polygons

Sorted sidebar, directions and non-MyMap icons

Using info window styles

Using GMarkerManager, method 1

Using GMarkerManager, method 2

Printable gifs and a drop down select box

Using ELabels

Using ClusterMarker

Accessing remote resources uses this server to obtain current data from maps.google.com


Third Party Extensions

Google Maps API Tutorial

Using the EWindow extension

The EWindow extension provides some of the functionality of custom info windows.

Here’s an example with a single EWindow that behaves something like the Google info window.

Here’s a similar example but now the EWindow has a close icon.

Here’s an example with multiple info windows that are permanently open.

Here’s a rather messy example with tabbed EWindows.

The basic procedure for using EWindows is:

  1. Download the ewindow.zip file which contains all the components, unzip it an place the contents on your web site.
  2. Call the CSS file like this <link rel=”stylesheet” type=”text/css” href=”ewindow.css”>
  3. Load the Javascript code like this <script type=”text/javascript” src=”ewindow.js”></script>
  4. Create and addOverlay() one or more EWindows, e.g. ewindow = new EWindow(map, E_STYLE_1); map.addOverlay(ewindow);
  5. Open the EWindow with ewindow.openOnMarker(marker,html) orewindow.openOnMap(point, html, offset)

EWindow Constructor

The parameters for new EWindow() are:

map The map on which the EWindow is to appear.
EStyle Information about the style of the EWindow
A few EStyles are provided, E_STYLE_1, E_STYLE_2, etc. or you can design your own.

Opening an EWindow

There are two methods provided for opening an EWindow

ewindow.openOnMap

This opens the EWindow on the map that you specified in the EWindow constructor.

point A GLatLng() or GPoint() specifying the geographical location
html A string containing simple HTML.
EWindows won’t handle all the complicated HTML that a Google info window can cope with, and won’t auto wrap the text. You’ll need to use <br> wherever you want the text to break
offset (optional) A GPoint() specifying a pixel offset.

ewindow.openOnMarker

This opens the EWindow on the map that you specified in the EWindow constructor, with a location derived from the specified marker.

This call uses the infoWindowAnchor parameter of the icon that is being used by the marker.

marker The marker on which the EWindow is to be opened.
html A string containing simple HTML.
EWindows won’t handle all the complicated HTML that a Google info window can cope with, and won’t auto wrap the text. You’ll need to use <br> wherever you want the text to break

Multiple EWindows

You can have as many EWindows as you like on the same map. Use the EWindow constsuctor to construct them ewindow2 = new EWindow(map, E_STYLE_1); map.addOverlay(ewindow2);

Closing an EWindow

Use ewindow.hide()

There’s no close icon in an EWindow, so you might consider arranging for them to close when the user clicks on the map

      // ========== Close the EWindow if theres a map click ==========
      GEvent.addListener(map, "click", function(marker,point) {
        if (point) {
          ewindow.hide();
        }
      });

map.removeOverlay(ewindow) is provided because it’s a required part of the Custom Overlay interface, but I don’t recommend using it.

You can use ewindow.show() to unhide an EWindow.

EWindow.copy()

ewindow.copy() is provided because it’s a required part of the Custom Overlay interface, but the copy will not be visible uless you use .openOnMap() or .openOnMarker() on the copy. So, for example, the EWindow will not be visible in blowups.

Making your own EStyles

If you don’t like the EStyles that are provided, you can make your own.

Create a suitable image for the stem. To keep things reasonably simple, the anchor point is always the bottom left corner of the stem image.

Then use the EStyle constructor like this
myEStyle = new EStyle(stemImage, stemSize, boxClass, boxOffset);

The parameters are:

stemImage A string containing the URL of the image file
stemSize A GSize() containing the pixel size of the stemImage
boxClass A string containing a class name to be used for the CSS style
boxOffset A GPoint containing the pixel offset of the bottom of the box from the bottom of the stem image
Typically, for stems that touch the bottom of the box, the x value will be a small negative number, and the y value will be the height of the image minus the width of the box border from the CSS.
For stems that touch the left of the box (like E_STYLE_6) the x value will typically be the width of the image minus the border, and the y value will be a small positive number.

If you create some nice EStyles that other people could use, send me a copy and I’ll include them in the EWindow distribution.

Third Party Extensions

Google Maps API Tutorial

Using EInsert.groundOverlay

EInsert.groundOverlay() is a static method which creates an EInsert() object using parameters similar to those of GGroundOverlay(). I.e. it uses a GLatLngBounds to specify the corners of the region, instead of using a centre point and size.

Here’s an example

In order to use EInsert.groundoverlay() you need to:

  1. Create a suitable image. Transparent PNG format is particularly suitable. Animated GIF format is not suitable.
  2. Include a copy of the “einsert.js” file. Please take your own local copy, don’t hot link to my copy of the file.
  3. Create some EInsert objects using EInsert.groundoverlay().
  4. Use map.addOverlay() to add them to the map.

Create some EInsert objects using EInsert.groundoverlay()

E.g.

      var insert = EInsert.groundOverlay("foo.png",new GLatLngBounds(sw,ne));

The parameters are:

  1. A string containing the URL of the image.
  2. A GLatLngBounds() specifying the bounds of the region.
  3. (Optional) zindex and pane control value.
    Use -1 if you want this EInsert to be placed below any polylines and GTileLayerOverlay()s.
    use 0 if you want this EInsert to be placed above any polylines and below any GTileLayerOverlay()s.
    Use 1 if you want this EInsert to be placed above any polylines and GTileLayerOverlay()s.
    Use other values to place one EInsert above or below another.
  4. (Optional) GProjection to be used for non-mercator map
  5. (Optional) Zoom level to be used for calculations if the GProjection doesn’t have a zoom level 17.

For normal maps that use the Mercator projection, omit the last two parameters.
The number of zoom levels in a GProjection is not exposed, so if you are using a custom GProjection with fewer zoom levels, you need to tell me the highest zoom level that I can use for the calculations.

Note Don’t write “new EInsert.groundOverlay(…)”. EInsert.groundOverlay() is a static method, not a constructor.

The EInsert() created by EInsert.groundOverlay() supports all the usual EInsert() methods. See Using the EInsert extension