This is for a bugreport to the codepen.io people: source at http://codepen.io/johan/full/rkeiu

index.html

<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<div>
  <b>Mode of Travel: </b>
  <select id="mode" onchange="calcRoute()">
    <option value="DRIVING">Driving</option>
    <option value="WALKING">Walking</option>
    <option value="BICYCLING">Bicycling</option>
    <option value="TRANSIT">Transit</option>
  </select>
</div>
<div id="map_canvas"></div>

script.js

var directionsService = new google.maps.DirectionsService()
  , haight = new google.maps.LatLng(37.7699298, -122.4469157)
  , oceanBeach = new google.maps.LatLng(37.7683909618184, -122.51089453697205)
  , map, directionDisplay;

window.onload = function init() {
  directionsDisplay = new google.maps.DirectionsRenderer();
  var mapOptions = {
    zoom: 14,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: haight
  }
  map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
  directionsDisplay.setMap(map);
};

function calcRoute() {
  var selectedMode = document.getElementById('mode').value;
  var request = {
      origin: haight,
      destination: oceanBeach,
      travelMode: google.maps.TravelMode[selectedMode]
  };
  directionsService.route(request, function(response, status) {
    if (status === google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
    }
  });
}

style.css

@import url('https://google-developers.appspot.com/maps/documentation/javascript/examples/default.css');

#map_canvas {
  top: 30px;
}