Google maps API V3 ルート案内
2点間距離を測定するGoogle maps サンプル(下記)を入手したのですが、次のように手直ししたいと考えています。ご教授の程、よろしくお願い致します。
(1)出発地は決まっているので、「◯◯から」の◯◯の表示は必要ありません。
(2)そのかわり、出発地のポイントと名称をあらかじめ表示させておきたい。
(3)目的地の住所を入力して検索するだけで案内が表示される。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes">
<title>Google Maps API v3 Directions Draggable</title>
<style type="text/css">
body {background-color: #B7C4C8; font-family: Arial, "MS PGothic"; text-align: center; font-size: small;}
div#wrapper {width: 728px; margin: 0 auto; padding: 0; text-align: left;}
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var rendererOptions = {draggable: true};
var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
var directionsService = new google.maps.DirectionsService();
var map;
var aqui = new google.maps.LatLng(35.69, 139.71);
function initialize() {
var myOptions = {zoom: 10, center: aqui, mapTypeId: google.maps.MapTypeId.ROADMAP};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById("directionsPanel"));
google.maps.event.addListener(directionsDisplay, "directions_changed", function() {
computeTotalDistance(directionsDisplay.directions);
});
calcRoute();
}
function calcRoute(fromAddress, toAddress) {
var selectedMode = document.getElementById("mode").value;
var fromAddress = document.getElementById("fromAddress").value;
var toAddress = document.getElementById("toAddress").value;
var request = {origin: fromAddress, destination: toAddress, travelMode: google.maps.DirectionsTravelMode[selectedMode]};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
}
function computeTotalDistance(result) {
var total = 0;
var myroute = result.routes[0];
for (i = 0; i < myroute.legs.length; i++) {
total += myroute.legs[i].distance.value;
}
total = total / 1000.
document.getElementById("total").innerHTML = total + " km";
}
</script>
</head>
<body onload="initialize()">
<div id="wrapper">
<div style="margin-bottom: 8px;">
<strong>Directions: モード=</strong>
<select id="mode" onchange="calcRoute();">
<option value="DRIVING">車</option>
<option value="WALKING">歩き</option>
</select>
<form action="#" onsubmit="calcRoute(this.fromAddress.value, this.toAddress.value); return false">
<input type="text" size="12" id="fromAddress" name="from" value=""/>から ~
<input type="text" size="12" id="toAddress" name="to" value="" />へのルートを
<input name="submit" type="submit" value="検索" /> またはドラッグ&ドロップ
</form>
</div>
<div id="map_canvas" style="float:left; width:500px; height:400px;"></div>
<div id="directionsPanel" style="margin-left: 505px; width:223px; height: 400px; overflow: auto; background-color: #FFF;"><p>距離:
<span id="total"></span></p></div>
<div style="margin-top: 12px;">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-9624687380026797";
/* 728-90Big */
google_ad_slot = "2458118948";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
<!--/ #wrapper--></div>
<script type="text/javascript">
<!--
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-1220676-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script');
ga.src = 'http://www.google-analytics.com/ga.js';
ga.setAttribute('async', 'true');
document.documentElement.firstChild.appendChild(ga);
})();
// -->
</script>
</body>
</html>
以上です。よろしくお願い致します。
お礼
ありがとうございました。 旅行前に間に合うようにご回答くださり感謝します。 ただ、また私の知らない新しい機械の名前が出てきました。 iPod touchをPCで検索してみてみましたが、ちょっとまだ??です。 購入して操作を覚えるにも時間がありませんし、今度の旅行は、このアイフォンで写真を撮るぐらいに使おうと思います。