Cannot get the directionsPanel to show on my map

StackOverflow https://stackoverflow.com/questions/19507106

  •  01-07-2022
  •  | 
  •  

Question

I am really struggling to get the directionsPanel to show on my website. The map works using geolocation and the route is displayed, I just can't get the directions panel to show below. Here is the code I am trying to get to work:

<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>

Here is my HTML code:

<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>

Was it helpful?

Solution

the object that has a setPanel method is a DirectionsRenderer

You need to keep a reference to it:

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

Then call setPanel on that:

    directionsDisplay.setPanel(panel);

note that you have a typo at the beginning of your code where you declare it in the global scope:

 <script>
 var directionDisplay, map;

Should be (with an "s"):

 <script>
 var directionsDisplay, map;
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top