ImadBakir ImadBakir - 2 years ago 187
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 Source

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 :


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

  google.maps.event.addListener(directionsDisplay, 'directions_changed', function() {


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) {

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



<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 style="float:right;width: 158px;text-align: right;">

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download