GoogleMapsAPIでルート検索してやんよ!!!

タグ：Google Maps

前回、GoogleMapsAPIを使って候補を知りたいキーワード検索で対象エリアの施設情報の表示するサンプルの作成をおこないました。 GoogleMapsAPIでマップで施設検索してやんよ!!! なんかもっと色んな事できるっぽいので、色々やってみます。 今回は「Google Maps JavaScript API v3」を利用しますが、APIキーの取得方法などは色んなサイトで解説がありますので、そちらを参考に。

経由ルートをマップとリスト表示

まずは出発地点と目的地を目指す間に、指定した経由ポイントを巡るルートをマップとリストの２つで表示させるパターン。 実装したデモページはコチラ デモページでは出発地点を池袋駅　⇒　目的地をサンシャインシティとして 経由ポイントとして①コミックとらのあな 池袋店　⇒　②アニメイトカフェ池袋店を経由しながらのルート設定をしています。

APIのリクエスト

<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=【取得したAPIキー】&sensor=false&v=3&language=js" charset="utf-8"></script>

今回はGPSなどの位置センサーを使わないので、scnsorにはfalseを指定。 v=3はAPIのバージョン、言語(language)は日本語(ja)とします

HTML

<div id="map_canvas"></div>
<div id="root_panel"></div>

CSS

html { height: 100%; }
body { height: 100%; margin:0; padding:0; }
#map_canvas { width: 70%; height:100%; float:left; }
#root_panel { width: 30%; height:100%; float:right; overflow: auto; }

JavaScript

	var mayMap;
	
	// マップの初期設定
	function initialize() {
		// Mapクラスのインスタンスを作成（緯度経度は池袋駅に設定）
		var initPos = new google.maps.LatLng(0, 0);
		// 地図のプロパティを設定（倍率、マーカー表示位置、地図の種類）
		var myOptions = {
			center: initPos,
			zoom: 16,
			mapTypeId: google.maps.MapTypeId.ROADMAP
		};
		// #map_canva要素にMapクラスの新しいインスタンスを作成
		myMap = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
		// 経由ルートと各条件を設定
		var request = {
			origin: "池袋駅",	// 出発点
			destination: "サンシャインシティ",	// 目的地
			travelMode: google.maps.DirectionsTravelMode.WALKING,	// 交通手段の設定
			waypoints: [{location: "コミックとらのあな 池袋店"}, {location: "アニメイトカフェ池袋店"}]		// 経由地点
		};
		// DirectionsServiceオブジェクトを使用
		var directions = new google.maps.DirectionsService();
		directions.route(request, result_direction);
	}
	
	// 検索結果を出力
	function result_direction(result, status) {
		if(status == google.maps.DirectionsStatus.OK) {
			var direvtionsPosition = new google.maps.DirectionsRenderer({ map: myMap });
			direvtionsPosition.setDirections(result);
			direvtionsPosition.setPanel(document.getElementById("root_panel"));
		}
	}
		
	// ページ読み込み完了後、Googleマップを表示
	google.maps.event.addDomListener(window, 'load', initialize);

処理の概要

• ・ページの読み込みが完了のタイミングでinitialize関数がnew google.maps.La tLngを使ってMapクラスのインスタンスを作成して、緯度・経度を指定して変数「initPos」に格納します。 初期位置は自動的にジオコーディング(住所や施設名を緯度・経度に変換すること)されるので、0で初期化しています。
• ・変数「mapOptions」に地図のプロパティを設定するコードです。 地図の中心座標を決めるcenterには変数「initPos」（ここでは0）、倍率を表すzoomには16、地図の種類を表すmapTypeldには「ROADMAP」 (標準の道路地図)を指定します。
• ・Mapクラスの新しいインスタンスを作成しています。 idがmap_canvasのdiv要素にdocument.getElementByIdメソッドでアクセスし、mapOptionsで定義した地図のプロパティで初期化します。
• ・変数「request」に検索の条件を指定します originに出発地点である「池袋駅」、destinationに目的地である「サンシャインシティ」を指定しました。交通手段には「WALKING」（徒歩ルート）を指定して、waypointに各経由地を設定します。
• ・ルートを計算を行うDirectionsServiceオブジェクトに条件を入れた変数「request」とルートリストを出力するresult_direction関数を引数に設定します。
• ・ルート検索に成功しているかどうかを判定し、検索結果を表示するためのdirectionsPositionオブジェクトのsetDirectionsメソッドを呼び出してresultを渡し、ルート検索の結果と関連付けます。
• ・地図上にルートが表示され、出発地・経由地・目的地にはマーカーがプロットされます。
• ・root_panel要素に検索条件に関連付けられたルート案内のリストを出力します。

DirectionsTravelModeの種類

サンプルでは都市部でのルートだったので交通手段の指定を徒歩（WALKING）に設定しましたが、DirectionsTravelModeの指定は他にも種類があります。

種類	交通手段
google.maps.DirectionsTravelMode.DRIVING	車でのルート
google.maps.DirectionsTravelMode.BICYCLING	自転車でのルート
google.maps.DirectionsTravelMode.TRANSIT	公共機関を利用したルート
google.maps.DirectionsTravelMode.WALKING	徒歩ルート

経由地点（waypoint）の設定について

経由ポイントを設定する場合、通る順番にカンマで区切って複数の地点を指定することができます。

{location: "○○公園"}, 
{location: "ローソン　○○店"}

また、路地裏にあるポイントなどを設定した場合にマーカーが付き、そのポイントまで到着させてから次のポイントへ目指すようなルートとなりますが stopoverをfalseに指定することで、単に通り過ぎるだけで立ち寄ることのない経由地となり、この場合はマーカーは表示されません

{location: "○○公園", stopover: false}