次のコードがあります。
<script>
var rendererOptions = {
draggable: false
};
var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);;
var directionsService = new google.maps.DirectionsService();
var map;
var England = new google.maps.LatLng(53.7415, 1.6860);
function initialize() {
var mapOptions = {
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: England
};
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
map.setTilt(45);
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: 'postcode',
destination: 'postcode',
waypoints:[{location: 'waypoint postcode'}, {location: 'waypoint postcode'}, {location: 'waypoint postcode'}],
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 myroute = result.routes[0];
for (i = 0; i < myroute.legs.length; i++) {
total += myroute.legs[i].distance.value;
}
total = total / 1000.
document.getElementById('total').innerHTML = total + ' km';
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="float:left;width:70%; height:100%"></div>
<div id="directionsPanel" style="float:right;width:30%;height 100%">
<p>Total Distance: <span id="total"></span></p>
</div>
マップには、Google API の方向サービスを使用して、出発地と目的地が途中にある特定のウェイポイントとともに表示されます。ルート案内パネルには、すべての距離がメートル単位で表示されます。すべての距離がマイル、フィートなどの帝国単位で表示されるようにするにはどうすればよいですか?