複数の地図でマーカークリックで吹き出し表示

[ぽんすけ]

はじめまして。ぽんすけと申します。
Google Maps APIを使ったコンテンツを制作しているのですが、
JavaScriptもGoogle Maps APIもほぼ初心者で、上手くいかず行き詰ってしまいました。

このURLです。
http://3-7-5.jp/lab/gmap/test.html

やろうとしていることは、複数の地図を表示して、それぞれマーカーと吹き出しを1つずつ表示、
吹き出しを閉じてもマーカークリックで再度表示する、というものです。

四苦八苦しながらここまで作ったのですが、問題が2つあって困っています。

1. 1つ目の地図（map0）のマーカーをクリックすると、2つ目の地図（map1）の吹き出しが表示される。
2. 2つ目の地図のズームコントロールと、マップタイプ切り替えボタンが表示されない。

for inでループさせていて、ループのさせ方がマズいのではないかと思うのですが、
どこを直せばよいのか、随分考えたのですが分かりませんでした。。。

試しにfor inを使わないで地図2つ分を直書きしてみると、
吹き出しとズームコントロールは狙い通り表示されましたが、
マップタイプ切り替えボタンは、2つ目の地図では表示されませんでした。

下手なソースで恐縮ですが、アドバイスいただけますでしょうか。
よろしくお願いいたします。

[Kuroda Kouta]

メール、ありがとうございました。rikです。
実はAPIについては、まだ経験がほとんどありません。

そこで、目下勉強中のところなんです。
いままで、わかったことといえば、自分自身のためにまとめた

http://www.geocities.jp/rikwhi/google_map/nyu_google.html

くらいなんです。
そんな次第で、まだソースを読むほどの力がありません。
そんなことを正直に、最初にお断わりしておかなければならないでしょう。

おっしゃっていること、よくわかります。私もいま同じことで問題をかかえています。

これから、いろいろとやってみるつもりですから、その中でお返事ができるのではないかと思います。
取り急ぎ、こちらの事情だけでも連絡いたします。

rik こと Kuroda Kouta

[ぽんすけ]

ご返信ありがとうございます。

同じ問題をかかえていらっしゃるのですね。
私ももっと勉強しなければ、と思っています。
今日も色々試したのですが、相変わらず吹き出しの挙動が思い通りになりませんでした。

何かお分かりになりましたら、またお知らせいただけると嬉しいです。
よろしくお願いします。

ところで、2つ目の地図のズームコントロールと、マップタイプ切り替えボタンが表示されない。
についてですが、ソースコードには何も手を加えていないのですが、
先ほど確認しましたら何故か表示されていました。

ですので、問題は
「1つ目の地図（map0）のマーカーをクリックすると、2つ目の地図（map1）の吹き出しが表示される。 」
だけになったことをご報告させていただきます。

解決方法をご存知の方、ご教示いただけますと幸いです。

[Kuroda Kouta]

ぽんすけさん、こんにちは。rikです。

実は、「グーグル」の「グループ」の「グループオーナー」をしていて、現在45人のメンバーがいます。
そして、メンバーには面倒でも、面識がなくても、いちおう連絡をするようにしているのです。

そんなわけで、単に「Google-Maps-API-Japan」のメンバーであるおっちょこちょいな私は、勘違いをして返信をしてしまったんです。初めてのことだったんで、うっかりしてお恥ずかしい次第。

今後は、変な内容のメールを返事しないで、わかることだけを返信します。
以後、気をつけますので、よろしく願います。

http://riksys.com
rik こと Kuroda Kouta（黒田康太）

[kino]

書き込みが錯綜してますが、もう解決されたでしょうか？

問題点は GEvent 関連のスコープにあるような気がします。
GEvent の中に alert を入れると原因が一目瞭然です。

GEvent.addListener(marker, 'click', function() { // マーカークリックで表示
marker.openInfoWindowHtml('<h6>' + spots[i].spotName + '</h6><p>'
+ spots[i].spotInfo + '</p>');
alert(i);
});

どちらのマーカーをクリックしてもアラートウィンドウには「１」と表示されます。


解決案ですが、イベント定義部分を別関数にしてしまえば良いのではないでしょうか。

function loadMap() {
........
// 吹き出しを表示
if (infoWindow) {
myEvent(marker, i);
GEvent.trigger(marker, 'click'); // 初期表示
}
........
}

function myEventr(marker, i){
GEvent.addListener(marker, 'click', function() { // マーカークリックで表示
marker.openInfoWindowHtml('<h6>' + spots[i].spotName + '</h6><p>' +
spots[i].spotInfo + '</p>');
});
}

[ぽんすけ]

kinoさん、ご返信ありがとうございました。

ご指摘の通り、ループがカウントアップされる度に、
markerが上書きされているような感じがしていたのですが、
知識不足で解決できずにいました。。

ご教示いただいたように、イベント定義部分を別関数にしてループの外に出したら、
思い通りの動作になりました！！

とても助かりました。感謝です。
ありがとうございました！！！