Develop with Google Maps

Google, in particular, has emerged as the leader of this pack with its recently released Google Maps product. It provides a slick, highly responsive visual interface built using AJAX technologies along with detailed street and aerial imagery data, and an open API allowing customization of the map output including the ability to add application-specific data to the map. To make it even better, Google currently provides access to this service for FREE! In this article we’ll examine some of the basic capabilities provided through the Google Maps product.

What is Google Maps?
Google Maps provides a highly responsive, intuitive mapping interface with embedded, detailed street and aerial imagery data. In addition, map controls can be embedded in the product to give users full control over map navigation and the display of street and imagery data. Users can also perform map panning through the use of the “arrow” keys on a keyboard, as well as by dragging the map via the mouse. All of these capabilities combine to provide a compelling product, but the primary driver behind its rapid acceptance as an Internet mapping viewer is its ability to customize the map to fit application-specific needs. For instance, a real estate agency might develop a Web-based application that allows end user searching for residential properties to display the results on a Google Maps application. To get a good idea of the diversity of
applications that are possible through Google Maps, spend some time at Mike Pegg’s Google Maps Blog.

Google Maps Fundamentals
At this time, the Google Maps API is a free beta service. However, Google reserves the right to put advertising on the map at any point in the future, so keep this in mind as you begin to develop Google Maps applications. Your applications may also need frequent code changes since this product is still in beta and subject to changes in the API.

Before you can get started developing Google Maps applications you will need to sign up for an API key. When you sign up for an API key, you must specify a Web site URL that will be used in your development. One problem frequently associated with Google Maps is that you must acquire a unique key for each directory that will serve Google Maps. Google Maps will generate a unique keycode for the directory that you specify. You must use this keycode in each script that accesses the Google Maps API.

Google also provides documentation for its product, including full documentation of the classes, methods and events available for the Google Maps objects as well as code examples to get you started. In addition, Google provides a blog and discussion group for additional information on using the API.

A Basic Google Map
When you sign up with Google Maps, an API key will be generated. Make sure you save this key as you will need it for all Google Maps applications that you develop for the particular URL directory that was specified. In addition to the API key, Google will also generate an example Web page centered on the Palo Alto area (in the vicinity of the Google headquarters). You can copy and paste the HTML and JavaScript generated into a plain text file, save it to the Web server directory you specified when you generated the key, and then display the map in your Web browser.

Beyond the Basics
The Google Maps API comes with a number of classes that allow you to create maps, add points of interest and polylines to a map, specify various map controls, display info windows, read XML files, and more. In the figure below you’ll see examples of some of the more commonly used objects in the Google Maps API.


The GMap class enables you to create map instances. You can create as many map instances as necessary for your application, although most commonly this will only be a single instance. Maps are typically embedded within an HTML container called a

tag. Once you’ve generated an instance of GMap you can use the various methods and properties available on this object to manipulate other aspects of the map such as the controls included, the display of points of interest or polygons, and many other things. Everything in Google Maps flows through an instance of the GMap class.

GMap can also respond to a whole host of events. Events are simply an external stimulus to the map triggered by the user. Typical events might include the user dragging the map or clicking the map, an overlay marker being added to the map, or the map type changing from regular to aerial. You can write code that responds to any of these and other events. For instance, you might want to add a marker at the point where the user clicks the map, or perhaps you could display the latitude, longitude coordinates of the center of the map after a pan event has occurred.

Map Controls
Google Map Controls allow the end user to zoom in or out, pan and change the map type between Map, Aerial and Hybrid. Each of these controls can be programmatically added to your map through the addControl method on GMap. For instance, the following code example would be used to add the small map control to a map as you see in the figure below.

In addition, you can add an instance of the map type control to your map through the following code example:

map.addControl(new GMapTypeControl());

The map type control can be programmatically added to your map alongside a navigation control. For instance, the following code example could be used to generate a map like this. In this example we’ve added an instance of LargeMapControl and MapTypeControl to the map.

map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());

Opening Info Windows
Info Windows can be used to display information about a particular point of interest and are typically opened just above a marker, but could potentially be placed anywhere on a map. Info Windows are opened via the openInfoWindow() method on an instance of GMap. Normally, Info Windows are used to hold HTML information such as text, links and images.

Map Overlays
A map overlay refers to a point or polyline that is added on top of the Google Map. Points (GPoint) are the most common type of overlay and are referred to as markers (GMarker). Polylines (GPolyline), composed of two or more points joined together by a vector line, can also be added to a map.

GPoint (-96.4523, 30.5356)
GMarker
GPoint and GMarker are used in conjunction to create point markers that can be plotted on a Google Map. An instance of GPoint represents a single, two-dimensional coordinate, whereas GMarker is a type of map overlay that shows an icon at an instance of GPoint.
GPolyline

GPolyline uses two or more instances of GPoint to create a vector line between the two points. The vector lines generated by GPolyline can be created in various colors, weights, and transparency.

Google Maps Polygons?
At this time, Google Maps does not provide the ability to generate true polygons, but I suspect that this will change in the near future as the API becomes more robust. However, a third-party developer, XMaps, provides this functionality in its XMaps Library, which is a Google Maps API Extension. This library is in pre-release and can be downloaded from their site.

Reading XML Files
Google Maps also includes the ability to download, open and read XML files through the inclusion of the GXmlHttp class that creates a cross-browser XmlHttpRequest instance. The importance of this ability frequently comes into play when it becomes necessary to read in multiple points of interest. You could store your points of interest along with the coordinates that locate those points in an XML file or auto-generate an XML file from the database where your points of interest are stored.