InfoWindows 배열 요소 결과 할당이 정의되지 않았습니다.

Question

다음 코드로 여러 InfoWindow를 생성하려고합니다. EDIT : 명확히하기 위해 모든 창을 동시에 열어 둡니다. catch되지 않은 형식 오류 :

(full source)

for (var i = 0; i < 3; i++) { 
     var markerOptions = {position:point[i], map:map}; 
     var marker = new google.maps.Marker(markerOptions); 
     content = "Hello " + i; 
     infowindow[i] = new google.maps.InfoWindow({content: content}); 
     google.maps.event.addListener(marker, 'mouseover', function() 
     { 
     infowindow[i].open(map,this); 
     }); 
    } 

는 그러나, 나는 크롬에서 다음과 같은 오류가 정의되지 않은 방법 '개방'호출 할 수 없습니다.

배열 대신 일반 변수 "infowindow"를 사용하면 단일 정보창이 예상대로 나타납니다.

Answer 1

내가 원하는 것을 달성하기 위해, 나는 배운 a closure is needed 그 :

이 모든 창문 Hello2 결과

for (var i = 0; i < 3; i++) 
{ 
    (function(i) { 
    var markerOptions = {position:point[i], map:map, html:'Hello' }; 
    var marker = new google.maps.Marker(markerOptions); 

    google.maps.event.addListener(marker, 'mouseover', function() 
    { 
     infowindow.setContent(this.html); // this is the trick: html attribute on markerOptions :), I used a array here 
     infowindow.open(map,this); 
    }); 
    })(i); 
} 

Answer 2

콘솔 (firebug)에 infowindow [i]를 출력하여 예상 한 결과를 얻었습니까? 일반적으로 이렇게하는 방법은 하나의 정보창 개체를 생성하고 정보창의 내용을 재사용/이동 및 변경하는 것입니다.

이 링크를 편리 수 있습니다 : HTTP : //www.svennerberg.com/2009/09/google-maps-api-3-infowindows/에게 샘플을 작업

Answer 3

는

 var map; 
     var mapOptions = { center: new google.maps.LatLng(0.0, 0.0), zoom: 2, 
     mapTypeId: google.maps.MapTypeId.ROADMAP }; 
     var infowindow = new google.maps.InfoWindow(); 
     function initialize() { 
     map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); 
     point = []; 
     point[0] = new google.maps.LatLng(0.0,0.0); 
     point[1] = new google.maps.LatLng(0.0,10.0); 
     point[2] = new google.maps.LatLng(0.0,20.0); 


      for (var i = 0; i < 3; i++) { 
       var content = "Hello"+i; 
       addInfowindows(point[i], content)    
      } 
     } 
function addInfowindows(point, content){ 


      var markerOptions = {position:point, map:map}; 
      var marker = new google.maps.Marker(markerOptions); 


      google.maps.event.addListener(marker, 'mouseover', function() 
      { 
      infowindow.setContent(content); 
      infowindow.open(map,this); 
      }); 


} 
google.maps.event.addDomListener(window, 'load', initialize); 

Answer 4

만들 수 있습니다 하나의 infoWindow. 나는이 같은 프로젝트에 사용 :

var infowindow = new google.maps.InfoWindow(); 

for (var i = 0; i < 3; i++) 
{ 
    var markerOptions = {position:point[i], map:map, html:'Hello' }; 
    var marker = new google.maps.Marker(markerOptions); 

    google.maps.event.addListener(marker, 'mouseover', function() 
    { 
     infowindow.setContent(this.html); // this is the trick: html attribute on markerOptions :), I used a array here 
     infowindow.open(map,this); 
    }); 
}