title: Google maps API - Uncaught ReferenceError: directionsService is not defined
body: <p>I am trying to use direction on my map used on my site, but there is one error that keeps popping up and I have no idea how to get rid of it! </p>
  
  <p><strong><em>Uncaught ReferenceError: directionsService is not defined</em></strong></p>
  
  <p>This is my code used</p>
  
  <pre><code>$(window).load(function () {
      var directionsDisplay;
      var directionsService = new google.maps.DirectionsService();
      var map;
  });
  $(window).load(function () {
          initialize();
      });
  
  function initialize() {
    directionsDisplay = new google.maps.DirectionsRenderer();
    var chicago = new google.maps.LatLng(41.850033, -87.6500523);
    var mapOptions = {
      zoom:7,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      center: chicago
    }
    map = new google.maps.Map(document.getElementById("map"), mapOptions);
    directionsDisplay.setMap(map);
    directionsDisplay.setPanel(document.getElementById("directionsPanel"));
  }
  
  function calcRoute() {
    var start = new google.maps.LatLng(54.986136, -1.537945);
    var end = new google.maps.LatLng(41.850033, -87.6500523);
  
    var request = {
      origin:start,
      destination:end,
      travelMode: google.maps.TravelMode.DRIVING
    };
    console.log(request);
    if (request==true)
    {
      console.log("REQUEST");
    }
    console.log(JSON.stringify(request)); 
    directionsService.route(request, function(result, status) {
      if (status == google.maps.DirectionsStatus.OK) {
          if (!response.routes[0].copyrights) { 
          response.routes[0].copyrights = "Copyrights unknown."; 
          }
          console.log("ALL GOOD!");
        directionsDisplay.setDirections(result);
      }
      else
      {
          console.log("NOT-GOOD!");
      }
    });
  }
  </code></pre>