XMLデータを読み込んでGoogleMapに表示し、以下のような感じで

質問

XMLデータを読み込んでGoogleMapに表示し、以下のような感じでカテゴリわけして、サイドバーに表示させたいと考えています。

↓サイドバー↓
--------------
○○市
aaaaa

△△市
bbbbb
ccccc
--------------

マップはこちらのものを参考にして作成しています。
http://japonyol.net/editor/xml.html

このXMLに「category」という項目を増やして、それをサイドバーに反映させたいのですが、方法が分からず困っています。

XMLを

<markers>
<marker lat="xxxxx" lng="xxxxx" name="aaaaa" category="○○市">
<marker lat="xxxxx" lng="xxxxx" name="bbbbb" category="△△市">
<marker lat="xxxxx" lng="xxxxx" name="ccccc" category="△△市">
</markers>

として、新しい「市」はXML上で増やすと、新しいカテゴリとして反映されるようにしたいのです。

分かる方いらっしゃいましたら、ご教授いただけませんでしょうか。
もしくは、参考サイトでもかまいませんので、よろしくお願い致します。

回答No.4

yyr446 · ベストアンサー

「XMLデータの読み込みを、クリックではなく始めから読み込んで..」
＝＝＞これは、簡単です。
リンクをクリックした時 Get_xml(xmlのurl) を呼び出してる
だけですから、
function load(){
　 if (GBrowserIsCompatible()) {
の節の最後に
　　Get_xml("marker2.xml");
　 }
}
のように呼び出せばいいだけです。

「ULの部分（「市」）の文字を太字にしたり装飾したりしたい」
＝＞これも簡単です。category_liにスタイル属性付加すればいいんです。

　 var category_li = document.createElement('li');
　 category_li.appendChild(document.createTextNode(key));
の下に
　　category_li.style.fontWeight = 'bolder';
とか
でもこれは正しいマークアップじゃ無いと怒られそう。

太字にする目的が強調なら、<li>の下にさらに<strong>要素とか<em>要素
の子供を作ってその中にTextNodeを入れて、見栄えはCSS側でやれとか..

「吹き出し部分を装飾」について、
＝＞今回の回答サンプルでは、吹き出し内については何も要望されなかった
ので手抜きの innerHTMLぽい .openInfoWindowHtml(HTMLストリング) 利用です。
本来は、DOM要素を作って、.openInfoWindow(ノード)でやるか、
.bindInfoWindow(ノード）でhtml内の要素を結びつけた方が、安全で、
融通がききます。

お礼

早速のアドバイス、ありがとうございます。

おかげさまで、XMLデータを始めから読み込んで表示しておくことができました。

「ULの部分（「市」）の文字を太字にしたり装飾したりしたい」に関してですが、
category_liにスタイル属性を付加してみたところ、「市」の部分だけでなく「名前」の部分も装飾されてしまいます。

具体的にやりたいことをいうと、
「市」の部分の背景に色を付けて、文字の大きさを大きくして太字にしたいのです。

それと、「名前」の部分をリンクのようにしたい（下線を付けて、マウスが乗った時ポインターが手の形になる）のですが、可能なのでしょうか？

大変恐縮ですが、ご教授いただけると幸いです。よろしくお願い致します。

補足

試行錯誤の末、「市」と「名前」部分の装飾も無事行うことができました。

おかげさまで、思い通りのものを作成することができました。

yyr446様、本当にありがとうございました。

回答No.3

yyr446

ちょこっと直して出来ました。

<script type="text/javascript">
var map;
var lis =[];

---この辺は前と同じなので省略---

function AddMarker(markers){
//全マーカーを削除
　 map.clearOverlays();
//リストを削除
　 var list = document.getElementById('list');
　 while(list.hasChildNodes()){
　　 list.removeChild(list.firstChild);
　 }
//マーカーとlistsを追加
　for (var i = 0; i < markers.length; i++) {
　　　 var content = markers[i].getAttribute("category") +'<br>' + markers[i].getAttribute("name");
　　　 var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
　　　　　　　　　　　　　　　parseFloat(markers[i].getAttribute("lng")));
//リストノードを作成
　　　 var li = document.createElement('li');
　　　 li.appendChild(document.createTextNode(markers[i].getAttribute("name")));
　　　 lis[i]={city:markers[i].getAttribute("category"),li:li};

//マーカーを作成
　　　 var marker=MakeMarker(point,content,li)
　　　 map.addOverlay(marker);
　}
//カテゴリーの作成しリストに追加
　var category ={};
　for (var i=0;i<lis.length;i++) category[lis[i].city]=[];
　for(var key in category){
　 for (var i=0;i<lis.length;i++){
　　 if(key == lis[i].city) category[key].push(lis[i].li);
　 }
　}
　for(var key in category){
　 var category_li = document.createElement('li');
　 category_li.appendChild(document.createTextNode(key));
　 var city_ul = document.createElement('ul');
　 for(var i=0;i<category[key].length;i++) city_ul.appendChild(category[key][i]);
　 category_li.appendChild(city_ul);
　 list.appendChild(category_li);
　}
}

---この後も前と同じなので省略---

</script>

こんな感じ
http://yoneyone.my-sv.net/GmapSampleXml3.htm

XMLは↓です。

<?xml version="1.0" encoding="UTF-8"?>
<markers>
<marker lng="139.6138" lat="35.6907" name="名前1" category="○○市"/>
<marker lng="139.9193" lat="35.7251" name="名前2" category="△△市"/>
<marker lng="139.8183" lat="35.7021" name="名前3" category="△△市"/>
<marker lng="139.5104" lat="35.7147" name="名前4" category="○○市"/>
<marker lng="139.9223" lat="35.5805" name="名前5" category="□□市"/>
<marker lng="139.4064" lat="35.7896" name="名前6" category="○○市"/>
</markers>

お礼

早速のアドバイス、サンプルまで用意していただいて、本当にありがとうございます。

やりたいことはほとんどかなっていて、吹き出し部分を装飾したりするのはできたのですが、

XMLデータの読み込みを、クリックではなく始めから読み込んで表示しておき、
ULの部分（「市」）の文字を太字にしたり装飾したりしたいのですが、
どの部分を改変すればいいのやら、なかなかうまくいきません…。

ご教授いただけると幸いです。よろしくお願い致します。

回答No.2

yyr446

続き

function AddMarker(markers){
//全マーカーを削除
　map.clearOverlays();
//リストを削除
　var list = document.getElementById('list');
　while(list.hasChildNodes()){
　 list.removeChild(list.firstChild);
　}
//マーカーを追加
　 for (var i = 0; i < markers.length; i++) {

　//markers[]配列に格納された各<marker>要素の属性を取り出してます。

　　 var content = markers[i].getAttribute("id") +'.' + markers[i].getAttribute("name");
　　 content +='<div><a href="' + markers[i].getAttribute("link") +'"target="_blank">リンク</a></div>';
　　 var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
　　　　　　　　　　　　　　parseFloat(markers[i].getAttribute("lng")));

//リストノードを作成
　　 var li = document.createElement('li');
//マーカーを作成
　　 var marker=MakeMarker(point,content,li)
　　 map.addOverlay(marker);
//リストを追加
　　 li.innerHTML='<img src="'+ marker.getIcon().image +'" />' + content;
　　 list.appendChild(li);
　 }
}

//マーカー生成関数
function MakeMarker(point,content,node){
　var myicon=new GIcon(G_DEFAULT_ICON);
//myicon.image =url;
　var marker=new GMarker(point,{icon:myicon});
//マーカーの吹き出し登録
　　 var closure = GEvent.callbackArgs(marker,function(content){
　　　　　　　　　 this.openInfoWindowHtml(content);
　　　　　　　　　 },content);
//マーカーのイベントリスナー追加
　　 var marker_event = GEvent.bind(marker,'click',closure,function(){
　　　this.apply(arguments);
　　 });
//リストのイベントリスナー追加
　　 var list_event = GEvent.bindDom(node,'click',closure,function(){
　　　this.apply(arguments);
　　 });
　return marker;
}
</script>
・・・・・
</head>
・・・・・
<body onload="load()" onunload="GUnload()">
<div id="wrap">
　<div class="header">
　 <h3>Google MAP</h3>
　 <hr />
　</div>
　<div id="inner">
　 <div id="map"></div>
　 <div id="side">
　 <a href="marker2.xml" onClick="Get_xml(this.href);return false;">marker.xmlのロード</a>
　 <ul id="list"></ul>
　 </div>
　 <div class="clear"><hr /></div>
　</div>
　<div id="footer">
　</div>
</div>

これのリストノードを作成とリスト追加の部分を、工夫すれば、お望みのが
出来ると思います。

サンプルコードは、必要と思われる部分を抜粋しただけなので、そのまま
張り付けても動かないかも。それから全角空白は半角空白にしてね。

回答No.1

yyr446

そのまんまの回答じゃないですけど、依然作った事のある
サンプルをちょっと換えれば使えそうです。ご参考までに
・・・・・
<head>
・・・・・
<style type="text/css">
body {text-align:center;background-color:#E0FFFF;}
#wrap {width:900px;text-align:left;margin:0px auto;}
#inner { margin:0 5px; }
#map {width:640px;float:right;border:1px solid black;overflow:scroll;}
#side {width:230px;height:700px;padding:5px;float:left;border:1px solid black;overflow:scroll;background-color:#ccccff;}
#list {padding-left:5px;margin:0px;list-style-type:none;}
.clear { clear:both; }
.clear hr { display:none; }
</style>
・・・・・
<script type="text/javascript">
var map;
var center_marker = null;
var marks = [];
var No;

function load(){
　 if (GBrowserIsCompatible()) {
　　　map = new GMap2(document.getElementById("map"),{size:new GSize(640,700)});
　　　map.setCenter(new GLatLng(35.7851,139.7644), 11); //MAP初期位置
　　　map.addControl(new GMapTypeControl());
　　　map.addMapType(G_PHYSICAL_MAP);
　　　map.addControl(new GLargeMapControl());
　　　map.addControl(new GScaleControl(),new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(10,15)));
　　　new GKeyboardHandler(map);
　 }
}

function Get_xml(xmlfile){
// GET or POST Request
　var ajax = GXmlHttp.create();
　ajax.open("GET",xmlfile,true);
　ajax.onreadystatechange = function() {
　 if (ajax.readyState == 4) {
　　　var xml = ajax.responseXML; //XMLレスポンスをそのまま取得
　　　var markers = xml.documentElement.getElementsByTagName("marker");

//↑でmarkers配列に読み込んだXMLの<marker>要素が格納されます。

　　　AddMarker(markers)
　 }
　}
　ajax.send(null);
}

スペースが足りなかったので続く...