複数のルートを同時にレンダリングすることはできません。私はこのようなものを作った。一度に1つの方向しか示していなかったが、ユーザーがテーブル内の異なる目的地をクリックすると、そのたびに方向が更新された。
<!DOCTYPE html>
<html>
<head>
<title>Driving directions between markers</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=geometry&sensor=false"></script>
<script type="text/javascript">
var directionsService = new google.maps.DirectionsService();
var directionsDisplay;
var arrLatLon = [];
var homeLatlng;
var destinationID;
function initialize() {
homeLatlng = new google.maps.LatLng(54.42838,-2.9623);
var myOptions = {
zoom: 10,
center: homeLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var infowindow = new google.maps.InfoWindow({
content: ''
});
directionsDisplay = new google.maps.DirectionsRenderer({
draggable: true,
map: map,
markerOptions: {
draggable: true
},
panel: document.getElementById("directionsPanel"),
infoWindow: infowindow
});
var i, row;
var len = 4;
row = 1;
arrLatLon[row] = new google.maps.LatLng(54.60039,-3.13632);
row = 2;
arrLatLon[row] = new google.maps.LatLng(54.36897,-3.07561);
row = 3;
arrLatLon[row] = new google.maps.LatLng(54.5003526,-3.0844116);
row = 4;
arrLatLon[row] = new google.maps.LatLng(54.57723,-2.79748);
google.maps.event.addListener(directionsDisplay, 'directions_changed', function() {
computeTotalDistance(directionsDisplay.directions);
});
// only seems possible to display 1 directions at a time?
calcRoute(1);
}
function calcRoute(id) {
var selectedMode = document.getElementById("mode").value;
var selectedUnits = document.getElementById("units").value;
if(typeof(id) != "undefined"){
destinationID = id;
}
var request = {
origin:homeLatlng,
destination:arrLatLon[destinationID],
travelMode: google.maps.DirectionsTravelMode[selectedMode],
unitSystem: google.maps.UnitSystem[selectedUnits]
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
}
function computeTotalDistance(result) {
var total = 0;
var myroute = result.routes[0];
for (i = 0; i < myroute.legs.length; i++) {
total += myroute.legs[i].distance.value;
}
total = total/1000;
var selectedUnits = document.getElementById("units").value;
if (selectedUnits == "IMPERIAL") {
document.getElementById("total").innerHTML = (Math.round((total* 0.6214)*100)/100) + " miles";
} else {
document.getElementById("total").innerHTML = total + " kilometres";
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map_canvas" style="float:left;width:70%;height:60%"></div>
<div id="directionsPanel" style="float:right;width:30%;height:60%"></div>
<p>Total Distance: <span id="total"></span></p>
<h2>Use the map below to see destinations near Ambleside</h2>
<h3>More destinations near Ambleside</h3>
<table id="tableNeighbours" border="1">
<tr>
<th>Destination</th>
<th colspan="2">Distance from Ambleside</th>
</tr>
<tr>
<td><a href="#" onclick="calcRoute(1); return false;">Keswick</a></td>
<td>22.2 kilometres</td>
<td>13.8 miles</td>
</tr>
<tr>
<td><a href="#" onclick="calcRoute(2); return false;">Coniston</a></td>
<td> 9.9 kilometres</td>
<td> 6.2 miles</td>
</tr>
<tr>
<td><a href="#" onclick="calcRoute(3); return false;">Lake District</a></td>
<td>11.3 kilometres</td>
<td> 7.0 miles</td>
</tr>
<tr>
<td><a href="#" onclick="calcRoute(4); return false;">Cumbria</a></td>
<td>19.7 kilometres</td>
<td>12.2 miles</td>
</tr>
</table>
<div>
<strong>Mode of Travel: </strong>
<select id="mode" onchange="calcRoute()">
<option value="DRIVING" selected="selected">Driving</option>
<option value="WALKING">Walking</option>
</select>
</div>
<div>
<strong>Measurement units: </strong>
<select id="units" onchange="calcRoute()">
<option value="IMPERIAL" selected="selected">Miles</option>
<option value="METRIC ">Kilometres</option>
</select>
</div>
</body>
</html>
特にあなたが達成しようとしていることは不明です。ルートを視覚化する?何かを計算する?道順を表示しますか? – dmitry