Google Maps API Tutorial

© 2007, 2008, 2009 Mike Williams

 
Translate this page:

 

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 class="gmnoprint" 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 class="gmnoprint" 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 class="gmnoprint" 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 class="gmnoscreen" 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;" class="gmnoprint">
          <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" class="gmnoprint" 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;" class="gmnoprint">
          <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;" class="gmnoprint" 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 class="gmnoprint" 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 class="gmnoprint" 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 class="gmnoprint" 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>

Back to Mike's Homepage
Up to the start of this tutorial