Instantly share code, notes, and snippets.

Embed
What would you like to do?
ルート検索のドライブルートのポリライン(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