ImadBakir ImadBakir - 6 months ago 17
Javascript Question

Google maps API getting drive time and road

I'm trying to achieve something like the following in the image
enter image description here

but Actually I don't have any Idea if it's possible or how and where to start.
so if you can please lead me if it's possible or not, and how to achieve it or where to start
or if anyone knows a similar online working example it would be great
thanks in advance

Answer

I found the answer myself, yes it's possible thanks to jfvanderwalt for the useful link of google Docs for Direction API which led me to the working example of what I need and how to do it , here is my working demo example Javascript :

    <script>

var rendererOptions = {
  draggable: true
};
var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);;
var directionsService = new google.maps.DirectionsService();
var map;

var australia = new google.maps.LatLng(41.171418,28.311553);

function initialize() {

  var mapOptions = {
    zoom: 4,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: australia
  };
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  directionsDisplay.setMap(map);
  directionsDisplay.setPanel(document.getElementById('directionsPanel'));

  google.maps.event.addListener(directionsDisplay, 'directions_changed', function() {
    computeTotalDistance(directionsDisplay.directions);
  });

  calcRoute();
}

function calcRoute() {

  var request = {
    origin: 'Istanbul, Turkey',
    destination: 'Ankara, Turkey',
    travelMode: google.maps.DirectionsTravelMode.DRIVING
  };
  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
    }
  });
}

function computeTotalDistance(result) {
  var total = 0;
  var time= 0;
  var from=0;
  var to=0;
  var myroute = result.routes[0];
  for (var i = 0; i < myroute.legs.length; i++) {
    total += myroute.legs[i].distance.value;
    time +=myroute.legs[i].duration.text;
    from =myroute.legs[i].start_address;
    to =myroute.legs[i].end_address;


  }
  time = time.replace('hours','H');
  time = time.replace('mins','M');
  total = total / 1000.
  document.getElementById('from').innerHTML = from + '-'+to;
  document.getElementById('duration').innerHTML = time ;
  document.getElementById('total').innerHTML =Math.round( total)+"KM" ;
}

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

    </script>

HTML:

<div id="map-canvas" style="margin-left:15px;float:left;width:930px; height:280px"></div>
<div style="float:left;padding-left:20px; padding-top:15px; width:100%; height: 80px;">
<div style="float:left;width: 50%;"><h3 id="from"></h3></div>
<div style="float:right;margin-right: 20px;width: 158px;text-align: right;">
<h3 id="duration"></h3>
</div>
<div style="float:right;width: 158px;text-align: right;">

Comments