有人能告诉我如何调试这个html表单/javascript组合吗？_Javascript_Html_Google Maps

有人能告诉我如何调试这个html表单/javascript组合吗？

javascript html google-maps

有人能告诉我如何调试这个html表单/javascript组合吗？,javascript,html,google-maps,Javascript,Html,Google Maps,我正在试验谷歌地图API，并试图做一个赤骨方向的应用程序。表单调用calcRoute（）函数，通过使用警报，我可以看到该函数定义了正确的“开始”和“结束”变量。但是，只需在清除表单且地图不变的情况下重新加载页面。就我个人而言，我不知道怎么了。是否有人看到任何明显的/可能导致问题的原因？谢谢另外，显然我在stackoverflow降价方面很差劲，所以这里有一个pastebin链接：有一个很棒的屏幕演示，展示了如何使用Chrome开发者工具调试Maps API：您是否启用了Firebug（F

我正在试验谷歌地图API，并试图做一个赤骨方向的应用程序。表单调用calcRoute（）函数，通过使用警报，我可以看到该函数定义了正确的“开始”和“结束”变量。但是，只需在清除表单且地图不变的情况下重新加载页面。就我个人而言，我不知道怎么了。是否有人看到任何明显的/可能导致问题的原因？谢谢

另外，显然我在stackoverflow降价方面很差劲，所以这里有一个pastebin链接：


有一个很棒的屏幕演示，展示了如何使用Chrome开发者工具调试Maps API：
您是否启用了Firebug（Firefox）或Chrome开发者工具？如果您没有使用过这些工具，那么学习它们是非常值得的（它们非常容易学习）。
<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Google Maps script -->
    <script type="text/javascript" <google maps api> </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()">
          <input type="text" class="input-xlarge" id="start">
          <input type="text" class="input-xlarge" id="end">
        <input class="btn" type="submit" value="Let's go!">
      </form> <!-- /trip info -->
    </div> 

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

    </div> <!-- /container -->
  </body>
</html>