Skip to content

Instantly share code, notes, and snippets.

@purazumakoi
Created March 5, 2015 13:50
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save purazumakoi/17cb6e2f521eeb85a18c to your computer and use it in GitHub Desktop.
Save purazumakoi/17cb6e2f521eeb85a18c to your computer and use it in GitHub Desktop.
ルート検索のドライブルートのポリライン(Polylines)を地図に複数個表示させる 複数グループ表示切り替え - ロード時にのみGoogle map apiにリクエスト< |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: 600px;
width: 80%;
margin: auto;
padding: 0px
}
#map_canvas1 {
height: 600px;
width: 80%;
margin: auto;
padding: 0px
}
#map_canvas2 {
height: 600px;
width: 80%;
margin: auto;
padding: 0px
}
</style>
<script type="text/javascript">
var map, map1, map2;
var infoWindow2;
var mapZoom = 11;
var lat = 35.044624;
var lng = 138.480583;
var ary1 = [
{
"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"
}
]
var ary2 = [
{
"start" : new google.maps.LatLng(35.149800, 138.866934),
"end" : new google.maps.LatLng(35.200784, 138.662870),
"icon" : "http://purazumakoi.info/sample/google_maps_api/direction-root/image/car.gif",
"color" : "#20b2aa"
},
{
"start" : new google.maps.LatLng(35.263073, 138.911010),
"end" : new google.maps.LatLng(35.149800, 138.866934),
"icon" : "http://purazumakoi.info/sample/google_maps_api/direction-root/image/car.gif",
"color" : "#1e90ff"
},
{
"start" : new google.maps.LatLng(35.244415, 139.137474),
"end" : new google.maps.LatLng(35.422982, 139.369972),
"icon" : "http://purazumakoi.info/sample/google_maps_api/direction-root/image/car.gif",
"color" : "#00ffff"
}
]
/*
初期実行
*/
function initialize(flg) {
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);
map1 = new google.maps.Map(document.getElementById("map_canvas1"), mapOptions);
map2 = new google.maps.Map(document.getElementById("map_canvas2"), mapOptions);
infoWindow2 = new google.maps.InfoWindow({noSupress: true});
google.maps.event.addListener(map, 'dragstart', function()
{
infoWindow2.close();
});
fCat1Disp(map1);
fCat2Disp(map2);
setTimeout( function() {
$("#map_canvas1").hide();
$("#map_canvas2").hide();
}, 100);
}
/* カテゴリ1 ルート表示 */
function fCat1Disp(map_opt){
for(var i in ary1){
fCalcRoute(map, ary1[i]['start'], ary1[i]['end'], ary1[i]['icon'], ary1[i]['color']);
fCalcRoute(map_opt, ary1[i]['start'], ary1[i]['end'], ary1[i]['color']);
}
}
/* カテゴリ2 ルート表示 */
function fCat2Disp(map_opt){
for(var i in ary2){
fCalcRoute(map, ary2[i]['start'], ary2[i]['end'], ary2[i]['icon'], ary2[i]['color']);
fCalcRoute(map_opt, ary2[i]['start'], ary2[i]['end'], ary2[i]['icon'], ary2[i]['color']);
}
}
/*
拠点間計算、ルート表示
*/
function fCalcRoute(map_opt, start, end, icon, color) {
// ルート表示 設定
rendererOptions = {
draggable: false,
preserveViewport: true
};
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_opt,
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_opt,marker);
});
directionsDisplay.setDirections(response);
}
}
);
directionsDisplay.setMap(map_opt);
}
google.maps.event.addDomListener(window, 'load', initialize);
$(function(){
$(".jsNaviDisp li a").click(function () {
var id = $(this).attr("id");
$("#map_canvas").show();
$("#map_canvas1").show();
$("#map_canvas2").show();
if(id === "jsCat1"){
$("#map_canvas").hide();
$("#map_canvas2").hide();
}
else if(id === "jsCat2"){
$("#map_canvas").hide();
$("#map_canvas1").hide();
}
else {
$("#map_canvas1").hide();
$("#map_canvas2").hide();
}
});
});
</script>
</head>
<body>
<h1>ルート検索のドライブルートのポリライン(Polylines)を地図に複数個表示させる 複数グループ表示切り替え</h1>
<p>ロード時にのみGoogle map apiにリクエスト</p>
<ul class="jsNaviDisp">
<li><a href="javascript:void(0)" id="">両方</a></li>
<li><a href="javascript:void(0)" id="jsCat1">カテゴリ1のみ</a></li>
<li><a href="javascript:void(0)" id="jsCat2">カテゴリ2のみ</a></li>
</ul>
<div id="map_canvas"></div>
<div id="map_canvas1"></div>
<div id="map_canvas2"></div>
<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