If you spent a few moments investigating the example map, you noticed that it was draggable by default. That is, holding down the mouse button and moving the cursor will cause the map to reposition accordingly. This feature can be disabled with the following line:
map.disableDragging();
Those of you familiar with Google's service might have wondered why the scaling and repositioning toolbar was unavailable. This feature is disabled by default, but it and all of its corresponding functionality can easily be added with the following command:
map.addControl(new GLargeMapControl());
Adding this to the script produces the following map:
There are other types of controls available. I'll enumerate all available controls here:
GMapTypeControl: Toggler for switching between the Google map and satellite views.
GLargeMapControl: Control such as that seen in the above screenshot.
GSmallMapControl: A smaller version of GlargeMapControl, eliminating the zooming scalebar but including the zoom controls.
GSmallZoomControl: This control only includes the zooming buttons, eliminating everything else found in the GLargeMapControl.
Adding Mapping Markers
By themselves, the maps are really useful. However, their utility can be taken to the next level by overlaying markers indicating a specific location or set of locations on the map. Sounds daunting right? Surprisingly, it's as easy as the tasks we've carried out thus far: just find the longitude and latitude of the location you'd like to mark, instantiate a new GPoint() object with these coordinates, create a GMarker object based on this point, and finally add that marker to the map. For example, the following point will add a market denoting the location of The Ohio State University's Department of Computer Science and Engineering:
var point = new GPoint(-83.015522, 40.002068);
var marker = new GMarker(point);
map.addOverlay(marker);
Note you'll need to add these lines after executing the centerAndZoom method, or a malformed map will appear. The outcome looks like this:
It's possible to add numerous markers simply by repeating these lines with different coordinates. For example, suppose a student wanted to visually depict the locations of his classes. The following example shows the locations of three Ohio State campus buildings, including Dreese Labs, Gerlach Hall, and University Hall:
// Fisher Hall
var point = new GPoint(-83.014734, 40.005403);
var marker = new GMarker(point);
map.addOverlay(marker);
// Dreese Labs
var point = new GPoint(-83.015522, 40.002068);
var marker = new GMarker(point);
map.addOverlay(marker);
// University Hall
var point = new GPoint(-83.013307, 40.000610);
var marker = new GMarker(point);
map.addOverlay(marker);
Adding these lines to the script produces the following map:
Adding the pan/zoom control back to the map and zooming in produces a much more detailed representation:
Add www.developer.com to your favorites Add www.developer.com to your browser search box IE 7 | Firefox 2.0 | Firefox 1.5.xReceive news via our XML/RSS feed
IE 7
Firefox 2.0
