Google Maps API

You use Google Maps API to display a map. For example, the code in Listing 15.1 shows a map of Palo Alto.

Listing 15.1. A Map of 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>
<script src="http://maps.google.com/maps?file=api&v=1&key=
ABQIAAAAIgThCNv3JZ4GZTXeVZlXLxTwM0brOpm-
All5BF6PoaKBxRWWERT1zOfmjyhFP8UxLMMX1EFUICYGmg"
        type="text/javascript"></script>
</head>
<body>
<div id="map" style="width: 500px; height: 400px"></div>

<script type="text/javascript">
    //<![CDATA[
    var map = new GMap(document.getElementById("map"));
    map.addControl(new GSmallMapControl());
    map.centerAndZoom(new GPoint(-122.1419, 37.4419), 4);

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

Examine the first script tag. The src attribute points to http://maps.google.com/maps. The URL is followed by three query parameters, file, v, and key. The v query parameter specifies the version of the API. The application uses version 1. However, version 2 is also available. When a new version is released, Google posts a notice on Google Code (http://code.google.com/) and the Maps API discussion group (http://groups.google.com/group/Google-Maps-API). Google does not promise backward compatibility.

The key query specifies the user key. You should replace this key with your own. To run the example, invoke it using this URL:

http://localhost:8080/lps-4.0.x/gmaps/gmapsTest1.html

Figure 15.1 shows the map.

Figure 15.1. The Google map of Palo Alto

[View full size image]

Before we delve into more details, let’s study the main classes in the Google Maps API.

GMap

A GMap object represents a map on the page. To create a GMap object, you use the GMap class’s constructor, whose signature is as follows:

GMap(container, mapTypes?, width?, height?)

A question mark after an argument indicates that the argument is optional.

The container argument specifies a container in which the map will nest. It is typically a div tag. The mapTypes argument specifies the map types. The default set of map types is ([G_MAP_TYPE, G_HYBRID_TYPE, or G_SATELLITE_TYPE]). The width and height arguments specify the width and height of the map, respectively. If no width or height is present, the container’s width or height will be used.

For example, the following line of code constructs a GMap object within a div element named map and assigns the instance to the map variable.

var map = new GMap(document.getElementById("map"));

There are various methods defined in the GMap class. These methods are displayed here by category.

The following are methods related to configuration.

enableDragging()

Enables dynamic dragging. Dragging is enabled by default but can be disabled by calling the disableDragging method.

disableDragging()

Disables dynamic dragging.

draggingEnabled()

Indicates whether or not dynamic dragging is enabled.

enableInfoWindow()

Enables the info window on this map. The info window is enabled by default but can be disabled by calling the disableInfoWindow method.

disableInfoWindow()

Disables the info window on this map.

infoWindowEnabled()

Indicates whether or not the info window is enabled on this map.

These are methods related to controls:

addControl(control)

Adds the specified map control to this map.

removeControl(control)

Removes the specified control from this map.

These are methods related to state:

getCenterLatLng()

Returns the latitude/longitude coordinate of the center point of the map viewport.

getBoundsLatLng()

Returns the latitude/longitude bounds of the map viewport.

getSpanLatLng()

Returns the width and height of the map viewport in latitude/longitude ticks.

getZoomLevel()

Returns an integer specifying the map zoom level.

centerAtLatLng(point)

Centers the map at the specified point.

recenterOrPanToLatLng(point)

Center the map at the specified point, performing a fluid pan to the point if it is within the current map viewport.

zoomTo(zoomLevel)

Zooms to the specified zoom level.

centerAndZoom(point, zoomLevel)

Atomically centers the map to the specified point and zooms the map to the specified zoom level.

getMapTypes()

Returns an array of map types supported by this map (currently it is G_MAP_TYPE, G_HYBRID_TYPE, and G_SATELLITE_TYPE).

getCurrentMapType()

Returns the map type in use.

setMapType(mapType)

Assigns the specified map type of this map.

The following are methods related to overlays:

addOverlay(overlay)

Adds the specified overlay object (either an instance of GMarker or GPolyline) to this map.

removeOverlay(overlay)

Removes the specified overlay from this map.

clearOverlays()

Removes all overlays from this map.

These are methods related to the info window:

openInfoWindow(point, htmlElement, pixelOffset?, onOpenFn?,
        onCloseFn?)

Displays the info window with the given HTML content at the specified latitude/longitude point. The htmlElement argument should be an HTML DOM element. If the pixelOffset argument is present, the info window will be offset by the given number of pixels. If the onOpenFn argument specifies a JavaScript function that will be invoked when the window is displayed. The onCloseFn argument specifies a JavaScript function that will be called when the window is closed.

openInfoWindowHtml(marker, htmlStr, pixelOffset?, onOpenFn?,
        onCloseFn?)

This method is similar to openInfoWindow, but takes an HTML string instead of an HTML DOM element.

openInfoWindowXslt(marker, xmlElement, xsltUri, pixelOffset?,
        onOpenFn?, onCloseFn?)

This method is similar to openInfoWindow, but takes an XML element and the URI of an XSLT document to produce the content of the info window.

showMapBlowup(point, zoomLevel?, mapType?, pixelOffset?, onOpenFn?,
        onCloseFn?)

Shows a blowup of this map at the specified GPoint. If the zoomLevel and mapType arguments are not present, the map will default to a zoom level of 1 and the current map type.

closeInfoWindow()

Closes the info window if it is open.

GMarker

A GMarker object 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 indicates the point at which it should be displayed. You create a GMarker point by using its constructor:

GMarker(point, icon?)

The following are the methods defined in the GMarker class.

openInfoWindow(htmlElement)

Opens an info window with the specified HTML element over this marker. The htmlElement argument should specify an HTML DOM element.

openInfoWindowHtml(htmlString)

This method is similar to openInfoWindow, but takes an HTML string instead of an HTML DOM element.

openInfoWindowXslt(xmlElement, xsltUri)

This method is similar to openInfoWindow, except that it takes an XML element and the URI of an XSLT document to produce the content of the info window.

showMapBlowup(zoomLevel?, mapType?)

Shows a blowup of the map over this marker. If the arguments are not present, a default zoom level of 1 and the current map type will be used.

GPolyline

A GPolyline object represents a vector polyline overlay on the map. You construct a GPolyline object by using this constructor:

GPolyline(points, color?, weight?, opacity?)

The points argument should be assigned an array of latitude/longitude points. The color argument specifies a hexadecimal HTML color (such as #ff0000 for red), the weight argument specifies the thickness of the line in pixels, and the opacity argument specifies the opacity with a value between 0.0 and 1.0.

GIcon

A GIcon object represents an icon used to display a marker on the map. You use this constructor to create a GIcon object:

GIcon(anotherIcon?)

The anotherIcon argument must be an instance of GIcon. If this argument is present, the properties of anotherIcon are copied to the new instance.

The GIcon class has the following attributes:

image

The foreground image URL of the icon.

shadow

The shadow image URL of the icon.

iconSize

The size of the foreground image of the icon in pixels.

shadowSize

The size of the shadow image in pixels.

iconAnchor

The pixel coordinate relative to the top left corner of the icon image at which this icon should be anchored to the map.

infoWindowAnchor

The pixel coordinate relative to the top left corner of the icon image at which the info window should be anchored to this image.

printImage

The URL of the foreground icon image that should be used for printed maps.

mozPrintImage

The URL of th eforeground icon image that should be used for printed maps in Firefox/Mozilla.

printShadow

The URL of the shadow image that should be used for printed maps. A GIF image should be used as most browser 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 have the same shape and size as the main icon.

imageMap

An array of integers representing the (x, y) coordinate of the image map that should be used to specify the clickable part of the icon image in non-IE browsers.

GEvent

The GEvent class handles all event registration and triggering. It has these methods, all of which are static.

addListener(source, eventName, listenerFn)

Invokes the specified listenerFn function when the given event is raised on the specified source object.

removeListener(listener)

Removes the specified listener.

clearListeners(source, eventName)

Removes all listeners that have previously been registered to listen on the specified event on the source.

trigger(source, eventName, args...)

Raises the specified event on the source with the given list of arguments.

bind(source, eventName, object, method)

Binds the specified method of the specified object to the specified source event.

GXmlHttp

The GXmlHttp class provides a static no-argument method for creating cross-browser XmlHttpRequest. This method is appropriately called create.

GPoint

A GPoint object represents a point. The constructor is as follows.

GPoint(x, y)

where (x, y) is a 2-dimensional coordinate or a pair of longitude/latitude.

The GPoint class has two properties:

x

The x coordinate or the longitude of the point

y

The y coordinate or the latitude of the point

GSize

An instance of GSize represents a two-dimensional size. Here is its constructor:

GSize(width, height)

If a GSize represents a latitude/longitude span, width represents the number of longitude degrees and height represents the number of latitude degrees.

The GSize class has two properties:

width

The width of the GSize.

height

The height of the GSize.

GBounds

A GBounds object represents a two-dimensional bounding box. Here is the GBounds class’s constructor:

GBounds(minX, minY, maxX, maxY)

The attributes of the GBounds class are as follows:

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.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset