ルート検索のドライブルートのポリライン(Polylines)を地図に複数個表示させる|Google Maps Directions API V3
<!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment