Google maps API V3 ルート案内

解決済

質問者：mhkn-5963
質問日時：2012/07/26 12:56
回答数：3件

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=f …
<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">
</script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show …
</script>
</div>
</div>
<script type="text/javascript">

</script>
</body>
</html>

以上です。よろしくお願い致します。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

No.3ベストアンサー

回答者： wf9a5m75
回答日時：2012/07/27 13:13

コードを見て、適当に作ってみました。

こんな感じでどうでしょう。
http://googlemaps.googlermania.com/okwave/q76115 …

- 0
- 件

通報する

この回答へのお礼

wf9a5m75 さん

ありがとうございます。
イメージ通りのものが出来そうです。＼(^o^)／
感謝感謝です。m(_ _)m

通報する

お礼日時：2012/07/27 18:37

No.2

回答者： fujillin
回答日時：2012/07/27 10:28

内容は見ていませんが、スクリプトがちゃんと動作しているのなら、かなりの部分はHTMLの修正だけでできませんか？

（1）input要素にあらかじめ値を設定しておき、readonlyにしておく。
　　表示したくないのであればtype="hidden"に
（3）現状のスクリプトの機能がそのようになっているのでは？

（2）だけはスクリプトで対応しなければならないかも…

- 0
- 件

通報する

No.1

回答者： wf9a5m75
回答日時：2012/07/27 06:14

ちょっとコードを書いている暇がないので、サンプルのリンクだけ案内します。

https://google-developers.appspot.com/maps/docum …

https://google-developers.appspot.com/maps/docum …

- 0
- 件

通報する

この回答へのお礼

ご回答ありがとうございます。

早速IEの開発者ツールでhtmlをコピーして再現してみました。

しかし、最上部の選択ボックスは表示されるのですが、地図が出てこず真っ白なままです。

何がいけないのでしょうか？

https://google-developers.appspot.com/maps/docum …

通報する

お礼日時：2012/07/27 08:54

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！