Sci-fi author Duncan Munro's 1950 short story "U-Turn" includes a well-known passage that reads, "May you live in interesting times." I haven't actually read the story, therefore can't say whether it was meant as a blessing or a curse. Regardless, it seems particularly applicable to those of us steeped in Web development, as the last ten years have truly proved to be a whirlwind of excitement. And as the Web platform continues to mature, we're seeing an increasing number of amazing technologies that will take our applications to new levels of power and usability. The most recent development to catch the eye of developers worldwide is the so-called Ajax model, shorthand for Asynchronous JavaScript + XML. This notion seems to have revitalized the Web development community's goal of creating applications that are as rich and responsive as any desktop-based application, but with the added advantage of accessibility via the ubiquitous web browser.
Perhaps the most famous applications embracing the Ajax model is Google Maps. Surely you've played around with this website, perhaps entering your or other addresses of interest, and marveled as how the site responded to zooming and dragging around on the map in seeming real-time. Wouldn't it be great to incorporate Google's mapping capabilities into your applications, taking advantage of not only its enormous database, but also the eminently cool interface that comes with it?
You might be surprised to know Google offers a free Application Programming Interface (API) that makes doing so pretty trivial. Provided you abide by the Terms of Use, and don't surpass 50,000 page views per day without obtaining prior permission, you're free to use this API to embed Google's mapping technology into your website. In this article you'll learn how to do exactly this. Specifically, you'll learn how to integrate maps into web pages, extend the mapping feature to mark locations of interest to your site users, and even display location-specific descriptors simply by clicking on the corresponding icon. But first, for inspiration take a moment to peruse some of the amazing implementations already popping up across the Web:
- Chicago Crime: A spatially-enabled database of reported Chicago crime.
- HousingMaps: HousingMaps.com takes advantage of Craiglist and Google Maps to visually depict houses and apartments for sale and rent across the United States.
- Recent Earthquakes: Charts earthquakes taking place across the globe over the past seven days.
- Google Maps Mania: An interesting blog covering Google mapping news and projects.
Prerequisites
No special development tools are required in order to take advantage of Google's mapping API; all that is necessary is a text editor, Web browser, and a public Web server from which the scripts can be served. Note the server must be public, you can't develop on an internal server, as each request must communicate with the Google mapping server in order to work correctly. You will however need an API key provided by Google so that usage quotas can be monitored. Begin by reading through some of the usage rules and applying for the key here:
http://www.google.com/apis/maps/signup.html
You'll need to confirm registration by clicking on link provided by you via email, at which time the API key will be provided to you. Paste this key into a text file, as you'll need to integrate it into the scripts used to create the maps.
Your First Map
Incorporating a Google map into your website is surprisingly easy, accomplished with just a few lines of code. Begin by copying and pasting the following snippet into an HTML file, remembering to replace ADD_YOUR_KEY_HERE with your own API key. Then save and upload the file to a Web server.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://maps.google.com/maps?file=api&v=1
&key=ADD_YOUR_KEY_HERE" type="text/javascript">
</script>
</head>
<body>
<div id="map" style="width: 400px; height: 300px"></div>
<script type="text/javascript">
//<![CDATA[
var map = new GMap(document.getElementById("map"));
map.centerAndZoom(new GPoint(-83.022206, 39.998264), 3);
//]]>
</script>
</body>
</html>
Executing this script from a Web server produces the following map of my alma mater, The Ohio State University:
There are four key components to this script. The following snippet makes the Google map JavaScript script available for use in your script. Note you'll need to supply the API key discussed in earlier in the article. <script src="http://maps.google.com/maps?file=api&v=1
&key=ADD_YOUR_KEY_HERE" type="text/javascript">
The next snippet specifies the placeholder for the map, and specifies its dimensions. Note you're able to place this line anywhere on the page, positioning it using tables or CSS as desired:
<div id="map" style="width: 400px; height: 300px"></div>
<script type="text/javascript">
The next snippet creates a GMap object (instantiated from a class found in Google's JavaScript script), readying it for manipulation and display other methods found in the script:
var map = new GMap(document.getElementById("map"));
Finally, the map is centered and displayed on a location declared by latitude -83.022206 and longitude 39.998264. The second parameter of the GPoint constructor determines the height, with 1 offering the lowest (most detailed) height and 16 offering the highest (least detailed).
map.centerAndZoom(new GPoint(-83.022206, 39.998264), 3);
You might be curious to know how I determined the university's latitude and longitude coordinates. At present, Google doesn't offer a means for converting mailing addresses to zip codes, therefore you'll have to depend on some other service for doing so. Thankfully there are several such services out there, perhaps the most compelling of which is geocoder.us. If you're interested in looking up the coordinates for an occasional address, you can do so via the geocoder.us website in seconds. If you're building a commercial application requiring repeated lookups and would like to leave this process to another party, geocoder.us offers a Web Service at a very competitive price. Or if you'd like to take matters into your own hands and manage the conversion process yourself, geocoder.us actually points you in the right direction by offering information about the Perl module Geo::Coder::US and the freely available U.S. Census Bureau TIGER/Line data.
IE 7
Firefox 2.0
