Google maps 无法在我的地图上显示directionsPanel

我真的很难让directionsPanel显示在我的网站上。地图使用地理定位，路线显示，我只是无法在下面显示方向面板。 以下是我正在努力工作的代码：

<style type="text/css">
  #map {
    width: 100%;
    height: 400px;
    margin-top: 10px;
  }

#directionsPanel {
    float: none;
    width: 100%;
    height: 400px;
    overflow: auto;
  }</style>
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
  var directionDisplay, map;
  function calculateRoute(from, to) {
    // Center initialized to Lafayette IN
    var travelMode = $('input[name="travelMode"]:checked').val();
    var myOptions = {
      zoom: 10,
      center: new google.maps.LatLng(40.40541,-86.89048),
      mapTypeId: google.maps.MapTypeId.ROADMAP,
    };
    var panel = document.getElementById("directionsPanel");
    // Draw the map
    var mapObject = new google.maps.Map(document.getElementById("map"), myOptions);

    var directionsService = new google.maps.DirectionsService();
    var directionsRequest = {
      origin: from,
      destination: to,
      travelMode: google.maps.DirectionsTravelMode[travelMode],
      unitSystem: google.maps.UnitSystem.IMPERIAL
    };
    directionsService.route(
      directionsRequest,
      function(response, status)
      {
        if (status == google.maps.DirectionsStatus.OK)
        {
          new google.maps.DirectionsRenderer({
            map: mapObject,
            directions: response
          });
        }
        if (panel != null) {
directionsDisplay.setPanel(panel);
}
        else
          $("#error").append("Unable to retrieve your route<br />");
      }
    );
  }

  $(document).ready(function() {
    // If the browser supports the Geolocation API
    if (typeof navigator.geolocation == "undefined") {
      $("#error").text("Your browser doesn't support the Geolocation API");
      return;
    }

    $("#from-link, #to-link").click(function(event) {
      event.preventDefault();
      var addressId = this.id.substring(0, this.id.indexOf("-"));

      navigator.geolocation.getCurrentPosition(function(position) {
        var geocoder = new google.maps.Geocoder();
        geocoder.geocode({
          "location": new google.maps.LatLng(position.coords.latitude, position.coords.longitude)
        },
        function(results, status) {
          if (status == google.maps.GeocoderStatus.OK)
            $("#" + addressId).val(results[0].formatted_address);
          else
            $("#error").append("Unable to retrieve your address<br />");
        });
      },
      function(positionError){
        $("#error").append("Error: " + positionError.message + "<br />");
      },
      {
        enableHighAccuracy: true,
        timeout: 10 * 1000 // 10 seconds
      });
    });

    $("#calculate-route").submit(function(event) {
      event.preventDefault();
      calculateRoute($("#from").val(), $("#to").val());
    });
  });
  google.maps.event.addDomListener(window, 'load', initialize);

</script>

#地图{
宽度：100%；
高度：400px；
边缘顶部：10px；
}
#方向盘{
浮动：无；
宽度：100%；
高度：400px；
溢出：自动；
}
var方向显示、地图；
函数计算器输出（从、到）{
//中心初始化为Lafayette IN
var travelMode=$（'input[name=“travelMode”]：checked'）.val（）；
变量myOptions={
缩放：10，
中心：新google.maps.LatLng（40.40541，-86.89048），
mapTypeId:google.maps.mapTypeId.ROADMAP，
};
var panel=document.getElementById（“directionsPanel”）；
//画地图
var mapObject=new google.maps.Map（document.getElementById（“Map”），myOptions）；
var directionsService=new google.maps.directionsService（）；
变量方向请求={
出处:从,，
目的地：至，
travelMode:google.maps.DirectionsTravelMode[travelMode]，
unitSystem:google.maps.unitSystem.IMPERIAL
};
方向服务.路线(
指示请求，
功能（响应、状态）
{
if（status==google.maps.directionstatus.OK）
{
新google.maps.DirectionsRenderer({
map:mapObject，
方向:回应
});
}
如果（面板！=null）{
方向显示。设置面板（面板）；
}
其他的
$（“#错误”）.append（“无法检索您的路线
”；
}
);
}
$（文档）.ready（函数（）{
//如果浏览器支持地理定位API
if（typeof navigator.geolocation==“未定义”）{
$（“#错误”）.text（“您的浏览器不支持地理定位API”）；
返回；
}
$（“#从链接，#到链接”）。单击（函数（事件）{
event.preventDefault（）；
var addressId=this.id.substring（0，this.id.indexOf（“-”）；
navigator.geolocation.getCurrentPosition（函数（位置）{
var geocoder=new google.maps.geocoder（）；
地理编码({
“位置”：新的google.maps.LatLng（position.coords.latitude，position.coords.longitude）
},
功能（结果、状态）{
if（status==google.maps.GeocoderStatus.OK）
$（“#”+addressId）.val（结果[0]。格式化的#地址）；
其他的
$（“#错误”）.append（“无法检索您的地址
”；
});
},
功能（位置错误）{
$（“#error”）.append（“error:+positionError.message+”
）；
},
{
EnableHighAccurance:正确，
超时：10*1000//10秒
});
});
$（“#计算路线”）.submit（函数（事件）{
event.preventDefault（）；
计算器输出（$（“#from”）.val（），$（“#to”）.val（）；
});
});
google.maps.event.addDomListener（窗口“加载”，初始化）；

以下是我的HTML代码：

<body>
<body onLoad="calculateRoute()">
<!-- Start Header -->
<?php include("header.php"); ?> 
<!-- End Header -->

<div style="margin: 0pt auto; max-width: 600px;">

<div id="wrapper">

<!-- Start Nav Button -->
<div class="topnav">
<p><a href="./">Home&nbsp; |&nbsp; Find Us</a></p>
</div>  
<!-- End Nav Button -->

<!-- Start Content -->
<div id="contentinner">
<div class="content">
<p><span><?php echo $businessname; ?></span><br /><?php echo $address1; ?><br /><?php     echo $address2; ?></p>
<section id="wrapper">
<form id="calculate-route" name="calculate-route" action="#" method="get">
  <label for="from">From:</label><br />
  <input type="text" id="from" name="from" required="required" placeholder="An     address" size="20" />
  <input type="button" id="from-link" href="#" value=Get-My-Location />
  <br />

  <label for="to">To: <?php echo $businessname;?></label><br />
  <input type="text" id="to" name="to" value="<?php echo $address1; ?> <?php echo $address2; ?>" size="20" />
  <!--<a id="to-link" href="#">Get my position</a> -->
  <br />
 <label><input type="radio" name="travelMode" value="DRIVING" checked />     Driving</label><br />
<label><input type="radio" name="travelMode" value="BICYCLING" /> Bicylcing</label><br />
<label><input type="radio" name="travelMode" value="TRANSIT" /> Public  transport</label><br />
<label><input type="radio" name="travelMode" value="WALKING" /> Walking</label><br />
  <input type="submit" />
  <input type="reset" />
</form>
<div id="map"></div>
<div id="directionsPanel"></div>
<p id="error"></p>
</section>  
<!-- End Content -->

</div><!-- wrapper -->

</div>
</div>


</div><!-- margin -->

<!-- Start Footer -->
<?php include("footer.php"); ?>                 
<!-- End Footer -->

</body>

发件人：



致：

具有setPanel方法的对象是

您需要保留对它的引用：

     directionsDisplay =  new google.maps.DirectionsRenderer({
                                map: mapObject,
                                directions: response
                              });

然后在以下位置调用setPanel：

    directionsDisplay.setPanel(panel);

请注意，在全局范围内声明代码的代码开头有一个输入错误：

 <script>
 var directionDisplay, map;


var方向显示、地图；

应为（带“s”）：


var方向显示、地图；
Geocodezip，多亏了你的帮助，我在几个小时后就可以使用了。我的代码最后是：if（status==google.maps.directionstatus.OK）{new google.maps.directionsrender（{map:mapObject，directions:response，}）；}if（status==google.maps.directionstatus.OK）{directionsDisplay=new google.maps.DirectionsRenderer（{map:mapObject，directions:response，}）；directionsDisplay.setPanel（panel）；
 <script>
 var directionsDisplay, map;