jquery ui mapについて

質問

jquery ui mapを使って以下のようなソースで
マーカーを表示させ、MarkerClustererでマーカをまとめています。
$('#map_canvas').gmap({ 'center': new google.maps.LatLng(35.873686,139.657075)}).bind('init', function(evt, map) {
var data = new Array();
data.push({lat:'35.681382', lng:'139.766084',name:'東京駅',images:'http://google-maps-icons.googlecode.com/files/friends.png'});
data.push({lat:'35.684801', lng:'139.766086',name:'大手町駅',images:'http://google-maps-icons.googlecode.com/files/friends.png'});

for ( var i = 0; i < data.length; i++ ) {
$('#map_canvas').gmap('addMarker', { 'icon': data[i].images,'position': new google.maps.LatLng(data[i].lat, data[i].lng) } ).click(function() {
$('#map_canvas').gmap('openInfoWindow', { 'content' : data[i].name });
});
}
$('#map_canvas').gmap('set', 'MarkerClusterer', new MarkerClusterer(map, $(this).gmap('get', 'markers')));
});

マーカーの緯度経度とインフォウィンドウの内容を配列にしています。
配列の緯度経度からマーカーは表示できたのですが、
マーカーをクリックすると、インフォウィンドウが開かず、「undefined」となります。

わかる方、ご教授宜しくお願いいたします。

回答No.1

fujillin

ui mapは知りませんので、まったくの山勘のみの回答ですが…

＞インフォウィンドウが開かず、「undefined」となります。
インフォウィンドウが表示されないという意味でしょうか？
それだとインフォウィンドウの設定方法に問題がある可能性もありますが、ご質問の文章から勝手に推測すると、表示用のコンテンツ評価時にエラーを起こしているか、エラーにならなくとも「undefined」が表示されてしまうという現象ではなかろうかと思います。
これまた勝手な推測で、以下の例と同じようなミスではなかろうかと…

＜例＞
for(var i=1; i<5; i++){
document.getElementById("button" + i).onclick = function(){
alert(i);
}
}
みたいにして、各ボタンにクリックイベントを設定しても、１～４が表示されずに、みな5と表示されてしまう。

要は、変数iが実行時に評価されているので、定義時とは値が異なっているということが原因ですが、ご質問の場合はdata[i]を評価しようとして範囲外なのでundefinedとなり、さらにdata[i].nameを評価しようとしてエラーになっているかあるいはundefinedなどが返されているか、ではないでしょうか？

山勘なので、当たるも八卦ですが…