<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Maps TSP</title>
<script src="http://maps.google.com/maps?file=api&v=2&sensor=false" type="text/javascript"></script>
<script type="text/javascript">
function calculate() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setMapType(G_NORMAL_MAP);
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
var directions = new GDirections(map, null);
GEvent.addListener(directions, "error", function() {
var message = document.getElementById("message");
message.appendChild(document.createTextNode(directions.getStatus().code));
message.appendChild(document.createElement("br"));
});
directions.loadFromWaypoints(
toGLatLng(document.getElementById("input").value.split("\n")),
{ locale: "ja_JP" }
);
var message = document.getElementById("message");
message.innerHTML = "";
var minSeconds
= Number.
POSITIVE_INFINITY; var minRoute = null;
var results
= new Array(); enumerate
(document.
getElementById("input").
value.
split("\n"),
new Array(), results
); setInterval(function(){
if (results.length == 0 ) {
return;
}
var array = results.shift();
var directions = new GDirections(null, null);
var route = toPlaceNames(array);
GEvent.addListener(directions, "load", function() {
var message = document.getElementById("message");
message.appendChild(document.createTextNode(directions.getDuration().seconds + "秒(" + directions.getDuration().html + ")" + directions.getDistance().html.replace(" ", "") + ": " + route.join(" ")));
message.appendChild(document.createElement("br"));
if (directions.getDuration().seconds < minSeconds) {
minSeconds = directions.getDuration().seconds;
document.getElementById("output").innerHTML = route.join(" ");
}
});
GEvent.addListener(directions, "error", function() {
var message = document.getElementById("message");
message.appendChild(document.createTextNode(directions.getStatus().code));
message.appendChild(document.createElement("br"));
});
directions.loadFromWaypoints(
toGLatLng(array),
{ locale: "ja_JP" }
);
}, 1000);
}
}
if (GBrowserIsCompatible()) {
GEvent.addDomListener(window, "unload", function() { GUnload(); });
}
function enumerate(inArray, outArray, results) {
if (inArray.length == 0) {
outArray.push(outArray[0]);
results.push(outArray.slice(0));
outArray.pop();
} else {
for (var i = 0; i < inArray.length; i++) {
var value = inArray[i];
outArray.push(value);
inArray.splice(i, 1);
enumerate(inArray, outArray, results);
inArray.splice(i, 0, value);
outArray.pop();
}
}
}
function toPlaceNames(array) {
for (var index in array) {
var items = array[index].split(" ");
ret.push(items[0]);
}
return ret;
}
function toGLatLng(array) {
for (var index in array) {
var items = array[index].split(" ");
ret.push(new GLatLng(items[1], items[2]));
}
return ret;
}
</script>
</head>
<body>
<h1>Maps TSP</h1>
<h2>入力</h2>
<textarea id="input" style="width: 20em; height: 5em;">札幌時計台 43.062603 141.353642
通天閣 34.652554 135.506333
襟裳岬 41.926490 143.246642
京都大学 35.025280 135.780910
旭山動物園 43.768994 142.482248
幕張メッセ 35.646701 140.036654</textarea>
<input type="button" value="計算する" onClick="calculate()"/>
<h2>出力</h2>
<div id="output" style="margin-bottom: 1em;">ここに結果が表示されます。</div>
<div id="map" style="width: 400px; height: 300px; border: 1px solid gray; float: left;">ここに地図が表示されます。</div>
<div id="message" style="margin-left: 400px; padding-left: 1em;">ここにメッセージが表示されます。</div>
</body>
</html>