Google지도에 여러 정보 창이있는 다중 마커 플롯

Question

Google 데이터베이스의 클라이언트 기능을 기반으로 동적으로 생성되는 mapArray가 있습니다.

저는 루프를 통해 루프를 만들고 각각의 정보창을 열려고 click 수신기를 만듭니다.

여기에 내가 가진 무엇 지금까지

for (var i in mapArray) { 

    var thislatlng = new google.maps.LatLng(mapArray[i][1], mapArray[i][2]), 
    contentString = '<b>' + mapArray[i][6] + '</b><br /><br />' + mapArray[i][3] + '<br /><br /><a href="http://maps.google.com/maps?daddr=' + mapArray[i][3].replace("<br />", " ").replace("#", " ") + '" target ="_blank">Get Directions<\/a>', 
    marker = new google.maps.Marker({ 
     map: map, 
     position: thislatlng 
    }), 
    infowindow = new google.maps.InfoWindow({ 
     content: contentString 
    }); 

    google.maps.event.addListener(marker, 'click', function() { 

     infowindow.open(map, this); 
    }); 
} 

하지만이 문제는 그들이 모두가 공유 같은 contentString. 나는

infowindow.open(map, this); 

에

infowindow.open(map, marker); 

을 변경하여 하나의 문제를 극복하기 위해 관리하지만 여전히 윈도우의 문제를 해결하지 않습니다.

각자 infoWindow을 어떻게 동적으로 열 수 있습니까? 그들은 단지 마지막 것에 가치를두고 있습니다.

Answer 1

자바 스크립트에 차단 범위가 없습니다. infoWindow은 함수의 맨 위로 끌어 올려지고 모든 마커는 동일한 인스턴스를 가리키며 인스턴스화 된 마지막 윈도우를 가리 킵니다.

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

for (var i in mapArray) { 

    var thislatlng = new google.maps.LatLng(mapArray[i][1], mapArray[i][2]), 
     contentString = '<b>' + mapArray[i][6] + '</b><br /><br />' + mapArray[i][3] + '<br /><br /><a href="http://maps.google.com/maps?daddr=' + mapArray[i][3].replace("<br />", " ").replace("#", " ") + '" target ="_blank">Get Directions<\/a>', 
     marker = new google.maps.Marker({ 
      map: map, 
      position: thislatlng, 
      information: contentString //Just store the string in a property 
     }); 

    google.maps.event.addListener(marker, 'click', function() { 
     infowindow.setContent(this.information); //Recall the property when clicked to set the content of the window 
     infowindow.open(map, this); 
    }); 
} 

JSFiddle : 많은 의무 http://jsfiddle.net/YCW5a/