こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

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=""/>から&nbsp;~&nbsp;
<input type="text" size="12" id="toAddress" name="to" value="" />へのルートを&nbsp;
<input name="submit" type="submit" value="検索" />&nbsp;またはドラッグ&ドロップ
</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>

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

投稿日時 - 2012-07-26 12:56:22

QNo.7611516

困ってます

質問者が選んだベストアンサー

コードを見て、適当に作ってみました。
こんな感じでどうでしょう。
http://googlemaps.googlermania.com/okwave/q7611516.html

投稿日時 - 2012-07-27 13:13:22

お礼

wf9a5m75 さん

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

投稿日時 - 2012-07-27 18:37:12

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(3)

ANo.2

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


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

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

投稿日時 - 2012-07-27 10:28:47

ANo.1

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

https://google-developers.appspot.com/maps/documentation/javascript/examples/directions-simple

https://google-developers.appspot.com/maps/documentation/javascript/examples/places-autocomplete

投稿日時 - 2012-07-27 06:14:06

お礼

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

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

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

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

https://google-developers.appspot.com/maps/documentation/javascript/examples/directions-simple

投稿日時 - 2012-07-27 08:54:40

あなたにオススメの質問