Exceeded Limit: Google Maps API cannot process more than 10 destinations at this time

Question

Exceeded Limit: Google Maps API cannot process more than 10 destinations at this time

After spending the entire day researching, I am still unable to find a solution that solves my issue. I am utilizing the Google Maps Distance Matrix Service with 1 origin and 14 destinations. While testing the modified sample code from Google (https://developers.google.com/maps/documentation/javascript/examples/distance-matrix) by adding more destinations, I encountered an OVER_QUERY_LIMIT error when the number of destinations exceeded 10, which also caused a marker misplacement.

According to the usage limits I have come across (100 elements per 10 seconds), this shouldn't be triggering any limits. Additionally, I attempted adding my API Key to the following line, but it did not resolve the issue:

 src="https://maps.googleapis.com/maps/api/js?v=3.exp"

Any assistance on this matter would be greatly appreciated! Thank you.

The modifications made to the Google's sample code are as follows:

var destinationA = new google.maps.LatLng(45.465422,9.185924);
var destinationB = new google.maps.LatLng(41.385064,2.173403);
var destinationC = new google.maps.LatLng(40.416775,-3.70379);
var destinationD = new google.maps.LatLng(51.507351,-0.127758);
var destinationE = new google.maps.LatLng(48.856614,2.352222);
var destinationF = new google.maps.LatLng(41.902784,12.496366);
var destinationG = new google.maps.LatLng(50.85034,4.35171);
var destinationH = new google.maps.LatLng(46.198392,6.142296);
var destinationI = new google.maps.LatLng(47.36865,8.539183);
var destinationJ = new google.maps.LatLng(53.408371,-2.991573);
var destinationK = new google.maps.LatLng(37.389092,-5.984459);
var destinationL = new google.maps.LatLng(53.349805,-6.26031);
var destinationM = new google.maps.LatLng(55.864237,-4.251806);
var destinationN = new google.maps.LatLng(51.92442,4.477733);

function calculateDistances() {
  var service = new google.maps.DistanceMatrixService();
  service.getDistanceMatrix(
    {
      origins: [origin],
      destinations: [destinationA, destinationB,destinationC, destinationD,destinationE, destinationF,destinationG, destinationH,destinationI, destinationJ,destinationK, destinationL, destinationM, destinationN],
      travelMode: google.maps.TravelMode.DRIVING,
      unitSystem: google.maps.UnitSystem.METRIC,
      avoidHighways: false,
      avoidTolls: false
    }, callback);
}

javascript google-maps google-maps-api-3

Answer 1

Answer №1

The issue with the OVER_QUERY_ERROR is originating from the geocoder, not the DistanceMatrix call itself. To resolve this problem, you need to remove the following line of code:

addMarker(destinations[j], true);

(since you already have the coordinates for the markers, there's no need for the geocoder)

Here is the corrected code snippet:

var map;
var geocoder;
var bounds = new google.maps.LatLngBounds();
var markersArray = [];

var origin = new google.maps.LatLng(55.930, -3.118);
var origin2 = 'Greenwich, England';
var destinationA = new google.maps.LatLng(45.465422, 9.185924);
var destinationB = new google.maps.LatLng(41.385064, 2.173403);
var destinationC = new google.maps.LatLng(40.416775, -3.70379);
var destinationD = new google.maps.LatLng(51.507351, -0.127758);
var destinationE = new google.maps.LatLng(48.856614, 2.352222);
var destinationF = new google.maps.LatLng(41.902784, 12.496366);
var destinationG = new google.maps.LatLng(50.85034, 4.35171);
var destinationH = new google.maps.LatLng(46.198392, 6.142296);
var destinationI = new google.maps.LatLng(47.36865, 8.539183);
var destinationJ = new google.maps.LatLng(53.408371, -2.991573);
var destinationK = new google.maps.LatLng(37.389092, -5.984459);
var destinationL = new google.maps.LatLng(53.349805, -6.26031);
var destinationM = new google.maps.LatLng(55.864237, -4.251806);
var destinationN = new google.maps.LatLng(51.92442, 4.477733);

var destinationIcon = 'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=D|FF0000|000000';
var originIcon = 'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=O|FFFF00|000000';

function initialize() {
  var opts = {
    center: new google.maps.LatLng(55.53, 9.4),
    zoom: 10
  };
  map = new google.maps.Map(document.getElementById('map-canvas'), opts);
  geocoder = new google.maps.Geocoder();
}

function calculateDistances() {
  deleteOverlays();
  var destinations = [destinationA, destinationB, destinationC, destinationD, destinationE, destinationF, destinationG, destinationH, destinationI, destinationJ, destinationK, destinationL, destinationM, destinationN];
  for (var i = 0; i < destinations.length; i++) {
    bounds.extend(destinations[i]);
    var marker = new google.maps.Marker({
      map: map,
      position: destinations[i],
      icon: destinationIcon
    });
    markersArray.push(marker);
  }
  map.fitBounds(bounds);
  var service = new google.maps.DistanceMatrixService();
  service.getDistanceMatrix({
    origins: [origin],
    destinations: destinations,
    travelMode: google.maps.TravelMode.DRIVING,
    unitSystem: google.maps.UnitSystem.METRIC,
    avoidHighways: false,
    avoidTolls: false
  }, callback);

}

function callback(response, status) {
  if (status != google.maps.DistanceMatrixStatus.OK) {
    alert('An error occurred: ' + status);
  } else {
    var origins = response.originAddresses;
    var destinations = response.destinationAddresses;
    var outputDiv = document.getElementById('outputDiv');
    outputDiv.innerHTML = '';

    for (var i = 0; i < origins.length; i++) {
      var results = response.rows[i].elements;
      addMarker(origins[i], false);
      for (var j = 0; j < results.length; j++) {
        // addMarker(destinations[j], true);
        outputDiv.innerHTML += "<b>"+j+":</b>"+origins[i] + ' to ' + destinations[j] + ': ' + results[j].distance.text + ' in ' + results[j].duration.text + '<br>';
      }
    }
  }
}

function addMarker(location, isDestination) {
  var icon;
  if (isDestination) {
    icon = destinationIcon;
  } else {
    icon = originIcon;
  }
  geocoder.geocode({
    'address': location
  }, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      bounds.extend(results[0].geometry.location);
      map.fitBounds(bounds);
      var marker = new google.maps.Marker({
        map: map,
        position: results[0].geometry.location,
        icon: icon
      });
      markersArray.push(marker);
    } else {
      alert('Geocoding was unsuccessful due to: ' + status);
    }
  });
}

function deleteOverlays() {
  for (var i = 0; i < markersArray.length; i++) {
    markersArray[i].setMap(null);
  }
  markersArray = [];
}

google.maps.event.addDomListener(window, 'load', initialize);

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#map-canvas {
  height: 100%;
  width: 50%;
}
#content-pane {
  float: right;
  width: 48%;
  padding-left: 2%;
}
#outputDiv {
  font-size: 11px;
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<p>
  <button type="button" onclick="calculateDistances();">Calculate distances</button>
</p>
</div>
<div id="outputDiv"></div>
</div>
<div id="map-canvas"></div>

Answer 2

The issue with the OVER_QUERY_ERROR is originating from the geocoder, not the DistanceMatrix call itself. To resolve this problem, you need to remove the following line of code:

addMarker(destinations[j], true);

(since you already have the coordinates for the markers, there's no need for the geocoder)

Here is the corrected code snippet:

var map;
var geocoder;
var bounds = new google.maps.LatLngBounds();
var markersArray = [];

var origin = new google.maps.LatLng(55.930, -3.118);
var origin2 = 'Greenwich, England';
var destinationA = new google.maps.LatLng(45.465422, 9.185924);
var destinationB = new google.maps.LatLng(41.385064, 2.173403);
var destinationC = new google.maps.LatLng(40.416775, -3.70379);
var destinationD = new google.maps.LatLng(51.507351, -0.127758);
var destinationE = new google.maps.LatLng(48.856614, 2.352222);
var destinationF = new google.maps.LatLng(41.902784, 12.496366);
var destinationG = new google.maps.LatLng(50.85034, 4.35171);
var destinationH = new google.maps.LatLng(46.198392, 6.142296);
var destinationI = new google.maps.LatLng(47.36865, 8.539183);
var destinationJ = new google.maps.LatLng(53.408371, -2.991573);
var destinationK = new google.maps.LatLng(37.389092, -5.984459);
var destinationL = new google.maps.LatLng(53.349805, -6.26031);
var destinationM = new google.maps.LatLng(55.864237, -4.251806);
var destinationN = new google.maps.LatLng(51.92442, 4.477733);

var destinationIcon = 'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=D|FF0000|000000';
var originIcon = 'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=O|FFFF00|000000';

function initialize() {
  var opts = {
    center: new google.maps.LatLng(55.53, 9.4),
    zoom: 10
  };
  map = new google.maps.Map(document.getElementById('map-canvas'), opts);
  geocoder = new google.maps.Geocoder();
}

function calculateDistances() {
  deleteOverlays();
  var destinations = [destinationA, destinationB, destinationC, destinationD, destinationE, destinationF, destinationG, destinationH, destinationI, destinationJ, destinationK, destinationL, destinationM, destinationN];
  for (var i = 0; i < destinations.length; i++) {
    bounds.extend(destinations[i]);
    var marker = new google.maps.Marker({
      map: map,
      position: destinations[i],
      icon: destinationIcon
    });
    markersArray.push(marker);
  }
  map.fitBounds(bounds);
  var service = new google.maps.DistanceMatrixService();
  service.getDistanceMatrix({
    origins: [origin],
    destinations: destinations,
    travelMode: google.maps.TravelMode.DRIVING,
    unitSystem: google.maps.UnitSystem.METRIC,
    avoidHighways: false,
    avoidTolls: false
  }, callback);

}

function callback(response, status) {
  if (status != google.maps.DistanceMatrixStatus.OK) {
    alert('An error occurred: ' + status);
  } else {
    var origins = response.originAddresses;
    var destinations = response.destinationAddresses;
    var outputDiv = document.getElementById('outputDiv');
    outputDiv.innerHTML = '';

    for (var i = 0; i < origins.length; i++) {
      var results = response.rows[i].elements;
      addMarker(origins[i], false);
      for (var j = 0; j < results.length; j++) {
        // addMarker(destinations[j], true);
        outputDiv.innerHTML += "<b>"+j+":</b>"+origins[i] + ' to ' + destinations[j] + ': ' + results[j].distance.text + ' in ' + results[j].duration.text + '<br>';
      }
    }
  }
}

function addMarker(location, isDestination) {
  var icon;
  if (isDestination) {
    icon = destinationIcon;
  } else {
    icon = originIcon;
  }
  geocoder.geocode({
    'address': location
  }, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      bounds.extend(results[0].geometry.location);
      map.fitBounds(bounds);
      var marker = new google.maps.Marker({
        map: map,
        position: results[0].geometry.location,
        icon: icon
      });
      markersArray.push(marker);
    } else {
      alert('Geocoding was unsuccessful due to: ' + status);
    }
  });
}

function deleteOverlays() {
  for (var i = 0; i < markersArray.length; i++) {
    markersArray[i].setMap(null);
  }
  markersArray = [];
}

google.maps.event.addDomListener(window, 'load', initialize);

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#map-canvas {
  height: 100%;
  width: 50%;
}
#content-pane {
  float: right;
  width: 48%;
  padding-left: 2%;
}
#outputDiv {
  font-size: 11px;
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<p>
  <button type="button" onclick="calculateDistances();">Calculate distances</button>
</p>
</div>
<div id="outputDiv"></div>
</div>
<div id="map-canvas"></div>

Exceeded Limit: Google Maps API cannot process more than 10 destinations at this time

Answer №1

Similar questions

There seems to be an issue with the React 15 setState function not working on

Where is the appropriate location to insert a <script> tag in NextJs?

In what way are these columns altering their layout without the use of JavaScript?

Angularjs: The Art of Loading Modules

Creating a personalized pivot-table using the WebDataRock Javascript library with a unique configuration based on a

Receiving feedback from an Ajax request

Ways to retrieve an element from an array

What is the best way to stop Quasar dropdown list from moving along with the page scroll?

Empty jQuery $.ajax value after post

Issue: The function "generateActiveToken" is not recognized as a function

Issues with validating the Google Maps API JavaScript tag

Creating a custom autocomplete search using Angular's pipes and input

What are the advantages of using Yarn instead of NPM? Understanding the distinctions between the two package managers

Experiencing an anonymous condition post onChange event in a file input of type file - ReactJS

Imagine a complex JSON structure with multiple levels of nesting

How come I don't have to specify the relative path in my HTML file to include a JavaScript file when using Express JS?

What could be causing my dropdown links to malfunction on the desktop version?

Display thumbnail images in jquery-ui dropdown menu

"An error has occurred: ENOENT - The specified file or directory does not exist, cannot create directory" on the live website

MUI-Datatable: Is there a way to show the total sum of all the values in a column at once