GoogleMapsAPIでルート検索のよう道筋を表示

スタート地点、ゴール地点、移動手段を指定すると、GoogleMapsAPIの地図上へルート表示できます。

GoogleMapsはデフォルトで最短ルートの道筋をマーキングしてくれるので、
クライアントワークで最寄り駅から目的地までのルートをGoogleMapsで設置するとき、かなり細い路地や、飲み屋街の真ん中を突っ切る表示になってしまうことがあります。
そんなとき応用が効くよう、経由ポイントを設定して道順をカスタマイズする方法もあわせてご紹介します。

まず、地図を表示します。富士山です。

ソースは、前の記事YoutubeやGoogleMapsをリキッド表示にするCSSGoogleMapsAPIで地図を表示GoogleMapsAPIでピンを表示を参考に。

<br />
&lt;div id=&quot;map&quot; class=&quot;map&quot;&gt;<br />
	&lt;div&gt;&lt;/div&gt;<br />
&lt;/div&gt;<br />

<br />
.map {<br />
	position: relative;<br />
	width: 100%;<br />
	height: 0;<br />
	padding: 56.25% 0 0;<br />
}<br />
.map &gt; div {<br />
	position: absolute;<br />
	top: 0;<br />
	left: 0;<br />
	right: 0;<br />
	bottom: 0;<br />
}<br />

<br />
var init = function(){</p>
<p>	var fuji = {<br />
		lat: 35.3605555,<br />
		lng: 138.7277777<br />
	};</p>
<p>	var map = new google.maps.Map(document.getElementById('map'), {<br />
		center: fuji,<br />
		zoom: 8,<br />
		mapTypeId: google.maps.MapTypeId.ROADMAP,<br />
		scrollwheel: false<br />
	});<br />
}<br />
if( window.addEventListener ) {<br />
	window.addEventListener( 'load', init, false );<br />
}<br />
else if( window.attachEvent ) {<br />
	window.attachEvent( 'onload', init);<br />
}<br />
else {<br />
	window.onload = init;<br />
}<br />

目的地までの道筋を表示

富士山から、東京に行くルートを表示してみます。
目的地の緯度経度取得方法は、GoogleMapsAPIで地図を表示をご参考に。

到着地点の緯度経度座標と、道筋を表示するdirectionsDisplay関連の設定を追記しています。

<br />
var init = function(){</p>
<p>	var fuji = {<br />
		lat: 35.3605555,<br />
		lng: 138.7277777<br />
	};<br />
	var tokyo = {<br />
		lat: 35.6813818,<br />
		lng: 139.7660838<br />
	};</p>
<p>	var map = new google.maps.Map(document.getElementById('map'), {<br />
		center: fuji,<br />
		zoom: 8,<br />
		mapTypeId: google.maps.MapTypeId.ROADMAP,<br />
		scrollwheel: false<br />
	});</p>
<p>	var directionsDisplay = new google.maps.DirectionsRenderer({<br />
		map: map, // 対象のGoogleMapsを指定<br />
		suppressMarkers: true<br />
	});<br />
	var directionsService = new google.maps.DirectionsService();<br />
	var request = {<br />
		origin: fuji, // スタート地点:富士山<br />
		destination: tokyo, // ゴール地点:東京<br />
		travelMode: google.maps.TravelMode.WALKING // 移動手段:徒歩<br />
	};<br />
	directionsService.route(request, function(response, status) {<br />
		if (status == google.maps.DirectionsStatus.OK) {<br />
			directionsDisplay.setDirections(response);<br />
		}<br />
	});<br />
}<br />
if( window.addEventListener ) {<br />
	window.addEventListener( 'load', init, false );<br />
}<br />
else if( window.attachEvent ) {<br />
	window.attachEvent( 'onload', init);<br />
}<br />
else {<br />
	window.onload = init;<br />
}<br />

移動手段は、デフォルトでは車モードのDRIVINGになっています。
駅から目的地までの道順などを表示したい場合は、サンプルのようWALKINGで徒歩に設定します。
他のパラメータについては、参考リンクを。

参考:
Directions Service | Google Maps Javascript API | Google Developers

ポイントを経由させる

富士山から、横浜を経由して東京に行くルートに設定してみます。

経由地点の座標と、waypointsのポイント設定を追加しています。
waypointsを追記する際、直前の項目(サンプルではtravelMode)行末のカンマをお忘れなく!

<br />
var init = function(){</p>
<p>	var fuji = {<br />
		lat: 35.3605555,<br />
		lng: 138.7277777<br />
	};<br />
	var tokyo = {<br />
		lat: 35.6813818,<br />
		lng: 139.7660838<br />
	};<br />
	var yokohama = {<br />
		lat: 35.4663415,<br />
		lng: 139.6219444<br />
	};</p>
<p>	var map = new google.maps.Map(document.getElementById('map'), {<br />
		center: fuji,<br />
		zoom: 8,<br />
		mapTypeId: google.maps.MapTypeId.ROADMAP,<br />
		scrollwheel: false<br />
	});<br />
	var directionsDisplay = new google.maps.DirectionsRenderer({<br />
		map: map, // 対象のGoogleMapsを指定<br />
		suppressMarkers: true<br />
	});<br />
	var directionsService = new google.maps.DirectionsService();<br />
	var request = {<br />
		origin: fuji, // スタート地点:富士山<br />
		destination: tokyo, // ゴール地点:東京<br />
		travelMode: google.maps.TravelMode.WALKING, // 移動手段:徒歩<br />
		waypoints: [<br />
			{location: yokohama} // 経由ポイント:横浜<br />
		]<br />
	};<br />
	directionsService.route(request, function(response, status) {<br />
		if (status == google.maps.DirectionsStatus.OK) {<br />
			directionsDisplay.setDirections(response);<br />
		}<br />
	});<br />
}<br />
if( window.addEventListener ) {<br />
	window.addEventListener( 'load', init, false );<br />
}<br />
else if( window.attachEvent ) {<br />
	window.attachEvent( 'onload', init);<br />
}<br />
else {<br />
	window.onload = init;<br />
}<br />

関連記事