Driving Distance Calculation via Google Maps API

Question

I want to calculate driving distance between given latitudes and longitudes. On my project I'm displaying markers on road. And what I want is to calculate distance between those markers not all of the routes. Can some one explain to me how can I calculate that distance?

I know I should work on DistanceMatrixService but I couldn't figure out how to work on it.

Where I put Markers:

var pointsArray = response.routes[0].overview_path;
for (var i = 0; i < pointsArray.length; i++) {
    var marker = new google.maps.Marker ({
        position:pointsArray[i],
        draggable:false,
        map:map,
        flat:true
    });
}

Answer 1

If the pointsArray comes from the directions service, you can do something like this:

var pointsArray = response.routes[0].overview_path;
for (var i = 0; i < pointsArray.length; i++) {
  var marker = new google.maps.Marker({
    position: pointsArray[i],
    draggable: false,
    map: map,
    flat: true
  });
  markers.push(marker);
  google.maps.event.addListener(marker, 'click', (function (marker, i) {
    return function (evt) {
      var html = "marker #" + i + "<br />";
      if (i != (markers.length - 1)) {
        html += "<a href='javascript: google.maps.event.trigger(markers[" + (i + 1) + "],\"click\");'>next</a>&nbspdist:" + google.maps.geometry.spherical.computeDistanceBetween(markers[i].getPosition(), markers[i + 1].getPosition()).toFixed(2) + " meters<br />";
      }
      if (i !== 0) {
        html += "<a href='javascript: google.maps.event.trigger(markers[" + (i - 1) + "],\"click\");'>prev</a>&nbspdist:" + google.maps.geometry.spherical.computeDistanceBetween(markers[i].getPosition(), markers[i - 1].getPosition()).toFixed(2) + " meters";
      }
      infowindow.setContent(html);
      infowindow.open(map, marker);
    }
  })(marker, i))
}

Another option would be to get the distances out of the directions response.

code snippet:

 var infowindow = new google.maps.InfoWindow(); var markers = []; function initMap() { var directionsService = new google.maps.DirectionsService(); var directionsDisplay = new google.maps.DirectionsRenderer(); var map = new google.maps.Map(document.getElementById('map'), { zoom: 7, center: { lat: 37.4419, lng: -122.1419 } }); directionsDisplay.setMap(map); calculateAndDisplayRoute(new google.maps.LatLng(37.4419, -122.1419), new google.maps.LatLng(37.447597, -122.159582), directionsService, directionsDisplay, map); } function calculateAndDisplayRoute(start, end, directionsService, directionsDisplay, map) { directionsService.route({ origin: start, destination: end, travelMode: google.maps.TravelMode.DRIVING }, function(response, status) { if (status === google.maps.DirectionsStatus.OK) { directionsDisplay.setDirections(response); for (var i = 0; i < markers.length; i++) { markers[i].setMap(null); } markers = []; var pointsArray = response.routes[0].overview_path; for (var i = 0; i < pointsArray.length; i++) { var marker = new google.maps.Marker({ position: pointsArray[i], draggable: false, map: map, flat: true }); markers.push(marker); google.maps.event.addListener(marker, 'click', (function(marker, i) { return function(evt) { var html = "marker #" + i + "<br />"; if (i != (markers.length - 1)) { html += "<a href='javascript: google.maps.event.trigger(markers[" + (i + 1) + "],\\"click\\");'>next</a>&nbspdist:" + google.maps.geometry.spherical.computeDistanceBetween(markers[i].getPosition(), markers[i + 1].getPosition()).toFixed(2) + " meters<br />"; } if (i !== 0) { html += "<a href='javascript: google.maps.event.trigger(markers[" + (i - 1) + "],\\"click\\");'>prev</a>&nbspdist:" + google.maps.geometry.spherical.computeDistanceBetween(markers[i].getPosition(), markers[i - 1].getPosition()).toFixed(2) + " meters"; } infowindow.setContent(html); infowindow.open(map, marker); } })(marker, i)) } } else { alert('Directions request failed due to ' + status); } }); } google.maps.event.addDomListener(window, "load", initMap);

 html, body, #map { height: 100%; width: 100%; margin: 0px; padding: 0px }

 <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script> <div id="map"></div>