プロが教える店舗＆オフィスのセキュリティ対策術

グーグルマップの初期表示地点のリストボックスでの選択

解決済

  • 質問者：juniper_se
  • 質問日時：
  • 回答数：4件

宜しくお願いします。
以下のような、XMLファイルを使用してグーグルマップに複数のマーカーを表示させるスクリプトが
在ります。XMLファイルは、kmlsample1.kml、kmlsample2.kml、kmlsample3.kmlを設定し、
スクリプト中の[URL指定]の箇所に各ファイルの存在するフォルダを絶対パスで指定します。
HTMLにあるリストボックスでマーカーを地図に表示させるkmlファイルを選択するのですが、
このスクリプトでは、どのkmlファイルを選んでも初期の地図の表示中心地点がJavaスクリプト中の
「//地図を作製」から2行下で指定されている(43.068625, 141.350801)の地点でしか、
表示されない仕様になっています。
選んだセレクトボックスにより3通りの表示地点が現れるようにしたいのですが、
方法が分かりません。
どの様に書き換えれば良いのかご教授をお願い致します。

=========　Java・HTML　=================

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio …
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<title>Google Maps </title>
<script src=""http://maps.google.co.jp/maps?file=api&amp;v=2&a …[GoogleMaps APIキー]"type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
var map;
var geoXml = null;
function load() {
if (GBrowserIsCompatible()) {

//地図を作成
map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(43.068625, 141.350801), 12); ←*ABCによって変更したい
map.addControl(new GLargeMapControl());
markerChange(document.getElementById("markerSelect"));
}
}
function markerChange(selectBox){
var kmlFile = selectBox.options[selectBox.selectedIndex].value;
if(geoXml){
map.removeOverlay(geoXml);
}
geoXml = new GGeoXml("http://[URL指定]/" + kmlFile);
map.addOverlay(geoXml);
}
GEvent.addDomListener(window, "load", load);
GEvent.addDomListener(window, "load", prettyPrint);
GEvent.addDomListener(window, "unload", GUnload);
//]]>
</script>
</head>
<body>
<TR><font size="3">例：セレクトボックスで選択したマーカーを表示する(KML)</font></TR>
<div id="map" style="width: 1000px; height: 600px"></div>
<p>各区にある店舗<br />
<select id="markerSelect" onChange="javascript:markerChange(this);">
<option value="kmlsample1.kml" selected="selected">A区</option>
<option value="kmlsample2.kml">B区</option>
<option value="kmlsample3.kml">C区</option>
</select>

========================XMLファイル例「kmlsample1.kml」===========

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://earth.google.com/kml/2.2">
<Document>
<Folder>
<name>A区の物件</name>
<Placemark>
<name>第一マンション</name>
<description><![CDATA[<a href="" target="_blank">詳細</a>]]>
</description>
<Point><coordinates>14○.357234, 4○.038694, 0</coordinates></Point>　←○は任意の半角数字
</Placemark>
<Placemark>
<name>第二マンション</name>
<description><![CDATA[<a href="" target="_blank">詳細</a>]]>
</description>
<Point><coordinates>14○.334967, 4○.035413, 0</coordinates></Point>　←○は任意の半角数字
</Placemark>
</Folder>
</Document>
</kml>
</body>
</html>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (4件)

No.4ベストアンサー

  • 回答者： yyr446
  • 回答日時：

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");
のハンドリングが、自分で作っておきながらぶさいく（手抜き）です。
もっと上手な書き方があるはずです。

この回答への補足

yyr446様
ズームの件もご教示の通り行ったところ、
うまく作動させるることができました。
初期状態でA区のKMLを表示させる部分の処理に関しては、
今後、自分なりに勉強していきたいと思います。
当初、想定していた以上の結果を得ることができました。
適切なご指示に、重ねて御礼を申し上げます。
有難うございました。

補足日時：2010/04/14 09:58
通報する
    • good
    • 0
    • 件
通報する

No.3

  • 回答者： yyr446
  • 回答日時：

以下のようなのはどうでしょう、


予め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};
の様に、初期のズームレベルを選択肢に持たせて地図表示に反映させることは可能でしょうか。
追加質問の様な形になり申し訳ありませんが、
教えていただければ幸いです。

補足日時：2010/04/13 18:06
通報する
    • good
    • 0
    • 件
通報する

No.2

  • 回答者： yyr446
  • 回答日時：

とりあえず、


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 を、
予めスクリプト中に用意しておき、選ばれた選択肢に対応して
表示させたいのです。
選択肢は任意の数を設定できればと考えております。
分かる方がいらっしゃれば、
是非、お力添えをお願いします。

補足日時：2010/04/12 15:23
通報する
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： leaveme
  • 回答日時：

こんにちは


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 を、
予めスクリプト中に用意しておき、選ばれた選択肢に対応して
表示させたいのです。
選択肢は任意の数を設定できればと考えております。
分かる方がいらっしゃれば、
是非、お力添えをお願いします。

補足日時：2010/04/12 15:10
通報する
    • good
    • 0
    • 件
通報する

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

Q質問する（無料）

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報