谷歌地圖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;">