Uncaught TypeError: Cannot read property 'apply' of undefined when trying to find distance matrix Javascript

457 views Asked by At

Im trying to find the distance matrix between two points in Google Maps API and im getting this error.

Uncaught TypeError: Cannot read property 'apply' of undefined
at distance_matrix.js:4
at Ku.j (distance_matrix.js:3)
at Object.c [as _jr083s] (common.js:110)
at DistanceMatrixService.GetDistanceMatrix?1m1&2s35.853308276088036&1m1&2s-

Im trying to get the distance matrix response so I can get the distance in miles. Heres the code that I have

function initMap() {
const momilets = { lat: 35.853308276088036, lng: -78.57256943168214};
const map = new google.maps.Map(document.getElementById('map'), {zoom: 12, center: momilets, disableDefaultUI: true});
const marker = new google.maps.Marker({position: momilets, map: map});

const geocoder = new google.maps.Geocoder();
document.getElementById('submit').addEventListener('click', () => {
    geocodeAddress(geocoder, map);
})

}

function geocodeAddress(geocoder, resultsMap) {
    const address = document.getElementById('address').value;
    geocoder.geocode({ address: address }, (results, status) => {
        if(status = 'OK') {
            resultsMap.setCenter(results[0].geometry.location);
            const marker2 = new google.maps.Marker({
              map: resultsMap,
              position: results[0].geometry.location,
            });
            var lat = results[0].geometry.location.lat();
            var lng = results[0].geometry.location.lng();

            var service = new google.maps.DistanceMatrixService();
            service.getDistanceMatrix(
              {
                    origins: ['35.853308276088036', '-78.57256943168214'],
                    destinations: [toString(lat), toString(lng)],
                    unitSystem: google.maps.UnitSystem.IMPERIAL,
                    travelMode: 'DRIVING'
          } );
        } else {
            alert("Unsuccessful because: " + status);
          }
        });
    }

    function callback(response, status) {
        if (status == 'OK') {
          var origins = response.originAddresses;
          var destinations = response.destinationAddresses;
      
          for (var i = 0; i < origins.length; i++) {
            var results = response.rows[i].elements;
            for (var j = 0; j < results.length; j++) {
              var element = results[j];
              var distance = element.distance.text;
              var duration = element.duration.text;
              var from = origins[i];
              var to = destinations[j];
            }
          }
        }
      }

if anyone can help clear this error for me itd be greatly appreciated

1

There are 1 answers

0
Rahul Kumar On BEST ANSWER

you haven't provided callback function in service.getDistanceMatrix() method that's why getting the above error.

service.getDistanceMatrix({
        origins: ['35.853308276088036', '-78.57256943168214'],
        destinations: [toString(lat), toString(lng)],
        unitSystem: google.maps.UnitSystem.IMPERIAL,
        travelMode: 'DRIVING'
      }, (response, status) => {
        console.log("response data: ", response);
        console.log("status: ", status);
});

You can follow the below JSFiddle link for complete working code.

<script async src="//jsfiddle.net/y4zbkudo/4/embed/js,html,css,result/dark/"></script>