다중마커 클릭시 undefined 오류

지도/로컬 API
1 
    // 마커 클러스터러를 생성합니다 
var clusterer = new kakao.maps.MarkerClusterer({
    map: map, // 마커들을 클러스터로 관리하고 표시할 지도 객체 
    averageCenter: true, // 클러스터에 포함된 마커들의 평균 위치를 클러스터 마커 위치로 설정 
    minLevel: 7 // 클러스터 할 최소 지도 레벨 
});

// 데이터를 가져오기 위해 jQuery를 사용합니다
// 데이터를 가져와 마커를 생성하고 클러스터러 객체에 넘겨줍니다
$.get("db.json", function(data) {
    // 데이터에서 좌표 값을 가지고 마커를 표시합니다
    // 마커 클러스터러로 관리할 마커 객체는 생성할 때 지도 객체를 설정하지 않습니다
    var markers = $(data.info).map(function(i, position) {
        return new kakao.maps.Marker({
            position : new kakao.maps.LatLng(position.latitude, position.longitude),
            clickable: true
        });
});
    //마커 생성
    clusterer.addMarkers(markers);
    
    //커스텀 오버레이 생성
    var overlay = $(data.info).map(function(i,position){
    return new kakao.maps.CustomOverlay({
        position : new kakao.maps.LatLng(position.latitude, position.longitude),
        map: map,
        clickable: true,
        content: 
        '<div class="wrap">' + 
    '    <div class="info">' + 
    '        <div class="title">' +position.name+ 
    '            <div class="close" onclick="" title="닫기"></div>'+ 
    '        </div>' + 
    '        <div class="body">' + 
    '            <div class="desc">' +  
    '                <div class="jibun ellipsis">' +position.tel+ '</div>' +  
    '        </div>' + 
    '    </div>' +    
    '</div>'
        
    });
    });
이런식으로 생성한 커스텀 오버레이를 각각의 마커를 클릭하면 띄우려고 하는데 

for(var i=0; i<markers.length; i++){
       kakao.maps.event.addListener(markers[i],'click',function(){
           overlay[i].setMap(map);
       });
   }

이런식으로 클릭 이벤트를 만들어 마커를 클릭하면 커스텀오버레이는 뜨지않고 Cannot read property ‘setMap’ of undefined 에러가 뜨고

kakao.maps.event.addListener(markers[0],‘click’,function(){
overlay[0].setMap(map);
});

이런식으로 일일이 인덱스를 넣어줘서 이벤트를 만들면 커스텀오버레이가 제대로 뜨는데 1.그 이유가 무엇인지 알고싶습니다. 그리고 2.일일이 함수를 적어나갈 수는 없으니 for 사용해서 가능하게끔 할 수는 없는지 해결 방법좀 알고 싶습니다!

2

https://devtalk.kakao.com/t/topic/54337/2

1개의 좋아요