GoogleマップV3にInfoWindowsとマーカーを動的に追加する

Question

私はGoogle Map V3 JavaScript APIに非常に迷惑な問題があります。私のJavaScriptコードに問題があるかもしれません。ここで

は私の完全なコードです：ここでは

<script> 
    var __mvcGoogleMap; 
    var __mvcGeocoder; 
    var markersArray = []; 
    var infoWindowsArray = []; 

    function _initializeGoogleMap() { 

     __mvcGeocoder = new google.maps.Geocoder(); 

     var latlng = new google.maps.LatLng(38.98569417582484, 35.351452857849154); 

     var myOptions = { 
      zoom: 6, 
      center: latlng, 
      mapTypeId: google.maps.MapTypeId.HYBRID, 
      panControl: true, 
      zoomControl: true, 
      mapTypeControl: true, 
      scaleControl: true, 
      streetViewControl: false, 
      overviewMapControl: true 
     }; 
     __mvcGoogleMap = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
    } 

    function findOnMap() { 

     var srchVal = $("#txtMapSearch").val(); 

     __mvcGeocoder.geocode({'address': srchVal}, function(results, status) { 

      if (status == google.maps.GeocoderStatus.OK) { 

       actionURL = '/accommodation/HotelsForMap'; 
       actionData = 'lat=' + results[0].geometry.location.lat() + '&lng=' + results[0].geometry.location.lng(); 

       var _latLongs = []; 
       var _infoWindows = []; 

       $.ajax({ 
        type: "POST", 
        url: actionURL, 
        data: actionData, 
        success: function (r) { 

         if (markersArray) { 
          for (i in markersArray) { 
           markersArray[i].setMap(null); 
          } 
          markersArray.length = 0; 
         } 

         for (var i = 0; i < r.length; i++) { 

          _latLongs.length = 0; 
          _infoWindows.length = 0; 

          _latLongs[i] = new google.maps.LatLng(r[i].LatLong.Latitude, r[i].LatLong.Longitute); 

          addMarker(_latLongs[i], r[i].Title); 
          addInfoWindow(r[i].InfoWindow.Content, markersArray[i]); 
          google.maps.event.addListener(markersArray[i], 'click', function() { 

           infoWindowsArray[i].open(__mvcGoogleMap, markersArray[i]); 
          }); 
         } 

         var _currentPossition = results[0].geometry.location; 
         __mvcGoogleMap.setCenter(_currentPossition); 
         __mvcGoogleMap.setZoom(14); 
        } 
       }); 
      } else { 
       alert("Geocode was not successful for the following reason: " + status); 
      } 
     }); 
    } 

    function addMarker(location, title) { 
     marker = new google.maps.Marker({ 
      position: location, 
      title: title, 
      map: __mvcGoogleMap, 
      draggable: false 
     }); 

     markersArray.push(marker); 
    } 

    function addInfoWindow(content, marker) { 

     infoWindow = new google.maps.InfoWindow({ 
      content: content 
     }); 
     infoWindowsArray.push(infoWindow); 
    } 

    $(function() { 
     $.getScript('http://maps.google.com/maps/api/js?sensor=false&callback=_initializeGoogleMap', function() { 
      $(window).load(_initializeGoogleMap); 
     }); 
    }); 

    $("#btnMapSearch").click(function() { 
     findOnMap(); 
    }); 
</script> 

は状況です：私が何をしようとしています私はマップを初期化し、場所を検索した後、私はその場所LatLang値を取得し、それを送ることをされました私のサーバーに。次に、ホテルの情報（名前、緯度、緯度など）を使用してサーバーから結果を取得します。

次に、マーカーを適切な場所に設定し、infoWindowを各マーカーに付けます。 infoWindows以外はすべて正常に動作します。

私はマーカーをクリックすると、私は、ブラウザのコンソールウィンドウにこのエラーを参照してください。

Uncaught TypeError: Cannot call method 'open' of undefined

あなたは私がここで間違ってやっている何を見ていただけますか？

Answer 1

iの値のクロージャを作成して、各無名関数が作成されるときに囲まれた変数に代入されるようにする必要があります。そうでない場合は、ループを続行すると、ループが終了し、配列の長さ+1の値（常に未定義のインデックス）を保持したままになるまで、iの値が変更されます。これはiですすべてのあなたの無名関数が参照します。あなたのAJAXコールバックループで次を試してください：

google.maps.event.addListener(markersArray[i], 'click', (function(idx) { 
    return function() { 
     infoWindowsArray[idx].open(__mvcGoogleMap, markersArray[idx]); 
    }; 
})(i));