- ベストアンサー
グーグルマップの初期表示地点のリストボックスでの選択
- 初期表示地点を選択するリストボックスによって、グーグルマップ上のマーカーの表示位置を変更する方法を教えてください。
- 指定されたXMLファイルを使用して、グーグルマップ上に複数のマーカーを表示するスクリプトがあります。このスクリプトでは、リストボックスで選択したkmlファイルによってマーカーが表示されますが、初期の地図の表示中心地点は固定されています。リストボックスで選択したファイルに応じて、表示地点も変更する方法を教えてください。
- グーグルマップ上に複数のマーカーを表示するスクリプトで、リストボックスで選択したkmlファイルに応じて表示地点を変更したいです。どのように書き換えれば良いでしょうか？
- juniper_se
- お礼率44% (11/25)
- JavaScript
- 回答数4
- ありがとう数2
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
data[0]={text:"A 区",kml:"kmlsample1.kml",lat:35.6664540,lng:139.763504,zoom:10}; の様に、初期のズームレベルを選択肢に持たせて地図表示に反映させることは可能でしょうか。 ==> 可能です。 map.panTo(new GLatLng(data[parseInt(t.value)].lat,data[parseInt(t.value)].lng)); の後に map.setZoom(data[parseInt(t.value)].zoom); を追加ですね。 それから補足、 初期状態でA区のKMLを表示させる部分の処理 document.getElementById("markerSelect").selectedIndex=0; GEvent.trigger(document.getElementById("markerSelect"),"change"); のハンドリングが、自分で作っておきながらぶさいく（手抜き）です。 もっと上手な書き方があるはずです。
その他の回答 (3)
- yyr446
- ベストアンサー率65% (870/1330)
以下のようなのはどうでしょう、 予めselectのoptionのvalue値をキーとして、テキストとlat,lmg値を 持った配列を準備し、DOMで生成し、changeのイベントを監視するのです。 （こんな感じになります） <script type="text/javascript" charset="utf-8"> //<![CDATA[ var map; var geoXml = null; var data =[]; function load() { data[0]={text:"A区",kml:"kmlsample1.kml",lat:35.6664540,lng:139.763504}; data[1]={text:"B区",kml:"kmlsample2.kml",lat:34.6267327,lng:135.5144181847}; data[2]={text:"C区",kml:"kmlsample3.kml",lat:35.6664540,lng:139.763504}; data[3]={text:"D区",kml:"kmlsample4.kml",lat:35.6664540,lng:139.763504}; var selectopt=document.createElement("option"); selectopt.setAttribute("value",0); selectopt.setAttribute("selected","selected"); selectopt.innerHTML=data[0].text; document.getElementById("markerSelect").appendChild(selectopt); for(var i=1;i<data.length;i++){ var selectopts=selectopt.cloneNode(true); selectopts.setAttribute("value",i); selectopts.removeAttribute("selected") selectopts.innerHTML=data[i].text; document.getElementById("markerSelect").appendChild(selectopts); } GEvent.addDomListener(document.getElementById("markerSelect"),"change",markerChange()); if (GBrowserIsCompatible()) { //地図を作成 map = new GMap2(document.getElementById("map")); map.setCenter(new GLatLng(43.068625, 141.350801), 12); map.addControl(new GLargeMapControl()); document.getElementById("markerSelect").selectedIndex=0; GEvent.trigger(document.getElementById("markerSelect"),"change"); } } function markerChange(eve){ return function(eve){ var t; if(eve==undefined){ t=document.getElementById("markerSelect"); }else{ t=eve?eve.target:event.srcElement; } if(geoXml){ map.removeOverlay(geoXml); } geoXml = new GGeoXml("http://[URL指定]/"+data[parseInt(t.value)].kml); map.addOverlay(geoXml); GEvent.addListener(geoXml, "load", function() { map.panTo(new GLatLng(data[parseInt(t.value)].lat,data[parseInt(t.value)].lng)); }); } } GEvent.addDomListener(window, "load", load); //GEvent.addDomListener(window, "load", prettyPrint); GEvent.addDomListener(window, "unload", GUnload); //]]> </script> </head> <body> <h2>Google Map Test</h2> <TR><font size="3">例：セレクトボックスで選択したマーカーを表示する(KML)</font></TR> <div id="map" style="width: 1000px; height: 600px"></div> <p>各区にある店舗<br /> <select id="markerSelect"> </select> </body> </html>
補足
yyr446様 詳細なご教示有難うございました。 早速、試させて頂きセレクトボックスに 連動した表示中心点の地図を表示させることができました。 有難うございました。 あと、一点ご教授頂ければ幸いなのですが、 function load() { data[0]={text:"A区",kml:"kmlsample1.kml",lat:35.6664540,lng:139.763504,zoom:10}; の様に、初期のズームレベルを選択肢に持たせて地図表示に反映させることは可能でしょうか。 追加質問の様な形になり申し訳ありませんが、 教えていただければ幸いです。
- yyr446
- ベストアンサー率65% (870/1330)
とりあえず、 geoXml = new GGeoXml("http://[URL指定]/" + kmlFile); map.addOverlay(geoXml); の下に GEvent.addListener(geoXml, "load", function() { map.panTo(geoXml.getDefaultCenter()); map.setZoom(map.getBoundsZoomLevel(geoXml.getDefaultBounds())); }); としてみては、いかがですか？ geoXmlのload()イベントで、 kmlの各<placemark>の<point>の中央（平均？）に 移動して、全部の<placemark>が収まるように地図の ズームレベルを変更します。
補足
yyr446様 早速のご返答有難うございます。 今想定しているのは、セレクトボックスの選択肢を、 特定の市や区域にしようと思っています。 なので、それぞれの選択肢に対応した中心座標のlat lang を、 予めスクリプト中に用意しておき、選ばれた選択肢に対応して 表示させたいのです。 選択肢は任意の数を設定できればと考えております。 分かる方がいらっしゃれば、 是非、お力添えをお願いします。
- leaveme
- ベストアンサー率54% (6/11)
こんにちは function markerChange(selectBox){ //ここに map.setCenter(new GLatLng(43.068625, 141.350801), 12); var kmlFile = selectBox.options[selectBox.selectedIndex].value; if(geoXml){ map.removeOverlay(geoXml); } 中心座標のlat lang の値をどうするか・・・？ですね。
補足
eaveme様 早速のご返答有難うございます。 今想定しているのは、セレクトボックスの選択肢を、 特定の市や区域にしようと思っています。 なので、それぞれの選択肢に対応した中心座標のlat lang を、 予めスクリプト中に用意しておき、選ばれた選択肢に対応して 表示させたいのです。 選択肢は任意の数を設定できればと考えております。 分かる方がいらっしゃれば、 是非、お力添えをお願いします。
補足
yyr446様 ズームの件もご教示の通り行ったところ、 うまく作動させるることができました。 初期状態でA区のKMLを表示させる部分の処理に関しては、 今後、自分なりに勉強していきたいと思います。 当初、想定していた以上の結果を得ることができました。 適切なご指示に、重ねて御礼を申し上げます。 有難うございました。