移動ルートの取得 (DirectionService)

２地点を指定して、移動ルートを地図上に表示させるサンプルです。今回はサッポロビール園からＪＲ札幌駅まで。行きは早く飲みたいからバスかタクシーで、帰りは酔い覚ましに歩き…ですよね！？

<script type='text/javascript" src="//maps.google.com/maps/api/js?sensor=false"></script>

<div id="map" style="width:740px; height:400px;"><br /></div>
<script type="text/javascript">

  var From = "北海道札幌市東区北七条東9-2-10";
  var To = "札幌駅";

  var myMap = new google.maps.Map(document.getElementById("map"), {
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    scrollwheel: false,
    scaleControl: true
  });

  new google.maps.DirectionsService().route({
    origin: From, 
    destination: To,
    travelMode: google.maps.DirectionsTravelMode.WALKING 
  }, function(result, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      new google.maps.DirectionsRenderer({map: myMap}).setDirections(result);
    }
  });

</script>
  • 上の内容をコピーして、緯度・経度・大きさを変えれば好きな地図を表示できます。
  • 起点を From = "～"、終点を To = "～"で指定します。住所・ランドマーク検索がうまくいっていない場合は、緯度・経度を取得して、下のように設定してください。
<script type="text/javascript" src="//maps.google.com/maps/api/js?sensor=false"></script>

<div id="map" style="width:740px; height:400px;"><br /></div>
<script type="text/javascript">

  var From = new google.maps.LatLng(43.071254, 141.367976); // サッポロビール園
  var To = new google.maps.LatLng(43.068625, 141.350801); // ＪＲ札幌駅

  var myMap = new google.maps.Map(document.getElementById("map"), {
    mapTypeId: google.maps.MapTypeId.ROADMAP, 
    scrollwheel: false,
    scaleControl: true
  });

  new google.maps.DirectionsService().route({
    origin: From, 
    destination: To,
    travelMode: google.maps.DirectionsTravelMode.WALKING 
  }, function(result, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      new google.maps.DirectionsRenderer({map: myMap}).setDirections(result);
    }
  });

</script>
  • え！？ すすきの に寄り道ですか？
  • そうなるとタクシーじゃないでしょうか…。

<script type="text/javascript" src="//maps.google.com/maps/api/js?sensor=false"></script>

<div id="map" style="width:740px; height:400px;"><br /></div>
<script type="text/javascript">

  var From = "北海道札幌市東区北七条東9-2-10"
  var To = "ＪＲ札幌駅"
  var Via = "すすきの駅";

  var myMap = new google.maps.Map(document.getElementById("map"), {
    mapTypeId: google.maps.MapTypeId.ROADMAP, 
    scrollwheel: false,
    scaleControl: true
  });

  new google.maps.DirectionsService().route({
    origin: From, 
    destination: To,
    waypoints: [ { location: Via, stopover: true} ],
    travelMode: google.maps.DirectionsTravelMode.WALKING
  }, function(result, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      new google.maps.DirectionsRenderer({map: myMap}).setDirections(result);
    }
  });

</script>