120208-Google Mapで複数のマーカーの情報ウィンドウを切り替える（1つだけ表示する）3

001.js

        google.maps.event.addListener(marker[i], 'click', function () {
        //    for (var j = 0; j < json.spots.length; j++) {
        //        if (info[j]) info[j].close();
        //    }
            info[i].open(map, marker[i]);
        });

002.js

  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]);
    }
  }

120208-GoogleMapMarkerTest4.js

function initialize() {
    var marker = new Array;
    var info = new Array;

    var json =
        { "spots": [
          { "lat": "35.708104", "lng": "139.577644", "category_id": "189", "id": "464704", "category": "レンタカー", "distance": "44", "name": "トヨタレンタリース東京 吉祥寺" },
          { "lat": "35.707729", "lng": "139.577865", "category_id": "83", "id": "698546", "category": "警察・交番", "distance": "51", "name": "武蔵野警察署八幡西宮交番" },
          { "lat": "35.707023471361", "lng": "139.578433703041", "category_id": "166", "id": "486294", "category": "雑貨屋", "distance": "134", "name": "Cut Bound" },
          { "lat": "35.707619", "lng": "139.579336", "category_id": "21", "id": "215488", "category": "スーパー", "distance": "184", "name": "マルエツ プチ 吉祥寺店" },
          { "lat": "35.70645242", "lng": "139.5787114", "category_id": "20", "id": "452375", "category": "コンビニ", "distance": "197", "name": "ファミリーマート 吉祥寺東急通り店" },
          { "lat": "35.7061334721034", "lng": "139.578498601913", "category_id": "72", "id": "336698", "category": "ホテル", "distance": "215", "name": "吉祥寺第一ホテル" },
          { "lat": "35.705746", "lng": "139.577751", "category_id": "9", "id": "10832", "category": "カフェ・コーヒーショップ", "distance": "232", "name": "イルカッフェ" },
          { "lat": "35.7055977857241", "lng": "139.577871459904", "category_id": "198", "id": "221834", "category": "ファミリーレストラン", "distance": "250", "name": "ガスト" }
        ], "code": 200
        };

    // Mapクラスを生成
    // MapOptionsオブジェクトの設定して、Mapクラスの引数に指定します。
    var op = {
        zoom: 17,
        center: new google.maps.LatLng(35.7078118, 139.5773074),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"), op);

    for (var i = 0; i < json.spots.length; i++) {
        var spot = json.spots[i];

        // Markerクラスを生成
        // MarkerOptionsオブジェクトの設定して、Markerクラスの引数に指定します。
        var obj = {
            position: new google.maps.LatLng(spot.lat, spot.lng),
            map: map
        };
        marker[i] = new google.maps.Marker(obj);

        // Markerに情報ウィンドウを表示させる
        // InfoWindowOptionsオブジェクトを設定して、InfoWindowクラスを生成します。
        // 生成したInfoWindowを使って、自動的にMarkerから情報ウィンドウを表示させます。
        // content には、HTMLのソースが指定できるので、画像やリンクを貼ったりもできます。
        info[i] = new google.maps.InfoWindow({ content: '<p>' + spot.name + '</p>' });

        // Markerがクリックされたときに、情報ウィンドウを表示させる
        // イベントリスナーを使って、Markerがクリックされたときにshowinfo(i)します。
        // 別の関数を定義して変数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]);
            }
        }
    }
}