Hisashi Today

HisashiToday.com

9月 14

【技術メモ】Google Map Java Script API Version3～Route waitpointｓ～

By Hisashi JavaScript, Language, Technology Add comments

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

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);
		}
  });

これを実際に表示すると

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

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

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Directions Simple</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">

var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var map;

function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var center_point = new google.maps.LatLng(36.416126, 139.405518);
var myOptions = {
zoom:7,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: center_point
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
directionsDisplay.setMap(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);
}
});
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:500px; height:380px"></div>
</body>
</html>

という感じです。