GoogleMapAPIを使用して、任意の地点間の距離を測るプログラムのサンプルを掲載します。
スタート地点から、複数の地点を経由して最終地点までのルートと距離を表示するという内容です。
仕様は以下の通りです。
予めスタート地点にマーカーを表示
地図内をクリックすると、そこまでのルートと距離を表示
クリックできる地点は最大8つ
完成イメージ
ここでAPIについても説明しておきます。
知っている方は飛ばしてもらって結構です。
GoogleMapには様々なJavaScript APIが用意されています。
サイトに地図を表示したり、地図上に自身の情報を表示することができます。
よく会社や店のサイトにGoogleMapで所在地が表示されていると思いますが、これらを実現するためのAPIです。
いろいろな機能があるので調べてみると良いと思います。
「jquery-1.6.2.min.js」と「marker.png」を同ディレクトリ内に置いてください。
marker.pngはマーカー用画像なので、作成するか拾ってくる必要があります。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Google Maps V3</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
//<![CDATA[
var mapObj;
var originMarker;
var directionsService = new google.maps.DirectionsService();
var directionsRenderer = new google.maps.DirectionsRenderer();
var waypointsMarker = new Array();
var wayCount = 0;
google.maps.event.addDomListener(window, 'load', function()
{
//スタート地点の座標
var latlng = new google.maps.LatLng(41.818163,140.741035);
var mapOptions = {
zoom: 14,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
streetViewControl: false,
panControl: true
};
mapObj = new google.maps.Map(document.getElementById('maparea'), mapOptions);
directionsRenderer.setOptions({suppressMarkers : true});
directionsRenderer.setMap(mapObj);
google.maps.event.addListener(mapObj, "click", clickMap);
// スタート地点のマーカー
originMarker = new google.maps.Marker({
icon: 'marker.png',
position: latlng,
map: mapObj,
draggable: false
});
});
//マップクリック時のイベント
function clickMap(event)
{
//中間地点登録(最大8つ)
if(wayCount >= 8) {
alert("You can't create marker more than 8.");
return;
}
var latLngStr = new google.maps.LatLng(event.latLng.lat(), event.latLng.lng());
new google.maps.Marker({
icon: 'marker.png',
position: latLngStr,
map: mapObj,
draggable: false
});
waypointsMarker[wayCount] = {location: latLngStr, stopover:false};
wayCount ++;
//ルート表示
var request = {
origin: originMarker.getPosition(),
destination: latLngStr,
travelMode: google.maps.DirectionsTravelMode.WALKING,
waypoints: waypointsMarker
};
directionsService.route(request, function(result, status)
{
if (status == google.maps.DirectionsStatus.OK)
{
directionsRenderer.setDirections(result);
setDistance(result);
}
});
}
//移動距離表示
function setDistance(route)
{
var distance = getDistanceValue(route.routes[0].legs);
if (distance > 100){
distance = distance.toFixed(0);
}else if (distance > 10){
distance = distance.toFixed(1);
}
$("#distance").text(distance);
}
//距離取得
function getDistanceValue(legs)
{
var journey = 0;
for (var i in legs){
journey += legs[i].distance.value;
}
return journey / 1000;
}
//]]>
</script>
</head>
<body>
<div id="maparea" style="width: 500px; height: 500px; border: 1px solid Gray;"></div>
<span id="distance" style="font-size:36px;padding-right:5px;"></span> km
</body>
</html>