CODEWITHSUNDEEP
javascriptgoogle-maps-api-3distance-matrix
Popolitus
Popolitus

Reputation: 463

How google map api getting result ZERO RESULT

i have try to calculate distance from 2 very far locations and I expect that google give me a ZERO RESULT error becouse not find a right way from this 2 locations, but not give me this error And i can't intercept this error just say me:

Uncaught TypeError: Cannot read property 'text' of undefined

Now my question is, how can i intercept this error ZERO RESULT? 

var map;

function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
        zoom: 5,
        center: {
            lat: -15.7942357,
            lng: -47.8821945
        }
    });
    
    var bounds = new google.maps.LatLngBounds;

        var origin1 = {lat: -33.8688197, lng: 151.209295500000058};
        var destinationB = {lat: 50.087, lng: 14.421};


        var geocoder = new google.maps.Geocoder;

        var service = new google.maps.DistanceMatrixService;
        service.getDistanceMatrix({
          origins: [origin1],
          destinations: [destinationB],
          travelMode: 'DRIVING',
          unitSystem: google.maps.UnitSystem.METRIC,
          avoidHighways: false,
          avoidTolls: false
        }, function(response, status) {
            
          if (status !== 'OK') {
            alert('Error was: ' + status);
          } else {
            var originList = response.originAddresses;
            var destinationList = response.destinationAddresses;

            var outputDiv = document.getElementById('output');



            var showGeocodedAddressOnMap = function(asDestination) {
              return function(results, status) {
         
                  
                if (status === 'OK') {
                  map.fitBounds(bounds.extend(results[0].geometry.location));

                } else {
                  alert('Geocode was not successful due to: ' + status);
                }
              };
            };

            for (var i = 0; i < originList.length; i++) {
              var results = response.rows[i].elements;
      
                     
              geocoder.geocode({'address': originList[i]},
                  showGeocodedAddressOnMap(false));
              for (var j = 0; j < results.length; j++) {
                geocoder.geocode({'address': destinationList[j]},
                    showGeocodedAddressOnMap(true));

                    alert(results[j].distance.text);
                    alert(results[j].duration.text);  

              }
            }
          }
        });

    
    
      }
#map{
width:100%;
height:300px;
}
<html>
<head>
</head>
<body>
<div id="map"></div>
<script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSpQw&libraries=places&callback=initMap">
    </script>

</body>
</html>

Upvotes: 0

Views: 2005

Answers (2)

Rama Adaikkalam
Rama Adaikkalam

Reputation: 743

Before alert do a check something like below

// check if it has results
if(results[j].status === "OK") {
    // do something with result
    alert(results[j].distance.text);
    alert(results[j].duration.text);
}

Google Maps API Status Code.

Upvotes: 1

George
George

Reputation: 6739

As I've mentioned about, the request is okay, hence why it returns the status, okay, you need to check each element for its status. View the code below especially the line results[j].status !== "OK"

var map;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 5,
    center: {
      lat: -15.7942357,
      lng: -47.8821945
    }
  });

  var bounds = new google.maps.LatLngBounds;

  var origin1 = {
    lat: -33.8688197,
    lng: 151.209295500000058
  };
  var destinationB = {
    lat: 50.087,
    lng: 14.421
  };


  var geocoder = new google.maps.Geocoder;

  var service = new google.maps.DistanceMatrixService;
  service.getDistanceMatrix({
    origins: [origin1],
    destinations: [destinationB],
    travelMode: 'DRIVING',
    unitSystem: google.maps.UnitSystem.METRIC,
    avoidHighways: false,
    avoidTolls: false
  }, function(response, status) {

    if (status !== 'OK') {
      alert('Error was: ' + status);
    } else {
      var originList = response.originAddresses;
      var destinationList = response.destinationAddresses;

      var outputDiv = document.getElementById('output');



      var showGeocodedAddressOnMap = function(asDestination) {
        return function(results, status) {


          if (status === 'OK') {
            map.fitBounds(bounds.extend(results[0].geometry.location));

          } else {
            alert('Geocode was not successful due to: ' + status);
          }
        };
      };

      for (var i = 0; i < originList.length; i++) {
        var results = response.rows[i].elements;


        geocoder.geocode({
            'address': originList[i]
          },
          showGeocodedAddressOnMap(false));
        for (var j = 0; j < results.length; j++) {
          geocoder.geocode({
              'address': destinationList[j]
            },
            showGeocodedAddressOnMap(true));

          if (results[j].status !== "OK") {
            alert("Not okay");
            return;
          }

          alert(results[j].distance.text);
          alert(results[j].duration.text);

        }
      }
    }
  });



}
#map {
  width: 100%;
  height: 300px;
}
<html>

<head>
</head>

<body>
  <div id="map"></div>
  <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCp5RzbQjgID4oHJYe6VRGhKGXpQTGtCmw&libraries=places&callback=initMap">
  </script>

</body>

</html>

Upvotes: 1

Related Questions