ルート検索のドライブルートのポリライン（Polylines）を地図に複数個表示させる|Google Maps Directions API V3

## direction-root
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>ルート検索のドライブルートのポリライン（Polylines）を地図に複数個表示させる|Google Maps Directions API V3</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<style>
  #map_canvas {
    height: 500px;
    width: 80%;
    margin: auto;
    padding: 0px
  }
</style>

<script type="text/javascript">

var map;
var infoWindow2;
var mapZoom = 5;
var lat = 35.044624;
var lng = 138.480583;

/*
 初期実行
*/
function initialize() {


	var mapOptions = {
		zoom: mapZoom,
		center: new google.maps.LatLng(lat, lng),
		mapTypeId: google.maps.MapTypeId.ROADMAP,
		mapTypeControl: false
	};

	map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);


	infoWindow2 = new google.maps.InfoWindow({noSupress: true});

	var ary = [
		{
			"start" :  new google.maps.LatLng(35.044624, 138.480583),
			"end" : new google.maps.LatLng(35.200784, 138.662870),
			"icon" : "http://purazumakoi.info/sample/google_maps_api/direction-root/image/car.gif",
			"color" : "#f00"
		},
		{
			"start" :  new google.maps.LatLng(35.178424, 138.676367),
			"end" : new google.maps.LatLng(35.149800, 138.866934),
			"icon" : "http://purazumakoi.info/sample/google_maps_api/direction-root/image/car.gif",
			"color" : "#3a3a91"
		},
		{
			"start" :  new google.maps.LatLng(35.263073, 138.911010),
			"end" : new google.maps.LatLng(35.422982, 139.369972),
			"icon" : "http://purazumakoi.info/sample/google_maps_api/direction-root/image/car.gif",
			"color" : "#ff00ff"
		}
	]


	for(var i in ary){
		fCalcRoute(ary[i]['start'], ary[i]['end'], ary[i]['icon'], ary[i]['color']);
	}

	google.maps.event.addListener(map, 'dragstart', function()
	{
		infoWindow2.close();
	});
}

/*
 拠点間計算、ルート表示
*/
function fCalcRoute(start, end, icon, color) {

	// ルート表示 設定
	rendererOptions = {
		draggable: true,
		preserveViewport: false
	};
	var directionsDisplay =	 new google.maps.DirectionsRenderer(rendererOptions);
	directionsDisplay.setOptions(
			{
				polylineOptions: { strokeColor: color, strokeWeight:3 },
				suppressMarkers :true,
				suppressInfoWindows: true
			});
	var directionsService =	 new google.maps.DirectionsService();

	//通常のマーカー画像
	var signIcon = {
		url: icon,
		size: new google.maps.Size(40,48),
		origin: new google.maps.Point(0,0),
		anchor: new google.maps.Point(20,48),
		scaledSize: new google.maps.Size(40,48)
	};
	// マーカー設定
	var marker = new google.maps.Marker({
		position: start,
		map: map,
		icon: signIcon
	});

	// ルート間 ポイント設定
	var request = {

		origin: start,
		destination: end,
		travelMode: google.maps.DirectionsTravelMode.DRIVING,
		unitSystem: google.maps.DirectionsUnitSystem.METRIC,
		optimizeWaypoints: true,
		avoidHighways: false,	// false → 高速道路使用
		avoidTolls: false	// true →、可能な場合は計算されたルートで有料区間を除外するよう指定します。
	};
	directionsService.route(request,
			function(response,status){
				if (status == google.maps.DirectionsStatus.OK){
					google.maps.event.addListener(marker, 'click', function()
					{
						var distance =   +response.routes[0].legs[0].distance.value /1000 + " km";
						infoWindow2.setContent(distance);
						infoWindow2.open(map,marker);
					});

					directionsDisplay.setDirections(response);
				}
			}
	);
	directionsDisplay.setMap(map);

}

google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>

<body>
<h1>ルート検索のドライブルートのポリライン（Polylines）を地図に複数個表示させる</h1>
<div id="map_canvas"></div>


<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 336x280テキスト＆ディスプレイ -->
<ins class="adsbygoogle"
     style="display:inline-block;width:336px;height:280px"
     data-ad-client="ca-pub-9579909343687512"
     data-ad-slot="9302520444"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>


<script>
		  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
		  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
		  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
		  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

		  ga('create', 'UA-3537416-2', 'auto');
		  ga('send', 'pageview');

		</script>

</body>
</html>
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>ルート検索のドライブルートのポリライン（Polylines）を地図に複数個表示させる\|Google Maps Directions API V3</title>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
	<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
	<style>
	#map_canvas {
	height: 500px;
	width: 80%;
	margin: auto;
	padding: 0px
	}
	</style>

	<script type="text/javascript">

	var map;
	var infoWindow2;
	var mapZoom = 5;
	var lat = 35.044624;
	var lng = 138.480583;

	/*
	初期実行
	*/
	function initialize() {


	var mapOptions = {
	zoom: mapZoom,
	center: new google.maps.LatLng(lat, lng),
	mapTypeId: google.maps.MapTypeId.ROADMAP,
	mapTypeControl: false
	};

	map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);


	infoWindow2 = new google.maps.InfoWindow({noSupress: true});

	var ary = [
	{
	"start" : new google.maps.LatLng(35.044624, 138.480583),
	"end" : new google.maps.LatLng(35.200784, 138.662870),
	"icon" : "http://purazumakoi.info/sample/google_maps_api/direction-root/image/car.gif",
	"color" : "#f00"
	},
	{
	"start" : new google.maps.LatLng(35.178424, 138.676367),
	"end" : new google.maps.LatLng(35.149800, 138.866934),
	"icon" : "http://purazumakoi.info/sample/google_maps_api/direction-root/image/car.gif",
	"color" : "#3a3a91"
	},
	{
	"start" : new google.maps.LatLng(35.263073, 138.911010),
	"end" : new google.maps.LatLng(35.422982, 139.369972),
	"icon" : "http://purazumakoi.info/sample/google_maps_api/direction-root/image/car.gif",
	"color" : "#ff00ff"
	}
	]


	for(var i in ary){
	fCalcRoute(ary[i]['start'], ary[i]['end'], ary[i]['icon'], ary[i]['color']);
	}

	google.maps.event.addListener(map, 'dragstart', function()
	{
	infoWindow2.close();
	});
	}

	/*
	拠点間計算、ルート表示
	*/
	function fCalcRoute(start, end, icon, color) {

	// ルート表示設定
	rendererOptions = {
	draggable: true,
	preserveViewport: false
	};
	var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
	directionsDisplay.setOptions(
	{
	polylineOptions: { strokeColor: color, strokeWeight:3 },
	suppressMarkers :true,
	suppressInfoWindows: true
	});
	var directionsService = new google.maps.DirectionsService();

	//通常のマーカー画像
	var signIcon = {
	url: icon,
	size: new google.maps.Size(40,48),
	origin: new google.maps.Point(0,0),
	anchor: new google.maps.Point(20,48),
	scaledSize: new google.maps.Size(40,48)
	};
	// マーカー設定
	var marker = new google.maps.Marker({
	position: start,
	map: map,
	icon: signIcon
	});

	// ルート間ポイント設定
	var request = {

	origin: start,
	destination: end,
	travelMode: google.maps.DirectionsTravelMode.DRIVING,
	unitSystem: google.maps.DirectionsUnitSystem.METRIC,
	optimizeWaypoints: true,
	avoidHighways: false, // false → 高速道路使用
	avoidTolls: false // true →、可能な場合は計算されたルートで有料区間を除外するよう指定します。
	};
	directionsService.route(request,
	function(response,status){
	if (status == google.maps.DirectionsStatus.OK){
	google.maps.event.addListener(marker, 'click', function()
	{
	var distance = +response.routes[0].legs[0].distance.value /1000 + " km";
	infoWindow2.setContent(distance);
	infoWindow2.open(map,marker);
	});

	directionsDisplay.setDirections(response);
	}
	}
	);
	directionsDisplay.setMap(map);

	}

	google.maps.event.addDomListener(window, 'load', initialize);
	</script>
	</head>

	<body>
	<h1>ルート検索のドライブルートのポリライン（Polylines）を地図に複数個表示させる</h1>
	<div id="map_canvas"></div>





	<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
	<!-- 336x280テキスト＆ディスプレイ -->
	<ins class="adsbygoogle"
	style="display:inline-block;width:336px;height:280px"
	data-ad-client="ca-pub-9579909343687512"
	data-ad-slot="9302520444"></ins>
	<script>
	(adsbygoogle = window.adsbygoogle \|\| []).push({});
	</script>


	<script>
	(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]\|\|function(){
	(i[r].q=i[r].q\|\|[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
	m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
	})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

	ga('create', 'UA-3537416-2', 'auto');
	ga('send', 'pageview');

	</script>

	</body>
	</html>