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>