Multiple Destinations with Google Distance Matrix Service

Recently I was working on a web application where I needed to have a user enter their zip code and some other pieces of data in a search form. Based upon what they entered, they would be presented with a map — complete with a marker for the zip code value they had entered in the form, as well as markers for the zip codes that returned from the search function based upon what they had selected. For this article, well call it their “Best Matches”.

I didn’t encounter much in the way of guides to do this. The only reference I initially came across was HERE. I started with this because I needed to calculate the distance between multiple zip codes, from one central location and display it back to the user. But that post only had details on how to go from point A to B? More on that later……

Enter Google Distance Matrix

For this we’ll assume that you have the api for google maps, and you also have the api for the distance matrix, which needs to be in the same project on the google developers console.

Continuing on…..

There are 5 functions for displaying the map with markers and calculating the varying distances that are passed in. You can find the code for that HERE . For working with multiple distances, we will be focusing on the calculateDistances() function below.

var zipCode = document.getElementById("zipValueId").value;
function calculateDistances(zipCode, updatedTeacherList) {
    var teacherZips = [];
    origin = zipCode;
for (var i=0; i < updatedTeacherList.length; i++){
      teacherZips.push(updatedTeacherList[i].zipCode.toString());
    }
     console.log(teacherZips);
     console.log(zipCode);
var service = new google.maps.DistanceMatrixService();
    service.getDistanceMatrix(
      {
        origins: [origin],
        destinations: teacherZips,
        travelMode: google.maps.TravelMode.DRIVING,
        unitSystem: google.maps.UnitSystem.IMPERIAL,
        avoidHighways: false,
        avoidTolls: false
      }, calcDistance);
  }

Before the calculateDistances() function starts, I’m capturing the zip entered on the form (zipCode), and I’m also passing in a sorted list that was generated based upon what was entered on the form as well ( updatedTeacherList).

In my database my teachers have zip codes. I’m going to go ahead and create an empty array, loop thru my list and push the zips into there. I’ll also console them for good measure to make sure I’m getting what I expect.

function calculateDistances(zipCode, updatedTeacherList) {
    var teacherZips = [];
    origin = zipCode;
for (var i=0; i < updatedTeacherList.length; i++){
      teacherZips.push(updatedTeacherList[i].zipCode.toString());
    }
     console.log(teacherZips);
     console.log(zipCode);
...

As I push each value, I’m converting them to strings because I found this to give me the most success when the Matrix API was parsing them.

Now I have an array of zip codes that need to be displayed on the map, and they need to get passed into the ‘destinations’ parameter further down in the function. Note that destinations is expecting an ARRAY just like origins is above it.

var service = new google.maps.DistanceMatrixService();
    service.getDistanceMatrix(
      {
        origins: [origin],
        destinations: teacherZips,
        travelMode: google.maps.TravelMode.DRIVING,
        unitSystem: google.maps.UnitSystem.IMPERIAL,
        avoidHighways: false,
        avoidTolls: false
      }, calcDistance);
  }

Luckily teacherZips is an array, so no need to wrap it with [].

And that’s that. Hope that helps when you want to display and calculate multiple distances with google maps and the distance matrix api.

Here’s the final product from a search:

Until next time.