スポンサードリンク

目的地アイコン(マーカー)をクリックして現在地からのルート検索結果のルートポリライン(Polylines)と距離を表示させる方法/ルート検索API(Direction API)

 ◆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) )をハンドルしてやります。

google.maps.event.addListener(marker, ‘click’, function()
{
calcRoute(latlng) ;
html = “<b>” + name + “</b> <br/>” ;
infoWindow.setContent(html);
infoWindow.open(map,marker);
});

ルート検索の関数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の場合は、必ずm(メートル)で定義されます。詳しくは、ディレクションAPIの日本語リファレンスのこの辺りを読んでください。 kmで今回は表示したいので、distance.valueで得た値を1000で割ってやります。

変数totalは、上記インフォウィンドウのコンテンツとしてvar htmlに記述しておきます。
//◆総距離合計
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 サンプル

◆参照先

◆Google Maps JavaScript API V3

スポンサードリンク

Related Posts
  1. 目的地アイコン(マーカー)をクリックして現在地からのルート検索結果のルートポリラインと距離を表示させる方法のソースを見させてもらったのですが、どこまでがAPI v3 のコードなのかが載っておらず初心者の私にはどうすればできるのかがわかりませんでした。できたらのせてもらえないでしょうか。

  2. @国吉 さん
    私も初心者です。すこしづづトライされてみて下さい。
    さて、参考になればいいのですが、新たなこの記事に希望の?ソースとシンプルなサンプルを用意してありますので参照ください。

  3. @管理人
    私の拙い文章を理解してくださりありがとうございます。これでまた先に進めそうです。Android端末をベースに開発をしているのですが、いかんせん勝手がわからず困り果てていたので本当に助かりました。ありがとうございました。

  4. すいません。”さん”が抜けていますね。本当にありがとうございました。

Leave a Comment


NOTE - You can use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <img localsrc="" alt="">