Integrating Google Maps into Your Web Applications
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?
- 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.
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:
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.
Executing this script from a Web server produces the following map of my alma mater, The Ohio State University:
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:
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.