XMLから取得した複数のマーカーにふきだしをつける方法
ouka
http://googlemaps.googlermania.com/
こちらのサイトで紹介しているサンプルをもとにXMLファイルから複数のマーカーを取得し表示しています。それぞれのマーカーをクリックすると吹き出し
が出るようにしたくて、以下のソースにopenInfoWindowHtmlを付け足してみましたが、FireFoxのエラーコンソールには
markers[i] has no properties
とエラーを返されてしまいました。
多分XMLから属性「html」を取得する指示に問題があるのかと思いますが、なにぶんJavaScriptに関する知識が皆無であるため皆様のご協力
を仰ぎたい次第です。
どうぞよろしくお願いします。
<script type="text/javascript">
//<![CDATA[
var map;
function addMarker() { //マーカーを表示
var request = GXmlHttp.create();
request.open("GET", "my_neighbor.xml" , true);
request.onreadystatechange = function() {
if (request.readyState == 4) {
var xmlDoc = request.responseXML;
var markers =
xmlDoc.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var mpoint = new GLatLng(
markers[i].getAttribute("lat"),
markers[i].getAttribute("lng")
);
var marker = createMarker(mpoint, i);
//マーカーをクリックしたら、吹き出しの中に写真を表示する
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(markers[i].getAttribute("html"));});
map.addOverlay(marker);
}
}
}
request.send(null);
}
function createMarker(mpoint, index) {
var icon = new GIcon();
icon.image = "marker_flag.png";
icon.shadow = "marker_shadow.png";
icon.iconSize = new GSize(35, 35);
icon.shadowSize = new GSize(35, 35);
icon.iconAnchor = new GPoint(0, 35);
icon.infoWindowAnchor = new GPoint(18, 11);
var marker = new GMarker(mpoint,icon);
return marker;
}
function init(){
map = new GMap2( document.getElementById("map"));
map.setCenter( new
GLatLng(26.329470285042284,127.74491965770721), 18 );
//マップコントローラを付ける
map.addControl(new GLargeMapControl());
addMarker(); //マーカーをマッピング
}
//]]>
</script>
Masashi.K
こんにちは。Google Maps 活用講座を参考にしていただいてありがとうございます。
エラーの件なのですが、Javascriptの知識がまだ少ない方に原因を解説すると
大変なので、サンプルを用意しました。
こちらを見て、コードの比較をしていただければと思います。
（一番左下のマーカをクリックすると、写真つきで表示されます）
http://googlemaps.googlermania.com/map_example_17.html
分からないことなどがあれば、お気軽にどうぞ～。
それでは失礼いたします。
hiroaki
おそらくポイントは、ご本人も気付いていらっしゃるココだと思います。
> GEvent.addListener( marker, "click", function() {
> marker.openInfoWindowHtml( markers[i].getAttribute("html") );
> } );
Masashi.K さんのご解答もありますが、さいしょに提示された文脈のまま、それを変えるとしたら、こうでしょうか（試してません）。
GEvent.addListener( marker, "click",
GEvent.callbackArgs( marker, function( html ){
this.openInfoWindowHtml( html );
}), markers[i].getAttribute("html") );
GEvent.addListener に渡す function はクロージャですから、そのことに注意してみてください。
ouka
まさかGoogle Maps 活用講座の管理人さんから直にお返事をいただけるとは・・・！感激です。
サンプルを参考に希望するものが出来ました。
ついでに質問させてください。
ふきだしの幅についてはこのグループの別の話題にもありましたが、今回の場合CSSを使って
marker.openInfoWindowHtml("<div style='width:
200px;'>"html"</div>");
などのようにしてみましたがダメでした。
ここはJavaではどのように指示すればよいのでしょうか？
調子に乗っていろいろと質問してすみません。
どうぞよろしくお願いします。
Masashi.K
お力添えできたようで、よかったです。
「吹き出しの幅」についてなのですが、GoogleMapsAPIで提供されている機能では
幅を固定する方法はないですね。（最大幅を指定する方法はありますが。）
ということなので、以前はCSSを使った方法で強制的に固定させました。
ではなぜoukaさんの方法ができないのかというと、「height」が指定されていないからです。
なので、以下のようにすればできると思います。
marker.openInfoWindowHtml("<div style='width:200px;height:
150px;'>"html"</div>");
あと「CSSを使わないで強制的に」と言うのであれば、<TABLE>タグを使うのも手です。
いずれにしても 公式の方法ではできないはずなので
それに依存しないような内容を表示するのがＢｅｓｔですね。
（最近のGoogleMapsAPIで方法が提供されていれば別ですけど。）
参考までにどうぞ。
ouka
引き続きお返事いただきありがとうございました。
残念ながら、ご指摘の方法ではできませんでした。
Google Maps 活用講座の
http://googlemaps.googlermania.com/map_example_13.html
ではheightの指定無しに改造してもできたのですが、
たとえば
marker.openInfoWindowHtml("<div style='width:200px;height:
150px;'>html</div>");
とするとふきだしの中に「html」というテキストが表示され、幅も固定されるので、htmlという引数を取り出すコマンドか何かがもうひとつ必要なの
ではないかと考えています。
もう少し自分なりに勉強してみようと思います。
どうもありがとうございました。