Google Mapで複数マーカーの情報ウィンドウ

Google Mapで複数（多数）のマーカーの情報ウィンドウを切り替えたいです。

2個の場合はうまくいきました。
http://weed777.sakura.ne.jp/wordpress/?p=107

原理としては同じコードなのですが、7個に増やすとうまくいきません。
http://weed777.sakura.ne.jp/wordpress/?p=122

どうぞよろしくお願いします。

No.3 ベストアンサー 回答者： fujillin 回答日時： 2012/02/08 09:57

2個と7個の場合のコードの違いは、ループで処理しているのとそうでないのの違いですね。

（2個の場合はダイレクトにinfo[1]などだけれど、7個ではインデックスが変数）
イベント処理の関数内にループのインデックスが含まれていますが、バインドされる時には関数内の変数は評価されず、実行時に値が評価されます。
（バインドのループ内では「i」は順にインクリメントされていますが、実行時には「i」の値は不定です。（大抵は8）

試しに、バインドする関数を
　google.maps.event.addListener(marker[i], 'click', function(){ alert(i); });
のようにしてみればわかると思います。（どのマーカーをクリックしても「8」が表示される）

それなので、変数iの値を固定して関数に引き渡しておく必要があります。
わかりやすく、別の関数を定義して
　google.maps.event.addListener(marker[i], 'click', showInfo(i) );

　function showInfo(index){
　　return function(){
　　　var i=0;
　　　while(info[i]) info[i++].close();
　　　info[index].open(map,marker[index]);
　　}
　}
のようにすれば、意図通り動作するかと思います。

＊関数showInfoはループの外でinitialize内に定義してください。
　（initialize外だと、今度はinfo[]、marker[]の参照ができなくなります。）
　　↑原因はこれと同様に、関数のスコープと変数の値の評価のタイミングにあるので、そのあたりを調べてみるとわかるかと思います。
　匿名関数で記述することも可能ですので、試してみてください。

この回答へのお礼

原因から丁寧に教えて頂いて、
本当にありがとうございました。
とても勉強になりました。

http://weed777.sakura.ne.jp/wordpress/?p=141

お礼日時：2012/02/08 12:17

No.2 回答者： kosukejlampnet 回答日時： 2012/02/08 04:21

Firebugでチェックしてみたら、

info[i]が未定義ってエラーが出たよ。

この回答へのお礼

教えて頂いて、ありがとうございます。
「イベント処理の関数内にループのインデックスが含まれていますが、バインドされる時には関数内の変数は評価されず、実行時に値が評価されます。」というのが真相でした。
でもfirebugを使うとこんなことも分かるんですね。
勉強になりました！

お礼日時：2012/02/08 12:17

No.1 回答者： kosukejlampnet 回答日時： 2012/02/08 03:59

いや、できてるねぇ。