Hack 27. Add Google Maps to Any Web Site

Greasemap adds informative Google Maps to almost any page on the Web.

There are lots of sites on the Web that don't have maps but could really use them. Any web page with an address or a set of latitude and longitude coordinates is a candidate for a potentially useful map. Let's say, for example, that you want to visit O'Reilly's global headquarters to purchase the next hot Animal book straight from the bookstore in the reception lobby. You could go to http://www.oreilly.com/oreilly/contact.html and get the address, but what good does that do you? At the very least, you'll have to copy the address to your clipboard, and then go to http://maps.google.com/ in another browser window, paste the address in there, and so on. Isn't there some way your web browser could just do this for you?

3.12.1. Greasemap to the Rescue

As it happens, there is a wayif you're running Mozilla Firefox. Firefox supports an extension called Greasemonkey, which allows custom JavaScript-based user scripts to, well, monkey with the contents of any page you view in your browser. As you can imagine, there is a wealth of possibilities inherent in the Greasemonkey concept.

Vinq.com's Greasemap is one such user script for Greasemonkey. Greasemap augments any web page you visit, by searching the page for street addresses and clearly marked geographic coordinates. If it finds any, Greasemap provides a clickable message bar across the top of the page, notifying you that a map is available. Clicking on the message bar adds an IFrame to the top of the page, in which a Google Map is loaded, displaying all the locations found on that page.

The maps from Google remain interactive; you can zoom in, pan around, and so on. The map will be one wide map if there are multiple locations found, or two smaller mapsan overview map and a zoomed in mapif there is just one location found on the page.

3.12.2. Installing Greasemap

Installing Greasemap takes a few short steps and should be almost painless.

1. Download and install Greasemonkey (http://greasemonkey.mozdev.org/). When you first try to install Greasemonkey, you may see a thin bar at the top of Firefox that says "Firefox prevented an extension from loading." Click the button at the right side of that bar, then "Allow extensions from that site." Once you've done this, try installing Greasemonkey again; it should work the second time around.
2. Restart Firefox. This allows Firefox to load the newly installed extension.
3. Visit.the Greasemap homepage at http://www.vinq.com/greasemap/. About halfway down the page, you'll see a link to install the Greasemap script. Right-click this link, and then choose the Install User Script option to install the Greasemap script in your browser.

To uninstall Greasemap, go to the Tools images/U2192.jpg border=0> Manage User Scripts menu in Firefox, select Greasemap, and click the Uninstall button. You can also use this panel to temporarily disable it.

You can also temporarily disable Greasemap by disabling Greasemonkey itself, by clicking the Greasemonkey icon in the lower-right corner of your browser. The icon should turn gray, indicating that Greasemonkey is deactivated. Clicking the icon again reactivates Greasemonkey.

To upgrade Greasemap, first uninstall it, then follow Step 3 above to install the latest version. Unfortunately, there's no way to avoid uninstalling firstthis is a limitation of Greasemonkey.

3.12.3. Taking Greasemap Out for a Spin

Once you've got Greasemap installed, getting a map for any location shown on a web page becomes a snap. Figure 3-21 shows the Greasemap version of O'Reilly Media's contact page, with the message bar at the top of the page.

Figure 3-21. O'Reilly Media's contact page, with the Greasemap message bar

Clicking on the message bar loads a Google Map in an Iframe at the top of the page, with a marker placed on the map for each location found on the page, as shown in Figure 3-22. Clicking a marker on the map highlights the matching location on the right side of the frame, and clicking the "Big map in new window" link does just what it says: it opens a larger version of the same map in a new browser window. From this larger map, you can click on the markers to get an info window that allows you to search for directions to that place, as shown in Figure 3-23.

Figure 3-22. O'Reilly Media's contact page plus the Greasemap frame

Figure 3-23. Search for driving directions in a new browser window with a single click

Instead of a whole lot of frustrating cutting and pasting, and opening new browser windows, Greasemap turns the process of finding directions to a location shown on a web page to a mere three clicks of the mouse button.

Sometimes Greasemap reports more locations in the message bar than it actually shows on the map. The reason for this is that although Greasemap is fairly liberal about identifying locations on a web page, occasionally not all of them can be identified with actual geographic coordinates when it comes time to generate the map.

Addresses aren't the only thing that Greasemap can illustrate on a map. Several other types of location, such as geourl.org-style ICBM tags can be detected and mapped, as well. For example, Figure 3-24 shows the "location" of Rich Gibson's home page at http://www.testingrange.com/. Although there aren't any addresses directly visible on Rich's site, there is an HTML meta element embedded in the page that specifies a latitude and longitude, that Greasemap can identify and plot on a Google Map.

Figure 3-24. Rich's home page, automatically identified and mapped by Greasemap

 

3.12.4. How Greasemap Identifies Locations

Greasemap uses JavaScript regular expressions to identify locations in a web page. The following styles of location reference are currently supported:

 

1600 Amphitheatre Parkway, Mountain View, CA 94043

At the moment, only U.S. addresses are supported. The ZIP Code is optional.

 

This style of HTML meta element is used by sites that are indexed from geourl.org.

 

This is an alternate form of the same.

 

N 42 25.159 W 071 29.492

Degrees and decimal minutes are often used as geocache coordinates on geocaching.org.

 

geo:lat=…and geo:long=…

This W3C-derived style of geotagging is frequently used on sites such as del.icio.us and Flickr. See http://www.flickr.com/photos/tags/geotagged/ for examples.

Since the Google Maps API doesn't offer address lookups, Greasemap currently turns U.S. street addresses into latitude/longitude coordinates on the server side, using the Census Bureau's TIGER/Line data with the Geo:: Coder::US Perl module. Canadian and UK addresses should be coming soon.

If you're interested in having Greasemap identify other kinds of addresses or coordinates, have a look at the JavaScript source at http://www.vinq.com/greasemap/. If you wind up modifying the Greasemap source to include your favorite way to specify a location, please send us the code! We're always looking for new ways to improve the usefulness of this tool.

3.12.5. See Also

• Geo::Coder::US can be found on the Web at http://geocoder.us/. See "Find the Latitude and Longitude of a Street Address" [Hack #62] for more info on how to use the web service based on it.
• Mark Pilgrim's Dive Into Greasemonkey provides an excellent introduction to creating and improving Greasemonkey scripts. You can read the entire book online at http://www.diveintogreasemonkey.com/.

Mark Torrance