ルート検索のドライブルートのポリライン（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>