CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3
M.Şahin
M.Şahin

Reputation: 37

Driving Distance Calculation via Google Maps API

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
    });
}

Upvotes: 2

Views: 1867

Answers (1)

geocodezip
geocodezip

Reputation: 161404

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>

Upvotes: 1

Related Questions