Wrox Home  
Search
Professional Ajax
by Nicholas C. Zakas, Jeremy McPeak, Joe Fawcett
March 2007, Paperback
US $39.99 Add To Cart


Controls

You may have noticed that the previous map had no way for the user to control what was being displayed. The regular Google Maps interface has a number of different ways the user can manipulate the map, and these are available to you as well as controls.

Controls are used to allow the user to zoom or otherwise manipulate the display of the map. There are four built-in controls that can be used:

  • GLargeMapControl - the typical pan/zoom control displayed on http://maps.google.com.
  • GSmallMapControl - a smaller version of the previous control, with only plus/minus and directional controls (but no zoom slider).
  • GSmallZoomControl - the zoom slider control without any directional controls.
  • GMapTypeControl - the Map/Satellite/Hybrid control.

One or more of these controls can be added to the map via the addControl() method. Each of the controls can simply be created without any parameters and passed in like this:

oMap.addControl(new GSmallMapControl());

Though you'll most often do this just after creating a GMap object, you can add controls at any point. Additionally, you remove controls using the removeControl() method if you have a reference to the control:

var oControl = new GSmallMapControl();
oMap.addControl(oControl);//do some other stuff
oMap.removeControl(oControl);

The first three controls, GLargeMapControl, GSmallMapControl, and GSmallZoomControl should not be used together since they all occupy the same location on the map (upper left corner). The GMapTypeControl can safely be used with any of the others, since it occupies the upper right corner.

If you want your map to have controls right from the onset, you should add them immediately after creating the GMap() object but before you call centerAndZoom(), such as:

var oMap = new GMap(document.getElementById("divMap"));
oMap.addControl(new GSmallMapControl());
oMap.addControl(new GMapTypeControl());
oMap.centerAndZoom(new GPoint(-92, 32), 14);

Adding these controls yields a map that looks like this:

Figure 2
Figure 2

Markers

To mark a particular spot on the map, you'll need to create a marker. A marker is just one of the types of overlays that are available in the Google Maps API. Overlays can be simply defined as anything that gets placed on the map at a particular coordinate. To create a new marker, you need to instantiate a GMarker object and pass in a GPoint indicating where to place it. Then, the marker must be added to the map using the addOverlay() method, such as:

oMap.addOverlay(new GMarker(new GPoint(-92, 32)));

This code adds a marker right at the center of the map defined earlier:

Figure 3
Figure 3

Note that all overlays must be added after the initial call to centerAndZoom(). It is during this method call that the data for the map is initially loaded, and it is that data that determines where an overlay is placed. Calling addOverlay() beforehand causes a JavaScript error.

You can also make it so that a marker pops up an information balloon when clicked on by assigning an event handler for the click event and calling the openInfoWindowHtml() method, which allows you to pass in an HTML string to be displayed in the balloon. For example:

var oMarker = new GMarker(new GPoint(-92, 32));
GEvent.addListener(marker, "click", function () {
    oMarker.openInfoWindowHtml("Center of the U.S.");
});
oMap.addOverlay(oMarker);

This code uses the GEvent library's addListener() method to add an event handler for the click event. In the event handler, the openInfoWindowHtml() method is called, passing in a string. When this marker is clicked, the information balloon will appear and display the given string, as in this image:

Figure 4
Figure 4

There are many other types of overlays and different ways to use information balloons, but this is the fastest way to get you started.

Geocoding

There is no built-in way to do geocoding using the Google Maps API, so if you need the latitude and longitude of a particular building or other location, you'll need to look elsewhere. Fortunately, there are a whole series of free geocoders available from which you can get the necessary information. Try out Geocoder.us, which has a very simple interface and fast results.

Further Uses

This article has just scratched the surface of everything that is possible with the Google Maps API. It is recommended that you read over the API documentation yourself. The documentation contains many examples and numerous tips and tricks on how to get the most of the Google Maps API.

Nicholas C. Zakas is the lead author of Professional Ajax by (Wrox, 2006, ISBN: 0-471-77778-1) and the author of Professional JavaScript for Web Developers (Wrox, 2005, ISBN: 0-7645-7908-8). He has worked in web development for more than five years. He has helped develop web solutions in use at some of the largest companies in the world. Nicholas is also an active blogger on JavaScript and Ajax topics at http://www.nczonline.net/ and his most recent other articles at Wrox.com are XMLHttp Requests for Ajax, Ajax and the Yahoo! Connection Manager, and Ajax Submission Throttling.