title: problem with google directions api
body: <p>A user comes to my web app and locates the destination address but he does not locate the source location and publishes the page. The normal user who are not registered to the web app adds the source location. </p>
  
  <p>Once the user adds the source location he is not able to see the exact direction map, rather the google is displaying the default maps. </p>
  
  <p>Here is the exception giving when we used chrome console.</p>
  
  <p>I have added the code here and also the exception I am getting </p>
  
  <pre><code>Error Name:
  main.js:41Uncaught TypeError:Object#&lt;object&gt; has no method 'Load'
  
  
  function calcRoute() {
      showDirections();
    document.getElementById('directionsPanel').innerHTML="";
      initialize();
    var start = document.getElementById("txt_from").value;
    var end = getDestinationAdderss(document.getElementById('final_address').innerHTML);
    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);
      }
    });
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/KfIuD.jpg" alt="enter image description here"></p>
  
  <pre><code>function initialize() {
    directionsDisplay = new google.maps.DirectionsRenderer();
    var chicago = new google.maps.LatLng(41.850033, -87.6500523);
    var myOptions = {
      zoom:7,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      center: chicago
    }
    map = new google.maps.Map(document.getElementById("map_canvas_directions"), myOptions);
    directionsDisplay.setMap(map);
    directionsDisplay.setPanel(document.getElementById("directionsPanel"));
  }
  </code></pre>