9月 14

技術メモです。興味の人はスルーで。

Google Map Java Script Version 3 でルートマップを書く時のwaitpointsの使い方です。

Google のドキュメントには

DirectionsWaypoint オブジェクトの仕様

DirectionsWaypoint は、旅程の途中で立ち寄る出発地点と到着地点間の場所を示します。
プロパティ

プロパティ タイプ 説明
Location LatLng | string ウェイポイントの場所。住所文字列または LatLng を指定できます。省略可能です。
 stopover  boolean true の場合、このウェイポイントは出発地点と到着地点間の停止地点であることを示します。これにより、ルートが 2 つに分割されます。この値はデフォルトで true です。省略可能です。

とあります。

上記の「location」はLatLng と string が指定可能。

LatLngの実際の書き方は

new google.maps.LatLng(36.68579,138.774447)

のようになります。

string は、google map に登録されている名称なら解析をしてくれる。

具体的なコードは以下のようになる。

	var start = "横浜駅";
	var end = "横浜駅";
	var request = {
		origin:start,
		destination:end,
		waypoints: [
			{location:"中之条駅,日本", stopover:true},
			{location:new google.maps.LatLng(36.68579,138.774447),stopover:true},
			{location:"長岡駅,日本",stopover:true},
			{location:"新津駅,日本",stopover:true},
			{location:"喜多方駅,日本",stopover:true},
			{location:"米沢駅,日本",stopover:true}
		],
		travelMode: google.maps.DirectionsTravelMode.DRIVING
	};

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

これを実際に表示すると

Google Maps JavaScript API v3 Example: Directions Simple_1315984275770

とまあ、こんな感じで waitpoints をふやせば、実際にドライブした経路を表示出来るようになりますな。

上記のコードだけでは動かないので実際に動くコードも書いておきます。






Google Maps JavaScript API v3 Example: Directions Simple





という感じです。

preload preload preload