「東京駅」から「六本木ヒルズ」までルートを検索し、右カラムにルート検索結果を表示します。 出発地点A・到着地点Bのマーカーをドラッグすると、それぞれの地点を変更されます。右カラムにあるボタンでルートの表示・非表示、プルダウンでトラベルモード（自動車、自転車、電車、徒歩）を切り替えられます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>設置サンプル - GMAPv3 - Directions - 2地点間のルート検索</title>
<link rel="stylesheet" type="text/css" href="/content/css/gmapv3.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
$(function(){
var renderFLG=false;
var directionsDisplay;
var directionsService=new google.maps.DirectionsService();
var map,mode;
var currentDirections=null;
var startSpot="東京駅";
var endSpot="六本木ヒルズ";
initialize();
/* 地図初期化 */
function initialize() {
var myOptions={
zoom:14,
center: new google.maps.LatLng(35.670236,139.749832),//虎の門
mapTypeId: google.maps.MapTypeId.ROADMAP
}
/* 地図オブジェクト生成 */
map=new google.maps.Map(document.getElementById("map"), myOptions);
if(!renderFLG) render();
calcRoute(startSpot,endSpot);
}
/* ルート検索結果を描画 */
function render(){
dbg("render:"+renderFLG);
renderFLG=true;
/* ルートをレンダリング */
directionsDisplay=new google.maps.DirectionsRenderer({
"map": map,
"preserveViewport": true,
"draggable": true
});
/* 右カラムにルート表示 */
directionsDisplay.setPanel(document.getElementById("directions_panel"));
/* 出発地点・到着地点マーカーが移動された時 */
google.maps.event.addListener(directionsDisplay, 'directions_changed',function() {
currentDirections=directionsDisplay.getDirections();
var route=currentDirections.routes[0];
var s="";
for(var i=0; i<route.legs.length; i++) {
var routeSegment=i+1;
s+=route.legs[i].start_address+'to';
s+=route.legs[i].end_address+'\n';
s+=route.legs[i].distance.text;
}
dbg("directions_changed:"+s);
});
}
/* モード変更 */
$("#mode").bind("change",function(){
$(".button-group button").removeClass("active");
calcRoute(startSpot,endSpot);
$("#show").addClass("active");
});
/* ルート算出 */
function calcRoute(startSpot,endSpot){
switch($("#mode").val()){
case "driving":
mode=google.maps.DirectionsTravelMode.DRIVING;
break;
case "bicycling":
mode=google.maps.DirectionsTravelMode.BICYCLING;
break;
case "transit":
mode=google.maps.DirectionsTravelMode.TRANSIT;
break;
case "walking":
mode=google.maps.DirectionsTravelMode.WALKING;
break;
}
if(!renderFLG) render();
var request={
origin:startSpot, /* 出発地点 */
destination:endSpot, /* 到着地点 */
travelMode:mode /* 交通手段 */
};
/* ルート描画 */
directionsService.route(request, function(response, status) {
if (status==google.maps.DirectionsStatus.OK) {
dbg(response);
directionsDisplay.setDirections(response);
}else{
dbg("status:"+status);
}
});
}
/* ルート表示・非表示切り替え */
$(".button-group button").click(function(e){
$(".button-group button").removeClass("active");
var id=$(this).attr("id");
if(id=="show"){
calcRoute(startSpot,endSpot);
$(this).addClass("active");
}else{
$(this).addClass("active");
reset();
}
});
/* ルート削除 */
function reset(){
currentDirections=null;
directionsDisplay.setMap(null);
renderFLG=false;
}
});
var dbg=function(str){
try{
if(window.console && console.log){
console.log(str);
}
}catch(err){
//alert("error:"+err);
}
}
</script>
<style>
#map { float:left; width:70%; height:100%; }
#side { float:right; width:30%; height:100%; }
#side .inner { padding:10px; overflow:auto; }
</style>
<link rel="stylesheet" type="text/css" href="/common/css/example.css"></head>
<body id='example3' class='example'><div class="ads" style="margin:32px auto;text-align:center;"></div><h1 class='h'><a href='/'>PHP & JavaScript Room</a> :: 設置サンプル</h1>
<h3 class='h'>実行結果</h3>
<h1>設置サンプル - GMAPv3 - Directions - 2地点間のルート検索</h2>
<p>「東京駅」から「六本木ヒルズ」までルートを検索し、右カラムにルート検索結果を表示します。 出発地点A・到着地点Bのマーカーをドラッグすると、それぞれの地点を変更されます。右カラムにあるボタンでルートの表示・非表示、プルダウンでトラベルモード（自動車、自転車、電車、徒歩）を切り替えられます。</p>
<div id="map"><!-- 地図の埋め込み表示 --></div>
<div id="side">
<div class="inner">
<p>
<label for="mode">モード：<select id="mode" name="mode">
<option value="driving" selected>DRIVING（自動車）</option>
<option value="bicycling">BICYCLING （自転車）</option>
<option value="transit">TRANSIT（電車）</option>
<option value="walking">WALKING（徒歩）</option>
</select></label>
</p>
<div class="button-group">
<button id="show" class="button active">ルート表示</button>
<button id="hide" class="button">ルート非表示</button>
</div>
<div id="directions_panel" style="width:100%"></div>
</div>
</div><!-- #side -->
<br clear="all" />
</body>
</html>