title: Can someone show me how I can debug this html form/javascript combination?
body: <p>I'm experimenting with the Google Maps API, and am trying to do a barebones directions app. The form calls the calcRoute() function, which, using alerts, I can see <em>does</em> have the correct 'start' and 'end' variables defined. However, the page is simply reloaded with the form cleared and the map unchanged. For the life of me, I can't figure out what's wrong. Does anybody see anything glaring/what might be causing the problem? Thanks!</p>
  
  <p>Also, apparently I suck at stackoverflow markdown, so here's a pastebin link: <a href="http://pastebin.com/BMThntPz" rel="nofollow">http://pastebin.com/BMThntPz</a></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;!-- Google Maps script --&gt;
      &lt;script type="text/javascript" &lt;google maps api&gt; &lt;/script&gt;
      &lt;script type="text/javascript"&gt;
        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);
            }
          });
        }
      &lt;/script&gt;
    &lt;/head&gt;
  
    &lt;body onload="initialize()"&gt;
      &lt;div class="container" style="height: 100%"&gt;
        &lt;div&gt;
        &lt;form class="form-horizontal" onsubmit="return calcRoute()"&gt;
            &lt;input type="text" class="input-xlarge" id="start"&gt;
            &lt;input type="text" class="input-xlarge" id="end"&gt;
          &lt;input class="btn" type="submit" value="Let's go!"&gt;
        &lt;/form&gt; &lt;!-- /trip info --&gt;
      &lt;/div&gt; 
  
      &lt;div&gt;
        &lt;div id="map_canvas" &gt;&lt;/div&gt;
      &lt;/div&gt; 
  
      &lt;/div&gt; &lt;!-- /container --&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>