Integrating Google Maps into Your Web Applications, Page 3

Adding Location Descriptors

The Ohio State University campus is one of the largest in the world, and it's common to find even seniors asking for directions. Therefore, to be sure the mapping icons will help any student more quickly find their way around. However what if the student is a freshman, and is unable even to match the location to a specific building? What we need is a way to denote both building location and other informational clues such as the building name and street address. This is accomplished using information windows, which can be displayed when the user clicks on the corresponding icon. A screenshot of such a window is shown below, with the corresponding commented code snippet used to create it following:

This code is admittedly a tad more difficult than what you've seen thus far, but certainly nothing too complex. Because I've created informational windows for each icon (although only one is shown in the above screenshot), I cut down some tedious redundant coding by creating a JavaScript function titled createInfoMarker() which accepts two parameters, a GMarker object and an HTML string containing the location address. Information regarding each of the three building locations follows, with the createInfoMarker() function invoked each time to create the marker and corresponding window:

// Create the marker and corresponding information window
function createInfoMarker(point, address) {
   var marker = new GMarker(point);
   GEvent.addListener(marker, "click",
      function() {
         marker.openInfoWindowHtml(address);
      }
   );
  return marker;
}
// Gerlach Hall
var point = new GPoint(-83.014734, 40.005403);
address = "Gerlach Hall<br />2108 Neil Avenue
    <br />Columbus, Ohio 43210";
var marker = createInfoMarker(point, address);
map.addOverlay(marker);
// Dreese Labs
var point = new GPoint(-83.015522, 40.002068);
address = "Dreese Labs<br />230 North Oval Mall
    <br />Columbus, Ohio 43210";
var marker = createInfoMarker(point, address);
map.addOverlay(marker);
// University Hall
var point = new GPoint(-83.013307, 40.000610);
address = "University Hall<br />230 North Oval Mall
    <br />Columbus, Ohio 43210";
var marker = createInfoMarker(point, address);
map.addOverlay(marker);

Conclusion

This introductory article provided but a taste of what the Google Maps API is capable of. I encourage you to take some time to carefully review the API documentation available on the Google website. Also, take some time to search the Web for enthusiast websites and blogs dedicated to this wonderful service.

About the Author

W. Jason Gilmore (http://www.wjgilmore.com/) is the open source editor for Apress. He's the author of the best-selling "Beginning PHP 5 and MySQL: Novice to Professional" (Apress, 2004. 758pp.). Along with Robert Treat, Jason is the co-author of the forthcoming "Beginning PHP 5 and PostgreSQL 8: From Novice to Professional", due out at the conclusion of 2005. Jason loves receiving e-mail; so don't hesitate to write him at wjATwjgilmore.com.