Google Maps APIが国内のルート案内に対応! わずかなコードでルート案内が

ここでの動作環境は次のとおり。

OS: Mac OS X Leopard 10.5.6
Webブラウザ: Firefox 3.5rc2

取得したAPIキーを使って、さっそくGoogle Maps APIを使用したルート案内を作成してみよう。

hello_driving_directions.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>Hello, Driving Directions</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <script src="http://maps.google.com/maps?file=api&v=2.x&sensor=true_or_false&key=(APIキー)" type="text/javascript"></script>
    <script type="text/javascript">
    <!--
    var map;
    var directionsPanel;
    var directions;

    function initialize()
    {
        map = new GMap2(document.getElementById('map_canvas'));
        map.setCenter(new GLatLng(35.68,139.77), 13);
        directionsPanel = document.getElementById('route');
        directions = new GDirections(map, directionsPanel);
        directions.load('from: 渋谷駅 to: 東京駅', { locale: 'ja_JP' } );
    }
    -->
    </script>

  </head>
  <body onload="initialize()" onunload="GUnload()">
    <div id="map_canvas" style="margin-top:30px; width: 300px; height: 300px; float:left;"></div>
    <div id="route" style="width: 300px; height:300px; float:right;"></div>
  </body>
</html>

このコードではおもに次のことをおこなっている。

コード中で最新リリースのAPIを使用することを明示
GMap2で作成した地図オブジェクトmapにsetCenterでデフォルトの表示位置を指定
GDirectionsで作成したルートオブジェクトdirectionsにloadで出発地点(from)と到着地点(to)を指定

上記コードをWebブラウザで表示させる。


Firefoxでの表示。地図と渋谷駅から東京駅へのルート案内が表示された	ルート案内の番号をクリックすると、右左折するポイントの地図が表示される

渋谷駅から東京駅へのルート案内が表示された。ルートオブジェクトを作成するために使用したGDirectionsクラスにはほかにもメソッドが用意されており、さまざまな応用を効かすことができる。たとえばloadの代わりにloadFromWaypointsを使用して経由したい地点を配列で指定すれば、途中経由地点をふくめたルート案内が作成される。ユーザの利用用途において、さまざまな地図とルート案内が作成できるようになっているのだ。

紹介したloadFromWaypointsをもちいて、複数の地点を経由するルート案内を作成してみよう。

hello_driving_directions_2.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>Hello, Driving Directions 2</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <script src="http://maps.google.com/maps?file=api&v=2.x&sensor=true_or_false&key=(APIキー)" type="text/javascript"></script>
    <script type="text/javascript">
    <!--
    var map;
    var directionsPanel;
    var directions;

    function initialize()
    {
        map = new GMap2(document.getElementById('map_canvas'));
        map.setCenter(new GLatLng(35.68,139.77), 13);
        map.addControl(new GLargeMapControl());
        directionsPanel = document.getElementById('route');
        directions = new GDirections(map, directionsPanel);
        directions.loadFromWaypoints(new Array('渋谷駅', '品川駅', '竹橋駅', '東京駅'), { locale: 'ja_JP' } );
    }
    -->
    </script>

  </head>
  <body onload="initialize()" onunload="GUnload()">
    <div id="map_canvas" style="margin-top:30px; width: 300px; height: 300px; float:left;"></div>
    <div id="route" style="width: 300px; height:300px; float:right;"></div>
  </body>
</html>

最初のサンプルである「渋谷駅から東京駅」へのルート案内に加え、途中で品川駅/竹橋駅を経由するように指定をおこなった。指定方法はFrom-Toをふくめたクエリ文字列から、配列を使用した指定に変更している。実際にWebブラウザでアクセスしてみよう。

渋谷駅から品川駅、竹橋駅を経由して東京駅へ向かうルート案内が表示された

渋谷駅から品川駅、竹橋駅を経由して東京駅へ向かうルート案内が表示された。Webアプリケーションの実装用途からちょっとした案内用の地図をつくりたいときにまで、利用用途はさまざまだ。