September 30, 2014
Hot Topics:
RSS RSS feed Download our iPhone app

Integrating Google Maps into Your Web Applications

  • August 18, 2005
  • By Jason Gilmore
  • Send Email »
  • More Articles »

Controlling Mapping Behavior

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:

Google Map with Control

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:

The Ohio State University's Department of Computer Science and Engineering

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:

A Student's Class Map

Adding the pan/zoom control back to the map and zooming in produces a much more detailed representation:

Zooming in on the student's class locations





Page 2 of 3



Comment and Contribute

 


(Maximum characters: 1200). You have characters left.

 

 


Sitemap | Contact Us

Rocket Fuel