Untitled

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Google Maps script -->
    <script type="text/javascript"
        src="http://maps.googleapis.com/maps/api/js?key=xxxxxxxxxxxxxxxxxxxxx&sensor=false">
    </script>
    <script type="text/javascript">
      var directionDisplay;
      var directionsService = new google.maps.DirectionsService();
      var map;

      function initialize() {
        directionsDisplay = new google.maps.DirectionsRenderer();
        var philadelphia = new google.maps.LatLng(39.9522, -75.1642);
        var mapOptions = {
          center: philadelphia,
          zoom: 7,
          mapTypeId: google.maps.MapTypeId.ROADMAP,
          disableDefaultUI: true,
        };
        map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
        directionsDisplay.setMap(map);
      }

      function calcRoute() {
        var start = document.getElementById('start').value;
        var end = document.getElementById('end').value;

        var request = {
          origin:start,
          destination:end,
          travelMode: google.maps.DirectionsTravelMode.DRIVING,
        };

        directionsService.route(request, function(response, status) {
          if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
          }
        });
      }
    </script>
  </head>

  <body onload="initialize()">

    <div class="container" style="height: 100%">
      <div>
      <form class="form-horizontal" onsubmit="return calcRoute()">
        <fieldset>
          <div class="control-group">
        <label class="control-label" for="start">From</label>
        <div class="controls">
          <input type="text" class="input-xlarge" id="start" placeholder="Origin">
        </div>
          </div> <!-- /"start" control-group -->
          <div class="control-group">
        <label class="control-label" for="finish">To</label>
        <div class="controls">
          <input type="text" class="input-xlarge" id="end" placeholder="Destination">
        </div>
          </div> <!-- /"finish" control-group -->
          <div class="controls">
        <input class="btn btn-primary offset2" type="submit" value="Let's go!">
          </div> <!-- Submit button -->
        </fieldset>
      </form> <!-- /trip info -->
    </div>

    <div>
      <div id="map_canvas" ></div>
    </div>

    </div> <!-- /container -->

  </body>
</html>