• 小
  • 中
  • 大

ルート案内サンプル

地図上をクリックすると、マーカーが現れ2点間の移動距離と直線距離およびルートを地図上に表示します。
マーカー表示後はドラッグ可能で、ドラッグした場合は再計算を行います。3点目以降をクリックすると、最後の表示マーカーを用いて再検索します。

サンプルコード


サンプル.js


var myMap;
var directionsRenderer;
var directionsService = new google.maps.DirectionsService();
var myMarkers = [];

function reRender() {
if (myMarkers.length == 1) {
return;
}
var myTravelMode =
(document.getElementById('TravelMode').value == 'DRIVING')
? google.maps.DirectionsTravelMode.DRIVING :
google.maps.DirectionsTravelMode.WALKING;
directionsService.route({
origin: myMarkers[0].getPosition(),
destination: myMarkers[1].getPosition(),
travelMode: myTravelMode
}, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsRenderer.setDirections(result);
document.getElementById("journey").value =
(result.routes[0].legs[0].distance.value >= 1000)
? (result.routes[0].legs[0].distance.value / 1000)
+ 'km' : result.routes[0].legs[0].distance.value + 'm';
} else {
alert('ルート検索できませんでした');
}
})
var d = Math.round
(google.maps.geometry.spherical.computeDistanceBetween
(myMarkers[0].getPosition(), myMarkers[1].getPosition()));
document.getElementById("distance").value = (d >= 1000)
? (d / 1000) + 'km' : d + 'm';
}

function putMarker() {
var neoMarker = new google.maps.Marker({
position: arguments[0],
map: myMap,
draggable: true
});
neoMarker.setMap(myMap);
google.maps.event.addListener(neoMarker,'dragend',
function(mouseEvent) {
reRender();
});
myMarkers.push(neoMarker);

if (myMarkers.length == 1) {
return;
} else if (myMarkers.length == 3) {
myMarkers.shift().setMap(null);
}
reRender();
}

$(document).ready(function() {
var param = new Array();
var a = window.location.search.substring(1);
var b = a.split('&');

var mm = new Array();
for (var i in b) {
var vals = new Array(2);
vals = b[i].split('=', 2);
if (vals[0] == 'm'){
if (vals[1].match(/^(-?\d+\.?\d*),(-?\d+\.?\d*)$/)) {
mm.push(new google.maps.LatLng(RegExp.$1,RegExp.$2,true));
}
}
param[vals[0]] = vals[1];
}
delete b;
delete a;

var opts = {
zoom: (('z' in param) && (parseInt(param['z']) >= 0))
? parseInt(param['z']) : 11,
center: (('c' in param) &&
(param['c'].match(/^(-?\d+\.?\d*),(-?\d+\.?\d*)$/)))
? mapCenter = new google.maps.LatLng
(RegExp.$1, RegExp.$2, true):
new google.maps.LatLng(35.68,139.7),
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: true,
scaleControl: true,
navigationControlOptions: true,
disableDoubleClickZoom: true,
scrollwheel: false,
zIndex: 0
};
myMap = new google.maps.Map
(document.getElementById("map_canvas"),opts);

for (var i in mm) {
putMarker(mm[i]);
}

delete mm;
// クリックでマーカー設置
google.maps.event.addListener(myMap, 'click',
function(mouseEvent) {
putMarker(mouseEvent.latLng);
});

directionsRenderer = new google.maps.DirectionsRenderer ({
map: myMap, suppressMarkers: true });
document.getElementById("journey").disabled = true;
document.getElementById("distance").disabled = true;
});


サンプル.html


<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps v3 JavaScript API サンプル</title>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="サンプル.js" type="text/javascript"></script>
</head>
<body>
<p>Google Maps v3 APIを使ったサンプル。</p>
<div>移動手段 <select id="TravelMode" onchange="reRender()">
<option value="WALKING" selected>徒歩</option>
<option value="DRIVING">車</option></select>
移動距離 <input type="text" id="journey" class="value" value="">
直線距離 <input type="text" id="distance" class="value" value="">
</div><div id="map_canvas" style="width:500px; height:300px">
</div>
</body>
</html>


表示例 ルート案内と距離表示 マーカードラッグまたは地図上をクリックで情報が更新されます。


Google Maps サンプル > ルート案内と距離表示