Need to loop through Google Distance Matrix JSON Object Response

Question

Okay, so i have a list of businesses each with it's own div created via DOM (document.create(div)) blah blah blah

div business 1. 12 miles (only shows on first div)
div business 2
div business 3 etc.

I'm using Google's Distance Matrix to calculate the users location to the business they choose. I've been able to get the calculations with my code see below. But the distance only shows up for the first div. I've tried every loop possible and still can't get it to post for each business listing

if you're familiar with this api, use the api link below with your own api Key

and plug in your own coordinates to test code

var latitude = localStorage.getItem("userLocationLat");
var longitude = localStorage.getItem("userLocationLong");

  var service = new google.maps.DistanceMatrixService();
  // build request
  var origin1 = new google.maps.LatLng(latitude, longitude);
  var destinationA = new google.maps.LatLng(bizlatitude, bizlongitude);
          var request = {
            origins: [origin1],
            destinations: [destinationA],
            travelMode: google.maps.TravelMode.DRIVING,
            unitSystem: google.maps.UnitSystem.IMPERIAL,
            avoidHighways: false,
            avoidTolls: false
          }

         
      service.getDistanceMatrix(request).then((response) => {
          for(var i in response.rows){
             document.getElementById('distance').innerHTML = response.rows[0].elements[0].distance.text;

              //test in console
              console.log(response.rows[0].elements[0].distance.text);
          }

in the console.log I would get all calculations listed but when i look at the actual website it only displays the calculation for the first business listing

div business 1. 12 miles (only shows on the first div)
div business 2
div business 3 etc.

Link to Google Distance Matrix Documentation https://developers.google.com/maps/documentation/javascript/distancematrix

Answer 1

I tried reproducing your code by hardcoding 1 origin and multiple destinations.

var origin1 = new google.maps.LatLng(14.5432334, 121.047318);
var destA = new google.maps.LatLng(14.6254827, 121.1244847);
var destB = new google.maps.LatLng(14.5357276, 120.9826392);
var destC = new google.maps.LatLng(14.6680747, 120.9658454);

then I used the same request parameters:

var request = {
        origins: [origin1],
        destinations: [destA, destB, destC],
        travelMode: google.maps.TravelMode.DRIVING,
        unitSystem: google.maps.UnitSystem.IMPERIAL,
        avoidHighways: false,
        avoidTolls: false
      }

I found out that you were not iterating through anything because there seems to be only one result in response.rows.

The array that you need to iterate through is at the response.rows.elements array.

so instead of using for (var i in response.rows) I used for (var i = 0; i < response.rows[0].elements.length; i++) to iterate through the elements array.

also take note that in the document.getElementById(/*divId*/).innerHTML, I used += instead of =. And I believe this is what's causing your problem of not showing the results on the website because it replaces the previous results instead of appending to it. Though I only used one div here.

this is how it looks like in my code:

service.getDistanceMatrix(request).then((response) => {
      for(var i = 0; i < response.rows[0].elements.length; i++){
         document.getElementById('distance').innerHTML += response.rows[0].elements[i].distance.text + '<br />';

         //test in console
         console.log(response.rows[0].elements[i].distance.text);
      }

With this, the results on the console and on the page is now the same. Hope this helps!

here's a code snippet if you want a reference: https://jsbin.com/johijat/6/edit?html,js,output