Tube or Walk?

Should retrieve walking distance/duration and train duration between user-inputted tubes (from a selection). Walking uses Google Maps API, tube data yet to find a source. Currently, inputted data can be anywhere in the world and is automatically suffixed with 'Station, London'.

by Chris Watson

HTML

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
window.onload = function(){
    var form = document.getElementById('form');
    form.onsubmit = function(e){
        e.preventDefault();
        var service = new google.maps.DistanceMatrixService();
        service.getDistanceMatrix(
            {
                origins: ['"'+form.from.value.trim()+' Station, London"'],
                destinations: ['"'+form.to.value.trim()+' Station, London"'],
                travelMode: google.maps.TravelMode.WALKING
            },
            callback
        );
    }
}
function callback(response, status) {
    if (status == google.maps.DistanceMatrixStatus.OK) {
        var origins = response.originAddresses;
        var destinations = response.destinationAddresses;
        for (var i = 0; i < origins.length; i++) {
        var results = response.rows[i].elements;
            for (var j = 0; j < results.length; j++) {
                var element = results[j];
                var distance = element.distance.text;
                var duration = element.duration.text;
                var from = origins[i];
                var to = destinations[j];
                document.getElementById('output').innerHTML += 'Walking <strong>' + from + '</strong> &rarr; <strong>' + to + '</strong><br>Distance: ' + distance + '<br>Duration: ' + duration;
            }
        }
    }
}
</script>
</head>
<body>
<div style="width:260px;float:right"><script language="JavaScript" src="http://www.tfl.gov.uk/tfl/syndication/widgets/serviceboard/embeddable/serviceboard-iframe-stretchy.js"></script></div>
<h1>Tube or Walk</h1>
<form id="form">
    <label for="from">From:</label>
    <input name="from" type="text">
    <label for="to">To:</label>
    <input name="to" type="text">
    <input type="submit" value="Go">
</form>
<div id="output"...