アシアルの中の人が技術と思いのたけをつづるブログ

GoogleMapsAPIの新機能 ルート検索機能を試してみる

タグ [　 Tech　 GoogleMap　 JavaScript　 ルート検索　 ]
こんにちは。松田です。
GoogleMapsAPIにルート検索機能がついたらしいので試してみました。
英語版では以前から使えたようですが、日本語版での使用が可能になったということらしいです。

http://googlejapan.blogspot.com/2009/06/api.html

使い方は簡単で、今までのコードに少し付け足すだけでルート検索機能を追加することが出来ます。
1. script呼び出しの "v=2" の部分を "v=2.x" に変更
  1. <script src="http://maps.google.com/maps?file=api&v=2.x&key=....
これで今回使用するGDirectionsクラスが使用できるようになります。

2. GDirectionsにGMap2オブジェクトを渡しインスタンスを生成
  1. directions = new GDirections(map);

3. 出発地点と到着地点の「座標」もしくは「地名・名称」を配列に格納
座標の場合はGLatlng型を渡し、地名の場合はそのまま文字列で渡します。
  1. points = [];
  2. points.push(new GLatLng(35.706,139.76)); 
  3. points.push('東京ドーム');

4. 座標、地名の配列をGDirectionsのloadFromWaypointsに渡す
  1. directions.loadFromWaypoints(points);

これで完成です。
コード全体は以下のようになります。
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.   <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
  5.   <title>Google Maps JavaScript API Example</title>  
  6.   <script src="http://maps.google.com/maps?file=api&amp;v=2.x&amp;key=ABQIAAAAbMxmqyfT0_t60Kczi-q5lBSySxmB-uUmG4DOxxXg63OHEaT07BREeBFXvMHRK6Ipn7liRsdLZmNVNA" type="text/javascript"></script>  
  7.   <script type="text/javascript">
  8.   //<![CDATA[
  9.   var map;
  10.   var directions;
  11.   
  12.   function load() {
  13.     if (GBrowserIsCompatible()) {
  14.       map = new GMap2(document.getElementById("map"));
  15.       map.addControl(new GSmallMapControl());
  16.       map.addControl(new GMapTypeControl());
  17.       map.setCenter(new GLatLng(35.706, 139.76), 13);
  18.  
  19.       points = [];
  20.       points.push(new GLatLng(35.706,139.76));
  21.       points.push("東京ドーム");
  22.  
  23.       // ルート詳細を表示する場合は第二引数にdivエレメントを渡す
  24.       directions = new GDirections(map, document.getElementById("route"));
  25.       directions.loadFromWaypoints(points);
  26.     }
  27.  
  28.   }
  29.   //]]>
  30.   </script>
  31. </head>
  32. <body onload="load()" onunload="GUnload()">
  33.   <div id="map" style="width: 500px; height: 300px"></div>
  34.   <div id="route"></div>
  35. </body>
  36. </html>

実行結果はこちらです。


また、以下のようにGDirectionsコンストラクタの第2引数にdivエレメントを渡すとルートの詳細を自動的に表示してくれます。
  1. directions = new GDirections(map, document.getElementById("route"));
これはこっちのページにサンプルを載せておきます。

divを一つ用意するだけでルートの詳細が出るのはうれしいですね。
これが見やすいのかどうかは微妙ですが。


3, 4の部分はloadFromWaypointsの代わりにloadを使った、文字列をまとめて一つ渡すだけの方法もありますが、コードの組みやすさや座標を組み込むことを考えると、loadFromWaypointsだけ覚えておけばいいんじゃないかなーと言う気がします。
  1. directions.load( 
  2.   "from: 東京都文京区本郷3丁目 to: 東京ドーム", 
  3.   { 
  4.     locale: "ja", 
  5.     travelMode: G_TRAVEL_MODE_DRIVING // 交通手段
  6.   } 
  7. ); 
上記の交通手段の選択についてですが、APIでは2種類用意されているように記述されていますが、これが正確に動作しているかどうかは怪しいようです。
ルート検索のAPIについての質問 [Google-Maps-API-Japan]


また、このルート検索機能の仕様として、検索を実行すると開始地点・中継地点・到着地点に緑色のGMarkerが必ずaddOverlayされてしまいます。
自分で生成したマーカーをドラッグさせて開始地点・終了地点を決めるようなスクリプトを作ろうとすると、コイツが邪魔をしてうまくクリック出来なくなってしまうので注意しましょう。
本家にそれをうまく回避したデモがありました。
↓
http://esa.ilmari.googlepages.com/draggabledir.htm

なんにせよ使いどころの多い機能だと思いますので、今後も注目していきたいですね。

コメントフォーム

認証
captcha_key
 

トラックバック

トラックバックURI :

最近の記事