I moved to Brighton, MA at the beginning of September and as a result I no longer have much use for a car. I live right on the B line which, as a supplement to my old size 11s, gets me everywhere I need to be.

Since I’m new to the area, I have been using Google Maps a lot. While it’s helpful to gain a general idea of where things are, it was becoming a frequent annoyance to cut and paste the start and end addresses from the Google Maps directions page into the MBTA Trip Planner.

To solve the problem I took my first stab at writing a JavaScript bookmarklet.

The MBTA trip planner form submits POST data, so my first approach was to create a new form element in JavaScript and submit it. This version worked fine in Safari and Chrome but did not work in Firefox for some reason.

Luckily, before I got too deep into debugging the script, I noticed that the MBTA trip planner would also accept GET form data. This allowed me to implement a version that weighs in at just 3 lines.

Both versions of the script are posted below. On a related note, I can wholeheartedly recommend the Bookmarklet Builder from subsimple.com to compress the script for use as a bookmarklet.

GMaps2MBTA for Safari and Chrome

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

javascript:(function(){
var start = document.getElementById('d_d').value;
var end = document.getElementById('d_daddr').value;
var mbta_form = document.createElement("form");
mbta_form.action = "http://mbta.com/rider_tools/trip_planner/";
mbta_form.method = "post";

var sa = document.createElement("input");
sa.name = "sa";
sa.value = start;
mbta_form.appendChild(sa);

var ea = document.createElement("input");
ea.name = "ea";
ea.value = end;
mbta_form.appendChild(ea);

mbta_form.submit();
})()

GMaps2MBTA for Firefox and IE

1
2
3
4
5

javascript:(function(){
var start = document.getElementById('d_d').value;
var end = document.getElementById('d_daddr').value;
document.location.href='http://mbta.com/rider_tools/trip_planner/?sa='+escape(start)+'&ea='+escape(end);
})()