Google Map Route Travel Mode and Way points

Example from http://www.dreamdealer.nl/tutorials/adding_travel_modes_and_waypoints_to_google_maps_directions.html

by B L Praveen

HTML

<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
	<h1>Extensive Google Maps Directions</h1>
	<div id="map_canvas" style="width:100%; height:300px"></div>		
	<form action="/routebeschrijving"  id="routeForm">
		<div style="overflow: hidden; width: 500px; margin: 0 auto;">
			<div style="width: 350px; float: left; text-align: left;">
				<label>
					From: <br />
					<input type="text" id="routeStart" value="amsteleindstraat, oss">
				</label>
				<label>
					Via: (optional)<br />
					<input type="text" id="routeVia" value="bessenlaan, oss">
				</label>
			</div>
			<div style="width: 150px; float: left; text-align: left;">
				<label>Travel mode:</label>
				<label><input type="radio" name="travelMode" value="DRIVING" checked /> Driving</label>
				<label><input type="radio" name="travelMode" value="BICYCLING" /> Bicylcing</label>
				<label><input type="radio" name="travelMode" value="TRANSIT" /> Public transport</label>
				<label><input type="radio" name="travelMode" value="WALKING" /> Walking</label>
			</div>
		</div>
		<input type="submit" value="Calculate route">
	</form>
	<div id="directionsPanel">
		Enter a destination and click "Calculate route".
	</div>

CSS

body {
		font-family: 'Terminal Dosis', sans-serif;
		font-size: 18px;
		color: #333;
		background: #CCC; /* background color */	
		padding: 0 0 30px 0;
		margin: 10px 0px;
		overflow-y: scroll;
	}
	td {
		font-size: 18px;	
	}
	h1 {
		text-align: center;
		font-family: 'Terminal Dosis', sans-serif;
		font-size: 60px;
		color: #EEEEEE;
		text-shadow: 0px -1px 0px #AAA, 0px 1px 0px #EEEEEE;
		margin: 0px 0px 20px 0px;
	}
	input {
		font-family: 'Terminal Dosis', sans-serif;
		font-size: 22px;
		padding: 7px 8px;	
		border: 0px;
		box-shadow: 0px 0px 6px #999;
		border-radius: 10px;
	}
	input[type="text"] {
		width: 300px;
	}
	input[type="submit"] {
		padding: 6px 20px;	
		margin: 20px 0 0 0;
	}
	#routeForm {
		width: 100%;
		text-align: center;
		margin-top: 20px;	
	}
	#directionsPanel {
		background: #FFFFFF;
		width: 800px;
		padding: 20px;
		margin: 0 auto;
		box-shadow: 0px 0px 6px #999;
		border-radius: 10px;
		font-size: 20px;
	}
	.adp-directions {
		width: 100%;	
	}
	form label {
		display: block;
		padding: 4px 0px;
	}

JavaScript

var directionDisplay;
var directionsService = new google.maps.DirectionsService();
initialize()
jQuery('#routeForm').submit(function() {
    calcRoute()
    return false
})
function initialize() {
	var latlng = new google.maps.LatLng(51.764696,5.526042);
	// set direction render options
	var rendererOptions = {	draggable: true	};
	directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
	var myOptions = {
		zoom: 14,
		center: latlng,
		mapTypeId: google.maps.MapTypeId.ROADMAP,
		mapTypeControl: false
	};
	// add the map to the map placeholder
	var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
	directionsDisplay.setMap(map);
	directionsDisplay.setPanel(document.getElementById("directionsPanel"));
	// Add a marker to the map for the end-point of the directions.
	var marker = new google.maps.Marker({
		position: latlng, 
		map: map, 
		title:"Rodderhof, Oss"
	}); 
}
function calcRoute() {
	// get the travelmode, startpoint and via point from the form		
	var travelMode = $('input[name="travelMode"]:checked').val();
	var start = $("#routeStart").val();
	var via = $("#routeVia").val();
	
	if (travelMode == 'TRANSIT') {
		via = ''; // if the travel mode is transit, don't use the via waypoint because that will not work
	}
	var end = "51.764696,5.526042"; // endpoint is a geolocation
	var waypoints = []; // init an empty waypoints array
	if (via != '') {
		// if waypoints (via) are set, add them to the waypoints array
		waypoints.push({
		  location: via,
		  stopover: true
		});
	}
	var request = {
		origin: start,
		destination: end,
		waypoints: waypoints,
		unitSystem: google.maps.UnitSystem.IMPERIAL,
		travelMode: google.maps.DirectionsTravelMode[travelMode]
	};
	directionsService.route(request, function(response, status) {
		if (status == google.maps.DirectionsStatus.OK) {
			$('#directionsPanel').empty(); // clear the directions panel before adding new directions
			directionsDisplay.setDirections(response);
		} else...