Google Maps API Documentation

The Google Maps API lets you embed Google Maps in your own web pages. To use the API, you need to sign up for an API key and follow the instructions below.

The API is new, so there may be bugs and slightly less than perfect documentation. Bear with us as we fill in the holes, and join the join the Maps API discussion group to give feedback and discuss the API.

Introduction

The "Hello World" of Google Maps

The easiest way to start reading about an API is to see a simple example. This web page displays a 300x300 map centered on Palo Alto:

<!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">
  <head>
    <title>Google Maps JavaScript API Example - simple</title>
    <script src="http://maps.google.com/maps?file=api&v=1&key=abcdefg" type="text/javascript"></script>
  </head>
  <body>
    <div id="map" style="width: 300px; height: 300px"></div>
    <script type="text/javascript">
    //<![CDATA[

    if (GBrowserIsCompatible()) {
      var map = new GMap(document.getElementById("map"));
      map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4);
    }

    //]]>
    </script>
  </body>

</html>

You can download this example to edit and play around with it, though you will need to substitute "abcdefg" with your own Maps API key to run the example on your own site.

As you can see in the example above, Google Maps exports a single JavaScript URL (http://maps.google.com/maps?file=api&v=1) that includes all of the symbols you need to create Google Maps on your pages. To use the Google Maps API, you need to include a single script tag pointing to that URL with the key you got when you signed up for the API:

<script src="http://maps.google.com/maps?file=api&v=1&key=abcdefg" type="text/javascript"></script>

The main class exported by the Google Maps API is GMap, which represents a single map on the page. You can create as many instances of this class you want (one for each map on the page). A map is embedded in a container, which is typically a div element.

The methods for manipulating and adding overlays to map instances are detailed below.

Browser Compatibility

Google Maps is not compatible with every web browser. Google Maps currently supports recent versions of Firefox/Mozilla, IE 5.5+, Safari 1.2+, and sort of supports Opera. IE 5.0 is not supported. Since different applications require different behaviors for users with incompatible browsers, the Maps API provides a global method (GBrowserIsCompatible()) to check compatibility, but it does not have any automatic behavior for incompatible browsers. The script http://maps.google.com/maps?file=api&v=1 will parse on almost every browser without errors, so you can safely include the script before checking for compatibility.

None of the examples in this document besides the one above check for GBrowserIsCompatible(), nor do they print any message for older browsers. Clearly real applications should do something more friendly, but we have omitted these checks to make the examples more readable.

XHTML and VML

We recommend that you use standards-compliant XHTML on pages that contain maps. When browsers see the XHTML DOCTYPE at the top of the page, they execute the page in "standards compliant mode," which makes layout and behaviors much more predictable across browsers.

Likewise, if you include Polylines on your map, you need to include the VML namespace in your XHTML document for IE browsers. Your HTML document should begin like this

<!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>
    <style type="text/css">
    v\:* {
      behavior:url(#default#VML);
    }
    </style>
    <script src="http://maps.google.com/maps?file=api&v=1&key=abcdefg" type="text/javascript"></script>
  </head>

See Microsoft's VML workshop for more information.

API Updates

The URL http://maps.google.com/maps?file=api&v=1 refers to "version 1" of the API. When we do a significant update to the API in the future, we will up the version number and send out a notice on Google Code and the Maps API discussion group.

We will try to run the old and new version concurrently for about a month, after which the old version will be turned off.

The Maps team will transparently update the API with the most recent bug fixes and performance enhancements. These bug fixes should only improve performance and fix bugs, but we may inadvertently break some API clients. Please use the Maps API discussion group to report issues like this.

Geocoding, Routing, etc.

The Google Maps API does not include geocoding or routing services at this time, though there are a number of free geocoders on the Web.

Examples

The Basics

Creates a map and centers it on Palo Alto.

var map = new GMap(document.getElementById("map"));
map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4);

View example (simple.html)

Map Movement and Animation

The recenterOrPanToLatLng method does a continuous pan if the lat/lng is in the current map viewport, or it does a discrete movement otherwise.

var map = new GMap(document.getElementById("map"));
map.centerAndZoom(new GPoint(-122.1419, 37.4419), 4);
window.setTimeout(function() {
  map.recenterOrPanToLatLng(new GPoint(-122.1569, 37.4569));
}, 2000);

View example (animate.html)

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, which let us pan/zoom the map and switch between Map and Satellite mode.

var map = new GMap(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4);

View example (controls.html)

Event Listeners

Event listeners are registered with GEvent.addListener. In this example, we echo the lat/lng of the center of the map after it is dragged or moved by the user.

var map = new GMap(document.getElementById("map"));
GEvent.addListener(map, "moveend", function() {
  var center = map.getCenterLatLng();
  var latLngStr = '(' + center.y + ', ' + center.x + ')';
  document.getElementById("message").innerHTML = latLngStr;
});
map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4);

View example (event.html)

Opening an Info Window

Displays an info window that points to the center of the map with a simple "Hello world" message. Info windows are typically opened above markers, but they can be opened anywhere on the map.

var map = new GMap(document.getElementById("map"));
map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4);
map.openInfoWindow(map.getCenterLatLng(),
                   document.createTextNode("Hello world"));

View example (infowindow.html)

Map Overlays

Creates 10 random markers and a random polyline to illustrate the use of map overlays.

// Center the map on Palo Alto
var map = new GMap(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4);

// Add 10 random markers in the map viewport using the default icon
var bounds = map.getBoundsLatLng();
var width = bounds.maxX - bounds.minX;
var height = bounds.maxY - bounds.minY;
for (var i = 0; i < 10; i++) {
  var point = new GPoint(bounds.minX + width * Math.random(),
                        bounds.minY + height * Math.random());
  var marker = new GMarker(point);
  map.addOverlay(marker);
}

// Add a polyline with 4 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 GPoint(bounds.minX + width * Math.random(),
                        bounds.minY + height * Math.random()));
}
points.sort(function(p1, p2) { return p1.x - p2.x; });
map.addOverlay(new GPolyline(points));

View example (overlay.html)

Click Handling

When you click the map, we create a new marker at that point. When you click a marker, we remove it from the map.

var map = new GMap(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4);

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

View example (click.html)

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 function closures to customize the info window content for each marker.

// Center the map on Palo Alto
var map = new GMap(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4);

// Creates a marker whose info window displays the given number
function createMarker(point, number) {
  var marker = new GMarker(point);

  // Show this marker's index in the info window when it is clicked
  var html = "Marker #<b>" + number + "</b>";
  GEvent.addListener(marker, "click", function() {
    marker.openInfoWindowHtml(html);
  });

  return marker;
}

// Add 10 random markers in the map viewport
var bounds = map.getBoundsLatLng();
var width = bounds.maxX - bounds.minX;
var height = bounds.maxY - bounds.minY;
for (var i = 0; i < 10; i++) {
  var point = new GPoint(bounds.minX + width * Math.random(),
                        bounds.minY + height * Math.random());
  var marker = createMarker(point, i + 1);
  map.addOverlay(marker);
}

View example (markerinfowindow.html)

Creating Icons

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.

// 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);

// Center the map on Palo Alto
var map = new GMap(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4);

// Creates one of our tiny markers at the given point
function createMarker(point) {
  var marker = new GMarker(point, icon);
  map.addOverlay(marker);
  GEvent.addListener(marker, "click", function() {
    marker.openInfoWindowHtml("You clicked me!");
  });
}

// Place the icons randomly in the map viewport
var bounds = map.getBoundsLatLng();
var width = bounds.maxX - bounds.minX;
var height = bounds.maxY - bounds.minY;
for (var i = 0; i < 10; i++) {
  createMarker(new GPoint(bounds.minX + width * Math.random(),
                          bounds.minY + height * Math.random()));
}

View example (icon.html)

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.

// 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);

// Center the map on Palo Alto
var map = new GMap(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4);

// 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 from above
  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);

  // Show this marker's index in the info window when it is clicked
  var html = "Marker <b>" + letter + "</b>";
  GEvent.addListener(marker, "click", function() {
    marker.openInfoWindowHtml(html);
  });

  return marker;
}

// Add 10 random markers in the map viewport
var bounds = map.getBoundsLatLng();
var width = bounds.maxX - bounds.minX;
var height = bounds.maxY - bounds.minY;
for (var i = 0; i < 10; i++) {
  var point = new GPoint(bounds.minX + width * Math.random(),
                         bounds.minY + height * Math.random());
  var marker = createMarker(point, i);
  map.addOverlay(marker);
}

View example (iconclass.html)

Using XML and Asynchronous RPC ("AJAX") with Maps

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

// Center the map on Palo Alto
var map = new GMap(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4);

// Download the data in data.xml and load it on the map. The format we
// expect is:
// <markers>
//   <marker lat="37.441" lng="-122.141"/>
//   <marker lat="37.322" lng="-121.213"/>
// </markers>
var request = GXmlHttp.create();
request.open("GET", "data.xml", true);
request.onreadystatechange = function() {
  if (request.readyState == 4) {
    var xmlDoc = request.responseXML;
    var markers = xmlDoc.documentElement.getElementsByTagName("marker");
    for (var i = 0; i < markers.length; i++) {
      var point = new GPoint(parseFloat(markers[i].getAttribute("lng")),
                             parseFloat(markers[i].getAttribute("lat")));
      var marker = new GMarker(point);
      map.addOverlay(marker);
    }
  }
}
request.send(null);

View example (async.html)

API Overview

The `GMap` class

An instance of GMap represents a single map on the page. You can create as many instances of this class you want (one for each map on the page). A map is embedded in a container, which is typically a div element. Unless you specify a size explicitly, the map will use the size of the container to determine its size.

The GMap class exports methods to manipulate the map position (center and zoom level) and add and remove overlays (e.g., GMarker and GPolyline instances). It also exports a method to open an "info window," which is the popup window you see on Google Maps and Google Local. The map has a single info window, so only one window can be open at a given time.

See the GMap class reference for more information.

Events

You can add dynamic elements to your application using event listeners. An object exports a number of named events, and your application can "listen" to those events using the static methods GEvent.addListener or GEvent.bind. For example, this code snippet shows an alert every time the user clicks on the map:

var map = new GMap(document.getElementById("map"));
GEvent.addListener(map, "click", function() {
  alert("You clicked the map");
});

GEvent.addListener takes a function as the third argument, which promotes the use of function closures for event handlers. If you want to bind an event to a class method, you can use GEvent.bind. For example:

function MyApplication() {
  this.counter = 0;
  this.map = new GMap(document.getElementById("map"));
  GEvent.bind(this.map, "click", this, this.onMapClick);
}

MyApplication.prototype.onMapClick() {
  this.counter++;
  alert("You have clicked the map " + this.counter +
            this.counter == 1 ?" time.":" times.");
}

var application = new MyApplication();

The Info Window

The Map class has a single "info window," which displays HTML content in a floating window above the map.

The basic info window method is openInfoWindow, which takes a point and an HTML DOM element as an argument. The HTML DOM element is appended to the info window container, and the info window is displayed over the given point.

openInfoWindowHtml is similar, but it takes an HTML string as an argument rather than a DOM element. openInfoWindowXslt takes in an XML DOM element and the URL of an XSLT document to produce the info window contents, downloading the XSLT asynchronously if it has not already been downloaded by the user's browser.

To display an info window above an overlay like a marker, you can pass an optional third argument that gives a pixel offset between the lat/lng point passed in and the tip of the info window. So, if your marker was 10 pixels tall, you would pass the pixel offset GSize(0, -10).

The GMarker class exports openInfoWindow methods that handle the pixel offset issues for you based on the size and shape of the icon, so you will generally not have to worry about calculating icon offsets in your application.

Overlays

Overlays are objects on the map that are tied to lat/lng coordinates, so they move when you drag/zoom the map around and when you switch projections (e.g., switch from Map to Satellite mode).

The Maps API exports two types of overlays: markers, which are icons on the map, and polylines, which are lines made up of lat/lng coordinates.

Icons and Markers

The GMarker constructor takes an icon and a point as arguments and exports a small set of events like "click". See the overlay.html example above for a simple example of creating markers.

The most difficult part of creating a marker is specifying the icon, which is complex because of the number of different images that make up a single icon in the Maps API.

Every icon has (at least) a foreground image and a shadow image. The shadow should be created at a 45 degree angle from the foreground image, and the bottom left corner of the shadow image should align with the bottom-left corner of the icon foreground image. The shadow should be a 24-bit PNG images with alpha transparency so that the edges of the shadow look correct on top of the map.

The GIcon class requires you specify the size of these images when you initialize the icon so the Maps API can create image elements of the appropriate size. This is the minimum amount of code required to specify an icon (in this case, the icon used on Google Maps):

var icon = new GIcon();
icon.image = "http://www.google.com/mapfiles/marker.png";
icon.shadow = "http://www.google.com/mapfiles/shadow50.png";
icon.iconSize = new GSize(20, 34);
icon.shadowSize = new GSize(37, 34);

The GIcon class exports 7 more properties that you should set to get maximum browser compatibility and functionality from your icons. For example, the imageMap property specifies the shape of the non-transparent parts of the icon image. If you do not set this property in your icon, the entire icon image (including the transparent parts) will be clickable in Firefox/Mozilla. See the GIcon class reference for more information.

Polylines

The GPolyline constructor takes an array of lat/lng points as an argument. You can also specify the color, weight, and opacity. The color should be in the older HTML style, e.g., "#ff0000". GPolyline does not understand named colors. For example, this creates a 10 pixel, red polyline between two points:

var polyline = new GPolyline([new GPoint(-122.1419, 37.4419),
                              new GPoint(-122.1519, 37.4519)],
                              "#ff0000", 10);
map.addOverlay(polyline);

In Internet Explorer browser, we use VML to draw polylines. On all other browsers, we request an image of the line from Google servers and overlay that image on the map, refreshing the image as necessary as the map is zoomed and dragged around.

Controls

Controls are added with the addControl method. The Maps API comes with a handful of built-in controls you can use in your maps:

GLargeMapControl – a large pan/zoom control used on Google Maps
GSmallMapControl – a smaller pan/zoom control used on Google Local
GSmallZoomControl – a small zoom control (no panning controls) used in the small map blowup windows used to display driving directions steps on Google Maps
GMapTypeControl – lets you toggle between map types (e.g., Map and Satellite)

For example, to add the panning/zooming control you see on Google Maps to your map, you would include the following line in your map initialization:

map.addControl(new GLargeMapControl());

The control will be attached to top-left corner of the map just like it is on Google Maps.

XML and RPC

The Google Maps API exports a factory method for creating XmlHttpRequest objects that work in recent versions of IE, Firefox, and Safari. For example,

var request = GXmlHttp.create();
request.open('GET', "myfile.txt", true);
request.onreadystatechange = function() {
  if (request.readyState == 4) {
    alert(request.responseText);
  }
}
request.send(null);

You can parse an XML document with the static method GXml.parse, which takes a string of XML as its only argument. This method is compatible with all browsers, falling back on a JavaScript XML parser if no native XML parsing facilities are available on the browser. We make no guarantees as to the performance or correctness of this "fallback" parser.

Note that the Google Maps API does not require the use of XML or XmlHttpRequest to function, as it is a pure JavaScript/DHTML API.

Class Reference

`GMap`

An instance of GMap represents a single map on the page. See the discussion above for more information.

Constructor

Constructor	Description
`GMap(container, mapTypes?, width?, height?)`	Creates a new map inside of the given HTML container, which is typically a `div` element. We use the default set of map types (`[G_MAP_TYPE, G_SATELLITE_TYPE]`) unless a different set is specified. Likewise, we use the size of the container to determine the map width and height unless a width and height are explicitly specified.

Methods

Configuration

Method	Description
`enableDragging()`	Enables dynamic dragging (enabled by default)
`disableDragging()`	Disables dynamic dragging
`draggingEnabled()`	Returns true if dynamic dragging is enabled
`enableInfoWindow()`	Enables the popup info windows on this map (enabled by default)
`disableInfoWindow()`	Disables the popup info windows on this map
`infoWindowEnabled()`	Returns true if the popup info windows are enabled on this map

Controls

`addControl(control)`	Adds the given map control to this map
`removeControl(control)`	Removes the given map control from this map

State

Method	Description
`getCenterLatLng()`	Returns the center point of the map viewport in lat/lng coordinates
`getBoundsLatLng()`	Returns the lat/lng bounds of the map viewport
`getSpanLatLng()`	Returns the width and height of the map viewport in latitude/longitude ticks
`getZoomLevel()`	Returns the integer zoom level of the map
`centerAtLatLng(latLng)`	Centers the map at the given lat/lng `GPoint`
`recenterOrPanToLatLng(latLng)`	Centers the map at the given lat/lng `GPoint`, doing a fluid pan to the `GPoint` if it is within the current map viewport
`zoomTo(zoomLevel)`	Zooms to the given integer zoom level, ignoring the request if the given zoom level is outside the bounds of the current map type
`centerAndZoom(latLng, zoomLevel)`	Atomically centers and zooms the map. Useful to initialize the map with an initial center and zoom level, as in the examples above.
`getMapTypes()`	Returns an array of map types supported by this map (e.g., `G_MAP_TYPE` and `G_SATELLITE_TYPE`)
`getCurrentMapType()`	Returns the map type currently in use (e.g., `G_MAP_TYPE` or `G_SATELLITE_TYPE`)
`setMapType(mapType)`	Switches this map to the given map type (e.g., `G_MAP_TYPE` or `G_SATELLITE_TYPE`)

Overlays

Method	Description
`addOverlay(overlay)`	Adds the given overlay object (e.g., `GMarker` or `GPolyline`) to the map
`removeOverlay(overlay)`	Removes the given overlay object from the map
`clearOverlays()`	Removes all of the overlays from the map

Info Window

Method	Description
`openInfoWindow(latLng, htmlElem, pixelOffset?, onOpenFn?, onCloseFn?)`	Displays the info window with the given HTML content at the given lat/lng point. `htmlElem` should be an HTML DOM element. If `pixelOffset` (`GSize`) is given, we offset the info window by that number of pixels, which lets users place info windows above markers and other overlays. If `onOpenFn` is given, we call the function when the window is displayed, and we call `onCloseFn` when the window is closed.
`openInfoWindowHtml(marker, htmlStr, pixelOffset?, onOpenFn?, onCloseFn?)`	Like `openInfoWindow`, but takes an HTML string rather than an HTML DOM element
`openInfoWindowXslt(marker, xmlElem, xsltUri, pixelOffset?, onOpenFn?, onCloseFn?)`	Like `openInfoWindow`, but takes an XML element and the URI of an XSLT document to produce the content of the info window. The first time a URI is given, it is downloaded with `GXmlHttp` and subsequently cached.
`showMapBlowup(point, zoomLevel?, mapType?, pixelOffset?, onOpenFn?, onCloseFn?))`	Shows a blowup of the map at the given lat/lng `GPoint`. We use a default zoom level of 1 and the current map type if the `zoomLevel` and `mapType` parameters are not given.
`closeInfoWindow()`	Closes the info window if it is open

Events

Event	Arguments	Description
`click`	`overlay, point`	Triggered when the user clicks on the map or on an overlay on the map. If the click was on an overlay, the overlay is passed as an argument to the event handler. Otheriwse, we pass in the lat/lng point that was clicked on the map.
`move`	none	Triggered when the map is moving. This event is triggered continuously as the map is dragged.
`movestart`	none	Triggered at the beginning of a continuous pan/drag movement. This event is not triggered when the map moves discretely.
`moveend`	none	Triggered at the end of a discrete or continuous map movement. This event is triggered once at the end of a continuous pan.
`zoom`	`oldZoomLevel`, `newZoomLevel`	Triggered after the map zoom level changes
`maptypechanged`	none	Triggered after the map type (e.g., Map or Satellite) changes
`infowindowopen`	none	Triggered after the info window is displayed
`infowindowclose`	none	Triggered after the info window is closed
`addoverlay`	`overlay`	Triggered after an overlay is added to the map
`removeoverlay`	`overlay`	Triggered after an overlay is removed from the map. Not triggered if `clearOverlays` is called -- see the `clearoverlays` event below.
`clearoverlays`	none	Triggered after all overlays are cleared from the map

`GMarker`

GMarker is a type of map overlay that shows an icon at a single point on the map. The constructor takes an instance of GIcon, which can be shared among many markers, and the point at which it should be displayed. GMarker also includes some convenience methods to open info windows over the marker, which is common for Google Maps hacks.

Constructor

Constructor	Description
`GMarker(point, icon?)`	Creates a marker with the given icon at the given point. If no icon is given, we use the default Google Maps icon.

Methods

Method	Description
`openInfoWindow(htmlElem)`	Opens an info window with the given HTML content over this marker. `htmlElem` should be an HTML DOM element.
`openInfoWindowHtml(htmlStr)`	Like `openInfoWindow`, but takes an HTML string rather than an HTML DOM element
`openInfoWindowXslt(xmlElem, xsltUri)`	Like `openInfoWindow`, but takes an XML element and the URI of an XSLT document to produce the content of the info window. The first time a URI is given, it is downloaded with `GXmlHttp` and subsequently cached.
`showMapBlowup(zoomLevel?, mapType?)`	Shows a blowup of the map over this marker. We use a default zoom level of 1 and the current map type if the `zoomLevel` and `mapType` parameters are not given.

Events

Event	Arguments	Description
`click`	none	Triggered when the user clicks on this marker
`infowindowopen`	none	Triggered when the info window is opened above this marker with one of the methods above
`infowindowclose`	none	Triggered when the info window above this marker is closed

`GPolyline`

A polyline represents a vector polyline overlay on the map. A polyline is drawn with the vector drawing facilities of the browser if they are available or an image overlay from Google servers otherwise.

Constructor

Constructor	Description
`GPolyline(points, color?, weight?, opacity?)`	Constructs a polyline from the given array of lat/lng points. `color` should be a hex HTML color (e.g., "#0000ff"), `weight` is an integer representing the width of the line in pixels, and `opacity` should be a float between 0 and 1.

`GIcon`

An icon specifies the images used to display a marker on the map. For browser compatibility reasons, specifying an icon is actually quite complex. See the discussion above for more information.

At a minimum, you must specify the image, shadowImage, iconSize, shadowSize, and iconAnchor properties of an icon before it can be displayed on the map. If you use info windows, you must also specify the infoWindowAnchor property of the icon.

Constructor

Constructor	Description
`GIcon(copy?)`	Creates a new icon, copying the properties of the given icon if given.

Properties

Property	Description
`image`	The foreground image URL of the icon
`shadow`	The shadow image URL of the icon
`iconSize`	The pixel size of the foreground image of the icon
`shadowSize`	The pixel size of the shadow image
`iconAnchor`	The pixel coordinate relative to the top left corner of the icon image at which we should anchor this icon to the map
`infoWindowAnchor`	The pixel coordinate relative to the top left corner of the icon image at which we should anchor the info window to this icon
`printImage`	The URL of the foreground icon image we should use for printed maps. It should be the same size as the main icon image.
`mozPrintImage`	The URL of the foreground icon image we should use for printed maps in Firefox/Mozilla. It should be the same size as the main icon image.
`printShadow`	The URL of the shadow image we should use for printed maps. It should be a GIF image since most browsers cannot print PNG images.
`transparent`	The URL of a virtually transparent version of the foreground icon image used to capture IE click events. This image should be a 24-bit PNG version of the main icon image with 1% opacity, but the same shape and size as the main icon.
`imageMap`	An array of integers representing the x/y coordinates of the image map we should use to specify the clickable part of the icon image in non-IE browsers.

`GEvent`

All event registration and triggering is handled by the GEvent class. All methods in the GEvent class are static methods, e.g., you should call the methods like GEvent.bind(...) rather than (new Event()).bind(...).

Static Methods

Method	Description
`addListener(source, eventName, listenerFn)`	Calls the given `listenerFn` function when the given event is triggered on the given source instance. We return an opaque listener token that can be used with `removeListener`.
`removeListener(listener)`	Removes the given listener, which should be a listener returned by `addListener`
`clearListeners(source, eventName)`	Removes all listeners for the given event on the given source
`trigger(source, eventName, args...)`	Triggers the given event on the given source with the given list of arguments
`bind(source, eventName, object, method)`	Binds the given method of the given object to the given source event. When the given event is triggered, the given method is called with `object` as the `this`, e.g., `GEvent.bind(map, "move", this, this.onMapMove)`

`GXmlHttp`

The GXmlHttp class exports a factory method to create cross-browser XmlHttpRequest instances.

Static Methods

Method	Description
`create()`	Factory method to construct a new `XmlHttpRequest` instance

`GXml`

The GXml class provides a static method to parse a string of XML. The parser should work on any browser, though it falls back on a JavaScript XML parser by default if there is no native parser in the web browser. This can be quite slow depending on the browser's JavaScript implementation.

Static Methods

Method	Description
`parse(xmlStr)`	Parses the given string of XML, returning the XML DOM
`value(xmlNode)`	Returns the textual content in the given XML element or node. Useful to pull out the text nodes inside of an XML element.

`GXslt`

The GXslt class provides factory methods to apply XSLT to XML in a brower-independent way. The class should work on any browser, though it falls back on a JavaScript XSLT implementation by default if there is no native XSLT processor in the web browser. This can be quite slow depending on the browser's JavaScript implementation.

Static Methods

Method	Description
`create(xsltXmlDoc)`	Returns an `GXslt` instance from the given XML DOM, which should be an XSLT document

Methods

Method	Description
`transformToHtml(xmlDoc, htmlContainer)`	Transforms the given XML document using this XSLT, placing the resulting HTML in the given HTML DOM element container

`GPoint`

A GPoint represents a single, 2-dimensional coordinate. If a GPoint represents a lat/lng, x is the longitude, and y is the latitude in decimal notation.

Constructor

Constructor	Description
`GPoint(x, y)`	Creates a new point with the given coordinate values

Properties

Property	Description
`x`	The x (or horizontal) coordinate of the point
`y`	The y (or vertical) coordinate of the point

`GSize`

GSize represents a 2-dimensional size measurement. If a GSize represents a lat/lng span, width is to the number longitude degrees, and y is the number of latitude degrees.

Constructor

Constructor	Description
`GSize(width, height)`	Creates a new size with the given measurement values

Properties

Property	Description
`width`	The width measurement
`height`	The height measurement

`GBounds`

GBounds represents a 2-dimensional bounding box. If the GBounds is in the lat/lng coordinate system, the X coordinates represent longitude, and the Y coordinates represent latitude. If the lat/lng bounds crosses the international date line, the "minimum" coordinates refer to the top left coordinates rather than the mathematical minmum of the two coordinates.

Constructor

Constructor	Description
`GBounds(minX, minY, maxX, maxY)`	Creates a new bounds with the given coordinates

Properties

Property	Description
`minX`	The X coordinate of the top left corner of the bounds
`minY`	The Y coordinate of the top left corner of the bounds
`maxX`	The X coordinate of the bottom right corner of the bounds
`maxY`	The Y coordinate of the bottom right corner of the bounds

posted on 2005-07-01 17:46 马维峰阅读(7481) 评论(4) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

XHTML and VML

API Updates

Geocoding, Routing, etc.

Using XML and Asynchronous RPC ("AJAX") with Maps

API Overview

XML and RPC

导航

公告