title: Uncaught TypeError: Cannot read property 'route' of undefined
body: <p>I'm just starting out with Directions Service. I've hardcoded a couple of locations to make sure it's working. I keep getting the same error (Uncaught TypeError: Cannot read property 'route' of undefined), and I can't figure out why. The code is almost an exact copy of the code from the documentation. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;script&gt;
      var map;
      var directionsService;
      var directionsRenderer;
  
      function initMap() {
        var directionsService = new google.maps.DirectionsService();
        var directionsRenderer = new google.maps.DirectionsRenderer();
  
        var chicago = new google.maps.LatLng(38.627003, -90.199402);
        var mapOptions = {
          zoom:10,
          center: chicago
        }
        map = new google.maps.Map(document.getElementById('map'), mapOptions);
        directionsRenderer.setMap(map);
      }
  
      function calcRoute(start, end) {
  
        var request = {
          origin: "St Louis, MO",
          destination: "Chicago, IL",
          travelMode: 'DRIVING'
        };
          console.log(request);
        directionsService.route(request, function(result, status) {
          if (status == 'OK') {
            directionsRenderer.setDirections(result);
          }
        });
      }
  &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>