CODEWITHSUNDEEP
javascriptgoogle-maps-api-3
Raj
Raj

Reputation: 1784

TypeError: Number is not a function - when trying to use Google Maps API V3 DirectionsService

I'm pretty embarrassed to ask this as I'm sure it's something super simple that I'm missing.

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.

My HTML:

<!DOCTYPE html>
<html>

  <head>
    <link href="style.css" rel="stylesheet">

    <script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?key=name-changed-to-protect-the-innocent">
    </script>

    <script type="text/javascript" src="directions.js"></script>

  </head>

  <body>
    <section id="map"></section>
  </body>
</html>

My javascript:

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

My error in the console when loading the page:

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

Upvotes: 0

Views: 1601

Answers (1)

sabotero
sabotero

Reputation: 4365

The problem is that

 var orig = { lat: 37.388769, lng: -122.158954 };
 var dest = { lat: 37.391979, lng: -122.167891 };

Are not google.maps.LatLng objects.

Change thoses lines by this :

var orig = new google.maps.LatLng(37.388769, -122.158954);
var dest = new google.maps.LatLng(37.391979, -122.167891);

Check out the example below :

<!DOCTYPE html>
<html>
    <head>
        <title>Directions Exemple</title>

    </head>

<body>

    <div id="map" style="width:500px;height: 500px;"></div>

    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script>
    <script>
            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 = new google.maps.LatLng(37.388769, -122.158954);
                    var dest = new google.maps.LatLng(37.391979, -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);

    </script>
</body>
</html>

Upvotes: 4

Related Questions