WordPressにGoogle Maps API V3！

 ◆Google Maps API V3 　目的地アイコン（マーカー）をクリックして現在地からのルート検索結果のルートポリライン（Polylines）と距離を表示

DirectionsRendererオプションの3つの使い方（マーカ削除、ルートポリライン削除、インフォウィンドウの非表示）を覚えたところで、目的の地図を作成していきます。

＜地図構成＞

地図に複数のアイコン（マーカー）を読み込ませておき、それぞれのマーカーをクリックしたら、模擬でセットした現在地アイコンからのルートと距離を表示させます。

1.不要な緑色のディレクションアイコンを消す。

2.現在地を模擬でセット

3.アイコンをクリックしたらルート検索を行う。

4.距離変数を取り出してインフォウィンドウに表示させる

ってなところでしょうか。

デフォルトの地図

この記事で紹介した地図（javascriptのコード内の配列からマーカーデータを読み込んで地図を表示するサンプル）を流用します。

不要な緑色のアイコンを消してルートポリラインだけ残す。

まず、何はともあれディレクション(道案内)サービス用に必要なDirectionsService オブジェクトと、これを使って地図に描画するDirectionsRenderer オブジェクトをセットします。また、緑色のディレクションマーカーが邪魔ですので、suppressMarkersを使って表示されないようにしておきます。

//◆ルート検索
	rendererOptions =
	{
	draggable: false,
	preserveViewport:true

	};
var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
directionsDisplay.suppressMarkers = true;
var directionsService = new google.maps.DirectionsService();

現在地マーカー（模擬）を記述

次に、現在地を示す模擬マーカーを座標上にセットします。実際には、GeoLocationでGPSから取得した座標が入ることになります。

	//◆現在地マーカー
	initialLocation = new google.maps.LatLng(35.80668, 139.75296);
	var ini = new google.maps.Marker(
	{
	position: initialLocation,  //マーカ位置
	map: map,
	title: '現在位置',  //タイトル位置
	draggable:true,  //アイコンの移動の有効無効
	icon: 'http://waox.main.jp/maps/icon/car2.png',//アイコン指定
	animation: google.maps.Animation.DROP
	});

DirectionsRenderer オブジェクトを地図（map）へセット

ルート検索を行う関数function initialize()の中へ 記述します。

 directionsDisplay.setMap(map);

アイコンをクリックしたらルート検索を行う。

マーカのクリックイベントを指定しているイベントリスナーでルート検索の関数（ここではfunction calcRoute(latlng) ）をハンドルしてやります。

ルート検索の関数calcRoute(latlng)内では、direction_changedのイベントリスナーでルート検索の度に距離を収得するための関数computeTotalDistance(result)へハンドルしておきます。

ここで出発点（origin）に現在地の変数initialLocation、目的地（destination）に、変数latlngを指定します。 なお、DirectionsService.route() によりコールされたリターンは、google.maps.DirectionsStatus classで収得することが出来ます。ルートを得られない場合のレスポンスに使います。

//◆ルート検索
function calcRoute(latlng)
{

	google.maps.event.addListener(directionsDisplay, 'directions_changed', function()
	{
	computeTotalDistance(directionsDisplay.directions);　//◆総距離合計
	});
	var request =
	{
	origin: initialLocation,
	destination: latlng,

	travelMode: google.maps.DirectionsTravelMode.DRIVING,//ドライビングモード指定（車）
	unitSystem: google.maps.DirectionsUnitSystem.METRIC,//単位km表示
	optimizeWaypoints: true,//最適化された最短距離にする。
	avoidHighways: false,//trueで高速道路を使用しない
	avoidTolls: false //trueで有料道路を使用しない
	};

	directionsService.route(request, function(response, status)
	{
		if (status == google.maps.DirectionsStatus.OK)
		{
		directionsDisplay.setDirections(response);
		}
	});
}

現在地マーカーから目的地アイコン（マーカー）までの距離を収得する。

ここで最初に覚えておきたいのは、ルート（route）と区間（legs）です。 Direction APIには、次のように書かれています。

routes 配列の各要素に、指定した出発地から目的地までのルートが 1 セットずつ格納されます。ルートには、1 つ以上の legs が含まれています（この数は、ウェイポイントを指定したかどうかによります）。また、ルートには著作権や警告の情報も含まれています。これらの情報は、ユーザーに対してルート情報を表示するときに一緒に表示しなければなりません。 ルートDirections API から返された結果は、routes 配列内に配置されます（JSON の場合）。返す結果がない（たとえば出発地や目的地が存在しない）場合でも、空の routes 配列が返されます（XML レスポンスの場合は、ゼロ個以上の <route> 要素で構成されます）。

従って、下記scriptは、routres[0]の配列のlegs区間配列の合計値距離をdistance.valueで取り出すものになっていることが判ります。 それでは、区間legs の配列内に含まれているdistanceフィールドからvalueで距離を得て、変数totalに格納します。 distanceの形式は、valueまたはtextで、valueの場合は、必ずｍ（メートル）で定義されます。詳しくは、ディレクションAPIの日本語リファレンスのこの辺りを読んでください。 kmで今回は表示したいので、distance.valueで得た値を1000で割ってやります。

//◆総距離合計
function computeTotalDistance(result)
{

total = 0;
var myroute = result.routes[0];
　　　　for (i = 0; i < myroute.legs.length; i++)
　　　　{
　　　　total += myroute.legs[i].distance.value;
　　　　}
　　　　total = total / 1000.
}

これで出来上がりです。

なお、下記コメントがありましたので、本記事に関連して記事を追加しました。また、下記サンプルにiPhone（アイフォン）用を追加。

◆Google Maps JavaScript API V3　サンプル

• 目的地アイコン（マーカー）をクリックして現在地からのルート検索結果のルートポリライン（Polylines）と距離を表示させる

• 今回の地図をベースにiPhone（アイフォン）用のルート検索+距離+高速化を使ったサンプル（2011/09/29）・・・Google Chromeで見てください。

◆参照先

• DirectionsRendererOptions
• Google Directions API
• Draggable Directions

◆Google Maps JavaScript API V3

• Google Maps API v3 目次に戻る

スポンサードリンク