- ベストアンサー
※ ChatGPTを利用し、要約された質問です（原文：Google Maps API ルート検索）
Google Maps APIでルート検索する際の注意点
このQ&Aのポイント
- Google Maps API V3を使用してルート検索を行う場合、センセーショナルなタイトルを30文字前後で生成できます。
- ルート検索を行う際に、指定した市町村に限定した住所を事前に表示し、その後に町名や番地を入力して検索ボタンを押すことで地図上にルートを表示させる方法についてわかります。
- Google Maps APIを使用してルート検索を行う際に、「検索ボタンを押さないとルートが表示されない」という制約を設ける方法について解説します。
noname#245585
- JavaScript
- 回答数1
- ありがとう数18
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
回答がないみたいなので、想像での回答を… 通常で考えればそのようにスクリプトが作成されているだけなので、それを修正すればよいだけと思いますが、実際のスクリプトがどのような構成になっているのかまったく不明なので、具体的なことはほとんど言えません。 想像では、スクリプトは大きく分けて、 1）地図を表示する部分 2）検索窓の値を読んで、ルートを表示する部分 とからなっていると思います。 さらに想像では、初期の表示で上記の1）2）が連続して処理されるようになっているのではないかと思われます。 対処法としては、初期表示では1）のみを実行するようにすればよさそう。 2）の部分は、想像では var searchRoute = function(){～～～} とか function searchRoute(){～～～} などで定義されていると思います。 1）の部分はどうなっているか不明ですが、その最後で searchRoute(); みたいにして、2）の処理を呼び出しているのではないかと想像します。 なので、その処理を行わなければ良いのではないかな・・・ ※読んでお分かりのように、想像に次ぐ想像に基づいた回答ですので、当たるも八卦です。
お礼
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> ⇒<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="○○市"> とすると、いきなり”○○市”の代表地点までのルートが表示されてしまいます。 どうかよろしくお願い致します。
補足
fujillin さん お礼コメントで詳細を追記したのですが、もう一度 fujillin さんのコメントを読み返して、計算処理を行わないよう「calcRoute();」を削除すれば、出来ました！ ヒントを提供してもらいありがとうございました。m(_ _)m