google map – Directions – 2地点間のルート検索

google map APIを使うとgoogle mapの2つ地点間のルートをgoogle map上に表示することができます。この機能を使えば、ホームページ上で、最寄駅から該当する建物までの案内図を簡単に作ることができます。

次のサンプルは「横浜駅」から「洋服会館」までルートを検索して表示します。
2地点間のルート検索サンプル
ソースコード(開く

<script type="text/javascript">
$(function(){
  var renderFLG=false;
  var directionsDisplay;
  var directionsService=new google.maps.DirectionsService();
  var map;
  var mode;
  var currentDirections=null;
  var startSpot="横浜駅";
  var endSpot="神奈川県洋服会館";

  initialize();

  /* 地図初期化 */
  function initialize() {
    var myOptions={
      zoom:14,
      center: new google.maps.LatLng(35.466255, 139.622205), //横浜駅
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    /* 地図オブジェクト生成 */
    map=new google.maps.Map(document.getElementById("map"), myOptions);
    if(!renderFLG){
      render();
    }
    calcRoute(startSpot,endSpot); 
  }

  /* ルート検索結果を描画 */
  function render(){
    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;
      }
    });
  }
  /* モード変更 */
  $("#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 "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) {
        directionsDisplay.setDirections(response);
      }
    });
  }
  /* ルート表示・非表示切り替え */
  $(".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;
  }
});
</script>