Google Maps API
Google Developer Day 2007

http://atenasio.googlepages.com/gdd2007.html

Contents


Google Maps API - Official References



Books




Introduction

Example Sites


Code Framework

<script src="http://maps.google.co.jp/?file=api&v=2&key=..."></script>
<script>
function load() {
  // Your Google Maps API code here
}
</script> 

<body onload="load()" onunload="GUnload()">
  <div id="map" style="width:500px;height:500px"></div>
</body>
Notes:

Code Examples

Each of the following examples shows only the relevant JavaScript code, not the full HTML file. You can plug the JS code into the skeleton HTML file shown on the documentation page, or you can download the full HTML file from the documentation page.

The Basics

The following example creates a map and centers it on Tokyo.

var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(35.689527, 139.691827), 13);

Map Movement and Animation

The following example displays a map, waits two seconds, and then pans to a new center point.

The panTo method centers the map at a given point. If the specified point is in the visible part of the map, then the map pans smoothly to the point; if not, the map jumps to the point.

var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(35.689527, 139.691827), 13);
window.setTimeout(function() {
  map.panTo(new GLatLng(35.658055, 139.702116));
}, 2000);

Adding Controls to the Map

You can add controls to the map with the addControl method. In this case, we add the built-in GSmallMapControl and GMapTypeControl controls, which let us pan/zoom the map and switch between Map and Satellite modes, respectively.

var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(35.689527, 139.691827), 13);

Event Listeners

To register an event listener, call the GEvent.addListener method. Pass it a map, an event to listen for, and a function to call when the specified event occurs. In the following example code, we display the latitude and longitude of the center of the map after the user drags the map.

var map = new GMap2(document.getElementById("map"));
GEvent.addListener(map, "moveend", function() {
  var center = map.getCenter();
  document.getElementById("message").innerHTML = center.toString();
});
map.setCenter(new GLatLng(35.689527, 139.691827), 13);

For more information about events, see the Events Overview. For a complete list of GMap2 events and the arguments they generate, see GMap2.

Opening an Info Window

To create an info window, call the openInfoWindow method, passing it a location and a DOM element to display. The following example code displays an info window anchored to the center of the map with a simple "Hello, world" message.

var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(35.689527, 139.691827), 13);
map.openInfoWindow(map.getCenter(),
                   document.createTextNode("Hello, world"));

Map Overlays

This example displays 10 markers at random locations on the map and a polyline with 5 random points. GMarker use the default Google Maps icon if no other icon is given. See Creating Icons for an example using custom icons.

Remember that you must include the VML namespace and CSS in your HTML document to view polylines in IE. See XHTML and VML for more information.

var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(35.689527, 139.691827), 14); 

// Add 10 markers in random locations on the map
var bounds = map.getBounds();
var southWest = bounds.getSouthWest();
var northEast = bounds.getNorthEast();
var lngSpan = northEast.lng() - southWest.lng();
var latSpan = northEast.lat() - southWest.lat();
for (var i = 0; i < 10; i++) {
  var point = new GLatLng(southWest.lat() + latSpan * Math.random(),
                          southWest.lng() + lngSpan * Math.random());
  map.addOverlay(new GMarker(point));
}

// Add a polyline with five random points. Sort the points by
// longitude so that the line does not intersect itself.
var points = [];
for (var i = 0; i < 5; i++) {
  points.push(new GLatLng(southWest.lat() + latSpan * Math.random(),
                          southWest.lng() + lngSpan * Math.random()));
}
points.sort(function(p1, p2) {
  return p1.lng() - p2.lng();
});
map.addOverlay(new GPolyline(points));

Click Handling

To trigger an action when a user clicks the map, register a listener for the "click" event on your GMap2 instance. When the event is triggered, the event handler will receive two arguments: the marker that was clicked (if any), and the GLatLng of the clicked point. If no marker was clicked, the first argument will be null.

Note: Markers are the only built-in overlay that supports the "click" event. Other types of overlays, like GPolyline, are not clickable.

In the following example, when the visitor clicks a point on the map without a marker, we create a new marker at that point. When the visitor clicks a marker, we remove it from the map.

var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(35.689527, 139.691827), 14);

GEvent.addListener(map, "click", function(marker, point) {
  if (marker) {
    map.removeOverlay(marker);
  } else {
    map.addOverlay(new GMarker(point));
  }
});

For more information about events, see the Events Overview. For a complete list of GMap2 events and the arguments they generate, see GMap2.

Display Info Windows Above Markers

In this example, we show a custom info window above each marker by listening to the click event for each marker. We take advantage of JavaScript function closures to customize the info window content for each marker.

var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(35.689527, 139.691827), 14);

// Creates a marker at the given point with the given number label
function createMarker(point, number) {
  var marker = new GMarker(point);
  GEvent.addListener(marker, "click", function() {
    marker.openInfoWindowHtml("Marker #<b>" + number + "</b>");
  });
  return marker;
}

// Add 10 markers to the map at random locations
var bounds = map.getBounds();
var southWest = bounds.getSouthWest();
var northEast = bounds.getNorthEast();
var lngSpan = northEast.lng() - southWest.lng();
var latSpan = northEast.lat() - southWest.lat();
for (var i = 0; i < 10; i++) {
  var point = new GLatLng(southWest.lat() + latSpan * Math.random(),
                          southWest.lng() + lngSpan * Math.random());
  map.addOverlay(createMarker(point, i + 1));
}

For more information about events, see the Events Overview. For a complete list of GMap2 events and the arguments they generate, see GMap2.

Tabbed Info Windows

Version 2 of the API introduces openInfoWindowTabs() and the GInfoWindowTab class to support info windows with multiple, named tabs. The example below displays a simple tabbed info window above a single marker.

var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(35.689527, 139.691827), 14);

// Our info window content
var infoTabs = [
  new GInfoWindowTab("Tab #1", "This is tab #1 content"),
  new GInfoWindowTab("Tab #2", "This is tab #2 content")
];

// Place a marker in the center of the map and open the info window
// automatically
var marker = new GMarker(map.getCenter());
GEvent.addListener(marker, "click", function() {
  marker.openInfoWindowTabsHtml(infoTabs);
});
map.addOverlay(marker);
marker.openInfoWindowTabsHtml(infoTabs);

Creating Icons

This example creates a new type of icon, using the Google Ride Finder "mini" markers as an example. We have to specify the foreground image, the shadow image, and the points at which we anchor the icon to the map and anchor the info window to the icon.

var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(35.689527, 139.691827), 14);

// Create our "tiny" marker icon
var icon = new GIcon();
icon.image = "http://labs.google.com/ridefinder/images/mm_20_red.png";
icon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
icon.iconSize = new GSize(12, 20);
icon.shadowSize = new GSize(22, 20);
icon.iconAnchor = new GPoint(6, 20);
icon.infoWindowAnchor = new GPoint(5, 1);

// Add 10 markers to the map at random locations
var bounds = map.getBounds();
var southWest = bounds.getSouthWest();
var northEast = bounds.getNorthEast();
var lngSpan = northEast.lng() - southWest.lng();
var latSpan = northEast.lat() - southWest.lat();
for (var i = 0; i < 10; i++) {
  var point = new GLatLng(southWest.lat() + latSpan * Math.random(),
                          southWest.lng() + lngSpan * Math.random());
  map.addOverlay(new GMarker(point, icon));
}

Using Icon Classes

In many cases, your icons may have different foregrounds, but the same shape and shadow. The easiest way to achieve this behavior is to use the copy constructor for the =GIcon= class, which copies all the properties over to a new icon which you can then customize.

var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(35.689527, 139.691827), 14);

// Create a base icon for all of our markers that specifies the
// shadow, icon dimensions, etc.
var baseIcon = new GIcon();
baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
baseIcon.iconSize = new GSize(20, 34);
baseIcon.shadowSize = new GSize(37, 34);
baseIcon.iconAnchor = new GPoint(9, 34);
baseIcon.infoWindowAnchor = new GPoint(9, 2);
baseIcon.infoShadowAnchor = new GPoint(18, 25);

// Creates a marker whose info window displays the letter corresponding
// to the given index.
function createMarker(point, index) {
  // Create a lettered icon for this point using our icon class
  var letter = String.fromCharCode("A".charCodeAt(0) + index);
  var icon = new GIcon(baseIcon);
  icon.image = "http://www.google.com/mapfiles/marker" + letter + ".png";
  var marker = new GMarker(point, icon);

  GEvent.addListener(marker, "click", function() {
    marker.openInfoWindowHtml("Marker <b>" + letter + "</b>");
  });
  return marker;
}

// Add 10 markers to the map at random locations
var bounds = map.getBounds();
var southWest = bounds.getSouthWest();
var northEast = bounds.getNorthEast();
var lngSpan = northEast.lng() - southWest.lng();
var latSpan = northEast.lat() - southWest.lat();
for (var i = 0; i < 10; i++) {
  var point = new GLatLng(southWest.lat() + latSpan * Math.random(),
                          southWest.lng() + lngSpan * Math.random());
  map.addOverlay(createMarker(point, i));
}

Using XML and Asynchronous HTTP with Maps

In this example, we download a static file ("data.xml") that contains a list of lat/lng coordinates in XML using the GDownloadUrl method. When the download completes, we parse the XML with GXml and create a marker at each of those points in the XML document.

var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(35.689527, 139.691827), 14);

// Download the data in data.xml and load it on the map. The format we
// expect is:
// <markers>
//   <marker lat="35.681701" lng="139.675369"/>
//   <marker lat="35.682538" lng="139.685583"/>

// </markers>
GDownloadUrl("data.xml", function(data, responseCode) {
  var xml = GXml.parse(data);
  var markers = xml.documentElement.getElementsByTagName("marker");
  for (var i = 0; i < markers.length; i++) {
    var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
                            parseFloat(markers[i].getAttribute("lng")));
    map.addOverlay(new GMarker(point));
  }
});

This example uses the external XML data file data.xml.

Custom Map Controls

Version 2 of the Maps API introduces the ability to create custom map controls, like the built-in pan and zoom controls, by subclassing the built-in GControl class. In this example, we create a simple zoom control that has textual links rather than the graphical icons used in the standard Google Maps zoom control.

The GTextualZoomControl class defines the two required methods of the GControl interface: initialize(), in which we create the DOM elements representing our control; and getDefaultPosition(), in which we return the GControlPosition used if another position is not given when this control is added to a map. See the class reference for GControl for more information about the methods you can override when you create your custom controls.

All map controls should be added to the map container which can be accessed with the getContainer() method on GMap2.

// A TextualZoomControl is a GControl that displays textual "Zoom In"
// and "Zoom Out" buttons (as opposed to the iconic buttons used in
// Google Maps).
function TextualZoomControl() {
}
TextualZoomControl.prototype = new GControl();

// Creates a one DIV for each of the buttons and places them in a container
// DIV which is returned as our control element. We add the control to
// to the map container and return the element for the map class to
// position properly.
TextualZoomControl.prototype.initialize = function(map) {
  var container = document.createElement("div");

  var zoomInDiv = document.createElement("div");
  this.setButtonStyle_(zoomInDiv);
  container.appendChild(zoomInDiv);
  zoomInDiv.appendChild(document.createTextNode("Zoom In"));
  GEvent.addDomListener(zoomInDiv, "click", function() {
    map.zoomIn();
  });

  var zoomOutDiv = document.createElement("div");
  this.setButtonStyle_(zoomOutDiv);
  container.appendChild(zoomOutDiv);
  zoomOutDiv.appendChild(document.createTextNode("Zoom Out"));
  GEvent.addDomListener(zoomOutDiv, "click", function() {
    map.zoomOut();
  });

  map.getContainer().appendChild(container);
  return container;
}

// By default, the control will appear in the top left corner of the
// map with 7 pixels of padding.
TextualZoomControl.prototype.getDefaultPosition = function() {
  return new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(7, 7));
}

// Sets the proper CSS for the given button element.
TextualZoomControl.prototype.setButtonStyle_ = function(button) {
  button.style.textDecoration = "underline";
  button.style.color = "#0000cc";
  button.style.backgroundColor = "white";
  button.style.font = "small Arial";
  button.style.border = "1px solid black";
  button.style.padding = "2px";
  button.style.marginBottom = "3px";
  button.style.textAlign = "center";
  button.style.width = "6em";
  button.style.cursor = "pointer";
}

var map = new GMap2(document.getElementById("map"));
map.addControl(new TextualZoomControl());
map.setCenter(new GLatLng(35.689527, 139.691827), 14);

Custom Overlays

Version 2 of the Maps API introduces the ability to create custom map overlays, like the built-in GMarker and GPolyline overlays, by subclassing the built-in GOverlay class. In this example, we create a Rectangle overlay that outlines a geographic region on the map.

The Rectangle class defines the four required methods of the GOverlay interface: initialize(), in which we create the DOM elements representing our overlay; remove(), in which we remove the overlay elements from the map; copy(), which copies the overlay for use in another map instance; and redraw(), which positions and sizes the overlay on the map based on the current projection and zoom level. See the class reference for GOverlay for more information about the methods you can override when you create your custom overlays.

Every DOM element that makes up an overlay exists on a map pane that defines the z-order at which it will be drawn. For example, polylines are flat against the map, so they are drawn in the lowest G_MAP_MAP_PANE. Markers place their shadow elements in the G_MAP_MARKER_SHADOW_PANE and their foreground elements in the G_MAP_MARKER_PANE. Placing your overlay elements in the correct panes ensures that polylines are drawn below marker shadows and the info window is drawn above other overlays on the map. In this example, our overlay is flat against the map, so we add it to the lowest z-order pane G_MAP_MAP_PANE, just like GPolyline. See the class reference for a complete list of map panes.

// A Rectangle is a simple overlay that outlines a lat/lng bounds on the
// map. It has a border of the given weight and color and can optionally
// have a semi-transparent background color.
function Rectangle(bounds, opt_weight, opt_color) {
  this.bounds_ = bounds;
  this.weight_ = opt_weight || 2;
  this.color_ = opt_color || "#888888";
}
Rectangle.prototype = new GOverlay();

// Creates the DIV representing this rectangle.
Rectangle.prototype.initialize = function(map) {
  // Create the DIV representing our rectangle
  var div = document.createElement("div");
  div.style.border = this.weight_ + "px solid " + this.color_;
  div.style.position = "absolute";

  // Our rectangle is flat against the map, so we add our selves to the
  // MAP_PANE pane, which is at the same z-index as the map itself (i.e.,
  // below the marker shadows)
  map.getPane(G_MAP_MAP_PANE).appendChild(div);

  this.map_ = map;
  this.div_ = div;
}

// Remove the main DIV from the map pane
Rectangle.prototype.remove = function() {
  this.div_.parentNode.removeChild(this.div_);
}

// Copy our data to a new Rectangle
Rectangle.prototype.copy = function() {
  return new Rectangle(this.bounds_, this.weight_, this.color_,
                       this.backgroundColor_, this.opacity_);
}

// Redraw the rectangle based on the current projection and zoom level
Rectangle.prototype.redraw = function(force) {
  // We only need to redraw if the coordinate system has changed
  if (!force) return;

  // Calculate the DIV coordinates of two opposite corners of our bounds to
  // get the size and position of our rectangle
  var c1 = this.map_.fromLatLngToDivPixel(this.bounds_.getSouthWest());
  var c2 = this.map_.fromLatLngToDivPixel(this.bounds_.getNorthEast());

  // Now position our DIV based on the DIV coordinates of our bounds
  this.div_.style.width = Math.abs(c2.x - c1.x) + "px";
  this.div_.style.height = Math.abs(c2.y - c1.y) + "px";
  this.div_.style.left = (Math.min(c2.x, c1.x) - this.weight_) + "px";
  this.div_.style.top = (Math.min(c2.y, c1.y) - this.weight_) + "px";
}

var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(35.689527, 139.691827), 14);

// Display a rectangle in the center of the map at about a quarter of
// the size of the main map
var bounds = map.getBounds();
var southWest = bounds.getSouthWest();
var northEast = bounds.getNorthEast();
var lngDelta = (northEast.lng() - southWest.lng()) / 4;
var latDelta = (northEast.lat() - southWest.lat()) / 4;
var rectBounds = new GLatLngBounds(
    new GLatLng(southWest.lat() + latDelta, southWest.lng() + lngDelta),
    new GLatLng(northEast.lat() - latDelta, northEast.lng() - lngDelta));
map.addOverlay(new Rectangle(rectBounds));

Geocoder Examples

You can access the Maps API geocoder directly by sending HTTP requests to Google, or you can use the GClientGeocoder object to send those requests from within the Javascript. Whether you make the geocoding calls from your server or the user's browser is up to you. If you have a fairly stable database of addresses (e.g. a list of properties for sale), we recommend that you geocode them once using the HTTP request method and cache the coordinates in your own database. This means your site will be faster for your users and also uses up less of your daily quota of geocode requests. However, if you don't have access to server-side scripting, you can send geocode requests from the JavaScript.

Geocoding using JavaScript

The geocoder can be accessed from within the JavaScript using the GClientGeocoder object. The getLatLng method can be used to convert an address into a GLatLng. Because geocoding involves sending a request to Google's servers, it can take some time. To avoid making your script wait, you need to pass in a function to call after the response comes back. In this example, we geocode an address, add a marker at that point, and open an info window displaying the address.

var map = new GMap2(document.getElementById("map"));
var geocoder = new GClientGeocoder();

function showAddress(address) {
  geocoder.getLatLng(
    address,
    function(point) {
      if (!point) {
        alert(address + " not found");
      } else {
        map.setCenter(point, 13);
        var marker = new GMarker(point);
        map.addOverlay(marker);
        marker.openInfoWindowHtml(address);
      }
    }
  );
}

HTTP Request

To access the Maps API geocoder directly using server-side scripting, send a request to http://maps.google.co.jp/maps/geo? with the following parameters in the URI:

In this example, we request the geographic coordinates of Google's headquarters.

http://maps.google.com/maps/geo?q=東京タワー&output=xml&key=abcdefg

If you specify json as the output, the response is formatted as a JSON object, as shown in the example above. If you specify xml or kml, the response is returned in XML or KML. The XML and KML outputs are identical except for the MIME types.

For example, this is the response that the geocoder returns for "品川駅".

<kml>
  <Response>
    <name>品川駅</name>
    <Status>
      <code>200</code>
      <request>geocode</request>
    </Status>
    <Placemark id="p1">
      <address>(日本)品川駅(東京)</address>
      <AddressDetails Accuracy="1">
        <Country>
          <CountryNameCode>JP</CountryNameCode>
          <AddressLine>品川駅(東京)</AddressLine>
        </Country>
      </AddressDetails>
      <Point>
        <coordinates>139.740440,35.630152,0</coordinates>
      </Point>
    </Placemark>
  </Response>
</kml>

Troubleshooting

If your code doesn't seem to be working, here are some approaches that might help you solve your problems:


New Additions to the API

Marker Manager

The following example creates a mock weather map for Europe. At zoom level 3, 20 randomly distributed weather icons are displayed. At level 6, when all 200 cities with population over 300,000 are easily distinguished, an additional 200 markers are shown. Finally, at level 8, 1000 markers are shown. (Note: to simplify the example, markers will be added at random locations.)

  var IMAGES = [ "sun", "rain", "snow", "storm" ];
  var ICONS = [];
  var map = null;
  var mgr = null;

  map = new GMap2(document.getElementById("map"));
  map.addControl(new GLargeMapControl());
  map.setCenter(new GLatLng(48.25, 11.00), 4);
  map.enableDoubleClickZoom();
  window.setTimeout(setupWeatherMarkers, 0);

  function getWeatherIcon() {
    var i = Math.floor(IMAGES.length*Math.random());
    if (!ICONS[i]) {
      var icon = new GIcon();
      icon.image = "markermanager_" + IMAGES[i] + ".png";
      icon.iconAnchor = new GPoint(16, 16);
      icon.infoWindowAnchor = new GPoint(16, 0);
      icon.iconSize = new GSize(32, 32);
      icon.shadow = "markermanager_" + IMAGES[i] + "-shadow.png";
      icon.shadowSize = new GSize(59, 32);
      ICONS[i] = icon;
    }
    return ICONS[i];
  }

  function getRandomPoint() {
    var lat = 48.25 + (Math.random() - 0.5)*14.5;
    var lng = 11.00 + (Math.random() - 0.5)*36.0;
    return new GLatLng(Math.round(lat*10)/10, Math.round(lng*10)/10);
  }

  function getWeatherMarkers(n) {
    var batch = [];
    for (var i = 0; i < n; ++i) {
      batch.push(new GMarker(getRandomPoint(), { icon: getWeatherIcon() }));
    }
    return batch;
  }

  function setupWeatherMarkers() {
    mgr = new GMarkerManager(map);
    mgr.addMarkers(getWeatherMarkers(20), 3);
    mgr.addMarkers(getWeatherMarkers(200), 6);
    mgr.addMarkers(getWeatherMarkers(1000), 8);
    mgr.refresh();
  }

TileLayerOverlay

A GTileLayerOverlay augments the map with a GTileLayer. It implements the GOverlay interface and thus is added to the map using the GMap2.addOverlay() method. The GTileLayer is presented on top of the existing map imagery - to replace the imagery instead, put the GTileLayer inside a custom GMapType.

In the example below, compare the maptype method to the overlay approach:

var map = new GMap2(document.getElementById('map'));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(37.42, -122.16), 15);

var stanfordTileLayer = new GTileLayer(
  new GCopyrightCollection(""), 1, 22);

stanfordTileLayer.getTileUrl = function(tile, zoom) {
  return "http://www.stanford.edu/dept/ucomm/ma" + "p/tiles/base_" +
      tile.x + "_" + tile.y + "_" + zoom + ".png";
};


// Using a map type:
var stanfordMapType = new GMapType([stanfordTileLayer],
    new GMercatorProjection(23), "Stanford", { shortName: "Stan"});
 map.addMapType(stanfordMapType);

/*
// Using a tile layer overlay:
var tileLayerOverlay = new GTileLayerOverlay(stanfordTileLayer);
map.addOverlay(tileLayerOverlay);
tileLayerOverlay.show();
*/

GGeoXML

The Google Maps API now supports the KML and GeoRSS data formats for displaying geographic information. These data formats are added to a map using the GGeoXml object, whose constructor takes the URL of a publically accessible XML file. GGeoXml placemarks are rendered as markers, while GGeoXml polylines and polygons are rendered as Google Maps API polylines and polygons.
// The GGeoXml constructor takes a URL pointing to a KML or GeoRSS file.
// You add the GGeoXml object to the map as an overlay, and remove it as an overlay as well.
// The Maps API determines implicitly whether the file is a KML or GeoRSS file.

var geoXml = new GGeoXml("http://bbs.keyhole.com/ubb/download.php?Number=50664");

var map = new GMap2(document.getElementById('map'));
map.addControl(new GLargeMapControl());
map.setCenter(new GLatLng(49.496675,-102.65625), 3); 
map.addControl(new GLargeMapControl());
map.addOverlay(geoXml);


Travelling Salesman Problem?

Maps present data spatially. Think of it as another way to organize data.
Copyright 2007 Google Inc.