プロが教えるわが家の防犯対策術!

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"><!--
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 …
</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>

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

このQ&Aに関連する最新のQ&A

A 回答 (3件)

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


こんな感じでどうでしょう。
http://googlemaps.googlermania.com/okwave/q76115 …
    • good
    • 0
この回答へのお礼

wf9a5m75 さん

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

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

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




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

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

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



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

https://google-developers.appspot.com/maps/docum …
    • good
    • 0
この回答へのお礼

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

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

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

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

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

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

このQ&Aに関連する人気のQ&A

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


人気Q&Aランキング