title: TypeError: Number is not a function - when trying to use Google Maps API V3 DirectionsService
body: <p>I'm pretty embarrassed to ask this as I'm sure it's something super simple that I'm missing.</p>
  
  <p>I've seen several questions just like this on the interwebs but I can't seem to use those answers to fix my issue. I've seen tutorials and code that look very similar to mine but for some reason I'm getting an error, and the stack trace isn't helpful at all.</p>
  
  <p>My HTML:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
    &lt;head&gt;
      &lt;link href="style.css" rel="stylesheet"&gt;
  
      &lt;script type="text/javascript"
        src="https://maps.googleapis.com/maps/api/js?key=name-changed-to-protect-the-innocent"&gt;
      &lt;/script&gt;
  
      &lt;script type="text/javascript" src="directions.js"&gt;&lt;/script&gt;
  
    &lt;/head&gt;
  
    &lt;body&gt;
      &lt;section id="map"&gt;&lt;/section&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>My javascript:</p>
  
  <pre><code>function initialize() {
  
    var map, service;
  
    // Create the Google Map
    createMap();
    getRoute();
  
  
    function createMap() {
  
      // Set mapOptions
      var mapOptions = {
        center: { lat: 37.388769, lng: -122.158954 },
        zoom: 15
      };
  
      // Create map with options
      map = new google.maps.Map(document.getElementById('map'), mapOptions);
    }
  
    function getRoute() {
      var orig = { lat: 37.388769, lng: -122.158954 };
      var dest = { lat: 37.391979, lng: -122.167891 };
  
      var routeOptions = {
        origin: orig,
        destination: dest,
        travelMode: google.maps.TravelMode.DRIVING
      };
  
      service = new google.maps.DirectionsService();
  
      service.route(routeOptions, handleDirections);
    }
  
    function handleDirections(result, status) {
      if ( status == google.maps.DirectionsStatus.OK ) {
        console.log("this worked");
      }
      else {
        console.log("this didn't work");
      }
    }
  
  }
  
  google.maps.event.addDomListener(window, 'load', initialize);
  </code></pre>
  
  <p>My error in the console when loading the page:</p>
  
  <pre><code>Uncaught TypeError: number is not a function   VM2966:64
   KJ                          VM2970:2
   taa                         VM2970:9
   yaa                         VM2970:7
   xaa                         VM2970:10
   (anonymous function)        main.js:26
   Wf                          VM2970:10
   u1.(anonymous function).Sj  main.js:37
   (anonymous function)        main.js:26
   Xf                          VM2970:54
   (anonymous function)        VM2966:31
   vh.util                     main.js:37
   (anonymous function)        main.js:25
   (anonymous function)        main.js:25
   (anonymous function)        main.js:25
   (anonymous function)        main.js:26
   Qf                          main.js:25
   Mf.(anonymous function).D   directions.js:1
  </code></pre>