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

解決済みの質問

Google Maps API ルート検索

Google maps API V3でルート検索をする場合、

<input type="submit" value="検索" onclick="searchRoute()">
として、検索ボタンを押さないとルートが表示されないようにしたいのですが、検索する住所が ”ある市”(市町村)に限られている場合、あらかじめ検索窓に”○○市”と表示させておき、”○○市”の後に町名や番地を入力して、それから検索ボタンを押すことで初めて地図上にルートを表示させたいのですが、記述をどうすればよいか悩んでおります。

<input type="text" size="20" id="toAddress" name="to" value="○○市">
とすると、いきなり”○○市”の代表地点までのルートが表示されてしまいます。

よろしくお願い致します。

投稿日時 - 2015-01-23 17:31:49

QNo.8901433

困ってます

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

回答がないみたいなので、想像での回答を…

通常で考えればそのようにスクリプトが作成されているだけなので、それを修正すればよいだけと思いますが、実際のスクリプトがどのような構成になっているのかまったく不明なので、具体的なことはほとんど言えません。

想像では、スクリプトは大きく分けて、
 1)地図を表示する部分
 2)検索窓の値を読んで、ルートを表示する部分
とからなっていると思います。

さらに想像では、初期の表示で上記の1)2)が連続して処理されるようになっているのではないかと思われます。
対処法としては、初期表示では1)のみを実行するようにすればよさそう。

2)の部分は、想像では
 var searchRoute = function(){~~~}
とか
 function searchRoute(){~~~}
などで定義されていると思います。

1)の部分はどうなっているか不明ですが、その最後で
 searchRoute();
みたいにして、2)の処理を呼び出しているのではないかと想像します。
なので、その処理を行わなければ良いのではないかな・・・


※読んでお分かりのように、想像に次ぐ想像に基づいた回答ですので、当たるも八卦です。

投稿日時 - 2015-01-26 10:57:29

補足

fujillin さん
お礼コメントで詳細を追記したのですが、もう一度 fujillin さんのコメントを読み返して、計算処理を行わないよう「calcRoute();」を削除すれば、出来ました! ヒントを提供してもらいありがとうございました。m(_ _)m

投稿日時 - 2015-01-29 11:41:35

お礼

fujillin さん、ご回答ありがとうございます。m(_ _)m
想像に想像を重ねさせてしまい申し訳ありません。

当方地元の消防団に入っておりまして、火災発生時に慌てないように「消火栓マップ」を作成しております。消防署からの緊急メールに火災発生住所が明記されているので、その住所を検索窓に入力し、その付近の消火栓の位置が判るようにしています。

実際の出動の時は慌てていることが多く、住所を入力するのに手間取ったりするので、なるべく入力文字数を少なくする意味で、「市町村」の「市」を予め表示させておくことが出来ないかご教授頂きたかったのです。

サンプルはこちらです ⇒ http://itohiki119.iinaa.net/test.html

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

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) {
func(response);
}
});
}

// ラインオブジェクト
var lineObj = new google.maps.Polyline({
strokeColor: '#00FF00',
strokeOpacity: 0.9,
strokeWeight: 5
});
// 出発地マーカーオブジェクト
var startMarker = new google.maps.Marker({
icon: 'http://itohiki119.iinaa.net/bousai/firefighter.png'
});
// 目的地マーカーオブジェクト
var endMarker = new google.maps.Marker({
icon: 'http://itohiki119.iinaa.net/bousai/fire.png'
});

function func(response) {
var routes = response.routes[0];
lineObj.setPath(routes.overview_path);
lineObj.setMap(map);

var legs = routes.legs[0];
startMarker.setPosition(legs.start_location);
startMarker.setMap(map);

endMarker.setPosition(legs.end_location);
endMarker.setMap(map);
map.fitBounds(routes.bounds); // 追記(自動的に...)
}


</script>
</head>

<body onload="initialize()">
<div id="wrapper">

<select id="mode" onchange="calcRoute();">
<option value="DRIVING">車</option>
<option value="WALKING">歩き</option>
</select>

<select id="fromAddress" onchange="calcRoute();">
<option value="34.790348, 134.719083">分団車庫</option>
<option value="34.788139, 134.723404">H支部</option>
<option value="34.796028, 134.723404">T支部</option>
<option value="34.801071, 134.717789">O支部</option>
<option value="34.800423, 134.706573">K支部</option>
<option value="34.805237, 134.698410">M支部</option>
</select>

<form action="#" onsubmit="calcRoute(fromAddress.value, this.toAddress.value); return false">
<font size="3"color="#ff0000">火災発生住所</font>&nbsp;⇒<input type="text" size="20" id="toAddress" name="to" value="" />
</form>
</div>
<div id="map_canvas" style="width:100%; height:94%"></div>

</body>
</html>

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
上の
<input type="text" size="20" id="toAddress" name="to" value="○○市">
とすると、いきなり”○○市”の代表地点までのルートが表示されてしまいます。

どうかよろしくお願い致します。

投稿日時 - 2015-01-28 15:20:54

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

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

-広告-
-広告-

回答(1)

あなたにオススメの質問

-広告-
-広告-