「夫を成功」へ導く妻の秘訣 座談会

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

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

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

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

このQ&Aに関連する最新のQ&A

A 回答 (3件)

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[]の参照ができなくなります。)
  ↑原因はこれと同様に、関数のスコープと変数の値の評価のタイミングにあるので、そのあたりを調べてみるとわかるかと思います。
 匿名関数で記述することも可能ですので、試してみてください。
    • good
    • 0
この回答へのお礼

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

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

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

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


info[i]が未定義ってエラーが出たよ。
「Google Mapで複数マーカーの情報」の回答画像2
    • good
    • 0
この回答へのお礼

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

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

いや、できてるねぇ。

「Google Mapで複数マーカーの情報」の回答画像1
    • good
    • 0

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!


人気Q&Aランキング