谷歌地图API让驾驶时间和道路

Question

我想实现的东西，如图像

在下面，但其实我没有任何想法，如果有可能还是如何和从哪里开始。 所以如果你能请带我，如果有可能与否，以及如何实现它或者从哪里开始 或者如果有谁知道一个类似的网上工作的例子将是巨大的 在此先感谢

Answer 1

，我发现自己的答案，是的，它可能由于jfvanderwalt为google Docs for Direction API有用的链接，导致我的什么，我需要工作实例，以及如何做到这一点，这是我的工作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;">