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>

Stages of Pregnancy Pictures Slideshow: See the 1st, 2nd and 3rd Trimesters of Mom & Baby

Medical- Medicine

Second Trimester: Changes a Woman May Experience

Most women find the second trimester of pregnancy easier than the first. But it is just as important to stay informed about your pregnancy during these months. You might notice that symptoms like nausea and fatigue are going away. But other new, more noticeable changes to your body are now happening. Your abdomen will expand as the baby continues to grow. And before this trimester is over, you will feel your baby beginning to move!

Image Collection: Skin Problems

Medical- Medicine
Picture of White Bumps (Milia)

Picture of White Bumps (Milia)

Tiny white spots very often appear on a newborn’s face and gums during the first week. The spots are called milia (say “MIL-ee-uh”). Sometimes they also appear on the roof of the mouth (palate), where they are called Epstein pearls. Milia go away by themselves in a few weeks and aren’t harmful.
In the first few months of a baby’s life, any rash associated with other symptoms (such as fever, poor feeding, lethargy, cough) needs to be evaluated by a pediatrician as soon as possible.

Having cancer treatment? Protect your heart

Heart Disease

In this video, Cleveland Clinic cardiologist, Thomas Marwick, MD, PhD explains how chemotherapy and radiation affect heart health. The latest methods of non-invasive cardiac testing can obtain images of the heart and detect problems as a preventative measure for patients undergoing cancer treatment.

Web Chat – Cancer and the Heart – Friday, October 14 at 12 noon ET

Dr. Juan Carlos Plana will answer questions about strain imaging screening methods for patients beginning chemotherapy – as well as – questions about heart disease in patients who have had chemotherapy or radiation in the past. Start asking questions today at 1 pm ET. They will be answered during the chat at noon ET on 10/14.