【Google Map API】
Google Maps ルート検索を応用して終点を固定してみました。
http://rara.mods.jp/map_0905/map6
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Google Maps ルート検索</title>
<style>
div#map_canvas {
width:700px;
height:500px;
}
div#container {
margin:40px;
}
.box {
display:none;
}
.map {
font-size:30px;
}
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="mapdrow1.js"></script>
</head>
<body onload="initialize();">
<div id="container">
<h1>Google Maps ルート検索</h1>
<p>テキストフィールドに始点と終点を入力すると、ルート検索を行います。</p>
<p class="map">
始点：<input type="text" name="start" id="start" size="12" maxlength="100">
終点：ちとよってこ屋<span class="box"><input type="text" name="end" id="end" size="12" maxlength="100"></span>
</p>
<p>
<input type="button" value="検索" onclick="searchRoute()" />
</p>
<div id="map_canvas"></div>
</div>
</body>
</html>// JavaScript Document
var map;
var directionsRenderer;
var directions;
var err = google.maps.DirectionsStatus;
var directionsErr = new Array();
directionsErr[err.INVALID_REQUEST] = "指定された DirectionsRequest が無効です。";
directionsErr[err.MAX_WAYPOINTS_EXCEEDED] = "DirectionsRequest に指定された DirectionsWaypoint が多すぎます。ウェイポイントの最大許容数は 8 に出発地点と到着地点を加えた数です。";
directionsErr[err.NOT_FOUND] = "出発地点、到着地点、ウェイポイントのうち、少なくとも 1 つがジオコード化できませんでした。";
directionsErr[err.OVER_QUERY_LIMIT] = "ウェブページは、短期間にリクエストの制限回数を超えました。";
directionsErr[err.REQUEST_DENIED] = "ウェブページではルート サービスを使用できません。";
directionsErr[err.UNKNOWN_ERROR] = "サーバー エラーのため、ルート リクエストを処理できませんでした。もう一度試すと正常に処理される可能性があります。";
directionsErr[err.ZERO_RESULTS] = "出発地点と到着地点間でルートを見つけられませんでした。";
//onload時の処理
function initialize() {
//Google Maps初期設定
var opts = {
zoom:14,
center:new google.maps.LatLng(35.6461402,139.3547749),
mapTypeId:google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas") , opts); //Google Maps作成
//ルートレンダラ生成
directionsRenderer = new google.maps.DirectionsRenderer({
polylineOptions: {
strokeColor: '#FF0000',
strokeWeight: 4,
strokeOpacity: 0.7
}
});
directionsRenderer.setMap(map); //ルートレンダラにマップを関連付け
}
//検索開始
function searchRoute() {
//textboxからの値を取得
var start = document.getElementById("start").value;
var end = document.getElementById("end").value;
var end = new google.maps.LatLng(35.6461402,139.3547749);
//検索設定
directions = new google.maps.DirectionsService(); //ルート生成
//ルートリクエスト
directions.route({
origin:start, //開始地点
destination:end, //終了地点
travelMode:google.maps.DirectionsTravelMode.DRIVING, //ルートタイプ(車)
avoidHighways:true, //高速道路(使わない)
avoidTolls:true, //有料道路(使わない)
optimizeWaypoints: true, //最適化された最短距離にする。
},
function(results, status) { //ルート結果コールバック関数
if (status == err.OK) { //検索結果がtrueの場合
directionsRenderer.setDirections(results);
} else { //検索結果がfalseの場合
alert(directionsErr[status]);
}
});
}
