都内のお買いものスポットのルートを検索し、右カラムにルート検索結果を表示します。マーカーをドラッグすると、それぞれの地点を変更されます。右カラムにあるボタンでルートの表示・非表示、プルダウンでトラベルモード(自動車、自転車、電車、徒歩)を切り替えられます。
<!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(){ /* waypts(最大8か所) */ var ary=[ "東京ソラマチ", "お台場", "東京ミッドタウン", "六本木ヒルズ", "赤坂サカス", "恵比寿ガーデンプレイス", "表参道ヒルズ", "渋谷ヒカリエ" ]; var waypts=[]; for (var i=0; i<ary.length; i++) { waypts.push({ location:ary[i], stopover:true }); } var renderFLG=false; var directionsDisplay; var directionsService=new google.maps.DirectionsService(); var map,mode; var oldDirections=[]; var currentDirections=null; var defaultStartSpot="東京駅"; var defaultEndSpot="品川駅"; var curStartSpot,curEndSpot; initialize(); /* 地図初期化 */ function initialize() { var myOptions={ zoom:12, center: new google.maps.LatLng(35.654071,139.749838),//芝公園 mapTypeId: google.maps.MapTypeId.ROADMAP } /* 地図オブジェクト生成 */ map=new google.maps.Map(document.getElementById("map"), myOptions); if(!renderFLG) render(); $("#roots").empty(); var s=""; for(var i=0; i<ary.length; i++){ if(i==0){ start=defaultStartSpot; end=ary[i]; }else if(i==(ary.length-1)){ start=ary[i]; end=defaultEndSpot; }else{ start=ary[i]; end=ary[i+1]; } s+="<li><a href='#' rel='"+start+"==="+end+"'>"+start+"==="+end+"</a></li>"; } $("#roots").empty().append(s); curStartSpot=defaultStartSpot; curEndSpot=defaultEndSpot; calcRoute(); } /* ルート検索結果を描画 */ 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(); $("#show").addClass("active"); }); /* ルート算出 */ function calcRoute(){ 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(); if(curStartSpot==defaultStartSpot && curEndSpot==defaultEndSpot){ console.log("全ルート"); //全ルート _waypts=waypts; }else{ //一部ルート _waypts=[]; } var request={ waypoints:_waypts, optimizeWaypoints:true, origin:curStartSpot, /* 出発地点 */ destination:curEndSpot, /* 到着地点 */ travelMode:mode /* 交通手段 */ }; /* ルート描画 */ directionsService.route(request, function(response, status) { dbg(response); if (status==google.maps.DirectionsStatus.OK) { directionsDisplay.setDirections(response); }else{ alert("その交通手段はリクエスト結果がありません\nstatus:"+status); } }); } /* 区間を選択した時 */ $("#roots").on("click","a",function(e){ var rel=$(this).attr("rel").split("==="); curStartSpot=rel[0]; curEndSpot=rel[1]; calcRoute(); return false; }); /* ルート表示・非表示切り替え */ $(".button-group button").click(function(e){ $(".button-group button").removeClass("active"); var id=$(this).attr("id"); if(id=="show"){ calcRoute(); $(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>都内のお買いものスポットのルートを検索し、右カラムにルート検索結果を表示します。マーカーをドラッグすると、それぞれの地点を変更されます。右カラムにあるボタンでルートの表示・非表示、プルダウンでトラベルモード(自動車、自転車、電車、徒歩)を切り替えられます。</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> <ol id="roots"> </ol> <div id="directions_panel" style="width:100%"></div> </div> </div><!-- #side --> <br clear="all" /> </body> </html>