BJAX - Hacking Google Maps with Bookmarklets

Dietrich Kappe, Thursday, February 22, 2007 @ 7:00 am

How many of us have passively watched a film or read a book or used a web site and said to ourselves, "That could have been better. If only they had changed this aspect or that, it would have been so much better." Then we leave the theatre, close the book or navigate away from the web site and go on about our vaguely dissatisfied lives.

While many of us won't be able to edit films or adapt books anytime soon (sure, sure, some people are mashing up films, and fan fiction has been around for a while, but it's actually kind of hard and time consuming to do), but people have been hacking web sites with tools like Greasemonkey for a while now, but it's starting to get easier to achieve powerful results with the adoption of Ajax.

One of the neat things about Ajax apps that use a well defined API is that it is pretty easy to modify their behavior using BJAX -- Browser Extensions and Ajax. Google maps is an excellent example of this sort of API; if you can predictably get ahold of a reference to a Google maps object, you can manipulate it in a myriad of ways.

One of the things I hate about many mapping sites -- those that display information on real estate, restaurants and coffee shops -- is that they don't display important navigation information, such as the locations of subway stops. Trulia is a representative example of such a site. It's a handy way to search for realestate that is for sale, by Zipcode and various other parameters. One of the things I found myself wishing for over and over again was a visual display of El stops.

The elevated lines in the map above are barely visible as little gray hash lines, and forget about seeing the stations. But adding lines and markers to this map is pretty simple if you know the Google Maps API.

Drag the following link, CTAMap (see this entry to see how the Javascript for the bookmarklet is done) to your toolbar (or bookmark it if you are using IE). Now search again on Trulia for properties in Chicago (try 60660 for a Zipcode), then click on the bookmarklet. You should see El lines and stations now on this map (see below). Until Trulia adds this sort of functionality, this is one way of making their service more useful.

The Javascript that populates the map can be found here. Note that this code searches the global scope object for a GMap2 object to a depth of one property (variable and variable.child) and uses this object to manipulate the map. This bookmarklet works with Trulia, HousingMaps, but not maps.google.com itself. I'll have to do a little bit more spelunking to find the object there and in a few other recalcitrant site.. Below is a sample of the code that is included.

map.addOverlay(new GPolyline([
new GLatLng(41.794771, -87.618222)
, new GLatLng(41.780238, -87.615488)
, new GLatLng(41.780415, -87.605783)
], "#006400", 5));
map.addOverlay(new GPolyline([
new GLatLng(41.794771, -87.618222)
, new GLatLng(41.779229, -87.644781)
, new GLatLng(41.778943, -87.664221)
], "#006400", 5));
map.addOverlay(CTAMap.createMarker(41.910821, -87.649403, "North & Clybourn Station: 1599 N. Clybourn Ave., Chicago, IL 60622"));
map.addOverlay(CTAMap.createMarker(42.019375, -87.672232, "Howard Terminal: 1649 W. Howard St., Chicago, IL 60626"));
map.addOverlay(CTAMap.createMarker(41.874265, -87.627675, "Harrison Station: 608 S. State St., Chicago, IL 60605"));
map.addOverlay(CTAMap.createMarker(41.97327, -87.658443, "Argyle Station: 1118 W. Argyle Ave., Chicago, IL 60640"));
map.addOverlay(CTAMap.createMarker(41.891447, -87.628078, "Grand Avenue Station: 521 N. State St., Chicago, IL 60610"));
map.addOverlay(CTAMap.createMarker(41.868119, -87.627398, "Roosevelt Station: 1167 S. State St., Chicago, IL 60605"));
map.addOverlay(CTAMap.createMarker(41.883696, -87.627891, "Washington Station: 128 N. State St., Chicago, IL 60602"));

The same thing could be done with the train lines of other cities, bus lines, or other important geographic features.

So, the next time you find a web site or application you think comes up short, don't just throw up your hands, make it better with BJAX.

Technorati : ajax, bjax, bookmarklets, google maps

agile ajax

Comments

• Leave a comment
• Comment feed for this post
• TrackBack URL

None so far.

Leave a comment