GoogleMapsAPIv3でXMLを取得(3)

質問

お世話になっております。
何度か質問しているのですが、新たに質問したいことがあります。

現在以下の様な形で、GoogleMapsAPIを使ってXMLデータを取得し、表示させています。

　function initialize() {
var myLatlng = new google.maps.LatLng(16.636192,158.9062);
var myOptions = {
zoom: 1,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}

map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
var infowindow = new google.maps.InfoWindow;
downloadUrl("xml/allplaces.xml", function(data) {
var markers =　data.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("name");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var linkurl = markers[i].getAttribute("linkurl");
var html = '<div style="height: 150px; width: 200px"><b>'+name+'</b><br />'+linkurl+'</b>';
var marker = new google.maps.Marker({
map: map,
position: point,
title: name
});
bindInfoWindow(marker, map, infoWindow, html);
}
});
}

function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
}

10行目の
downloadUrl("xml/allplaces.xml", function(data) {
の部分でXMLを指定していますが、これをHTML上の
<input type="button" id="btn" value="" onClick="" />
といった、ボタンファンクションで、異なるXMLを指定したいです。
つまり、クリックすると出ているマーカーは消えて、ほかのマーカーが出るようにしたいです。

分かる方いらっしゃいましたら、どうぞよろしくお願い致します。

回答No.1

yyr446 · ベストアンサー

テキストボックスで、XMLのファイル名を打ち込んでもらうのは、打ち間違えたりする事がままあるので、セレクトボックスかリンクの方がよいと思います。

例えば、
<a href="xml/allplaces.xml" onClick="Get_xml(this.href);return false;">allplaces.xmlのロード</a>
として、downloadUrl("xml/allplaces.xml", function(data) {｝）
の代わりに、

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");

　　　後は省略

　 }
　}
　ajax.send(null);
}

お礼

とても参考になりました。
ありがとうございました！

補足

ご回答ありがとうございます。

GXmlHttp.create()はAPI v2のときの物だったと思うのですが、
v3ではcreateXmlHttpRequest()を使えばいいのでしょうか。

createXmlHttpRequest()は
util.js
(http://code.google.com/p/gmaps-samples-v3/source/browse/trunk/xmlparsing/util.js?r=16 )
で提供されていました。

それから、少し質問の内容が分かりづらかったかもしれ無いのですが、
Google Maps API V3でhttp://japonyol.net/editor/xml2.htmlの様な、複数のXMLに対応したマップを作りたいです。

回答No.2

yyr446

>>v3ではcreateXmlHttpRequest()を使えばいいのでしょうか。

はい、動作確認してませんけど、GXmlHttpとかGdownloadurlとかV3で廃止された
クラスを活かせるように「util.js」が提供されてるみたいですから、とりあえず
それでいいと思います。
※本来は、もっと強固な'XMLHttpRequest'のラッパーを自分で書いた方がベターかも
↓（人まねです）
if (!'XMLHttpRequest' in this) {
　 this.XMLHttpRequest = (function () {
　　　var i, l;
　　　for (i = 0, l = arguments.length; i < l; i++) {
　　　　try {
　　　　　return arguments[i];
　　　　}
　　　　catch (err) {}
　　　}
　　　return null;
　 })(
　 function () { return new ActiveXObject('Msxml2.XMLHTTP.6.0'); },
　 function () { return new ActiveXObject('Msxml2.XMLHTTP.3.0'); });
}
var ajax = new XMLHttpRequest();

>>クリックすると出ているマーカーは消えて、ほかのマーカーが出るようにしたい

　それは、新しいマーカーたちを描画する前に、前のマーカーをごそっと消すだけだと
思うんですが．．．．