다중 마커 커스텀 오버레이 닫기 기능 코드 문의

지도/로컬 API
#1

지도/로컬 API에 대한 문의게시판입니다.

다중 커스텀 오버레이를 생성까지는 되는데 닫기가 실행이 되지 않습니다.
html은 정보가 담긴 배열 객체입니다.

for (var i = 0; i < html.length; i ++) {
var content = ‘[div class=“wrap”>’ +
’ [div class=“info”>’ +
’ [div class=“title”>’ +
html[i].name +
’ [div class=“close” onclick=“closeOverlay()”>닫기’ +
’ [/div>’ +
’ [div class=“body”>’ +
’ [div class=“desc”>’ +
’ [div class=“time”>’+html[i].time+’[/div>’ +
’ [/div>’ +
’ [/div>’ +
’ [/div>’ +
’[/div>’;
// 마커를 생성합니다
var marker = new kakao.maps.Marker({
map: map, // 마커를 표시할 지도
position: html[i].latlng // 마커의 위치
});

            var overlay = new kakao.maps.CustomOverlay({
                content: content,
                map: map,
                position:marker.getPosition()
            });

            // 마커를 클릭했을 때 커스텀 오버레이를 표시합니다
            kakao.maps.event.addListener(marker, 'click', function() {
                overlay.setMap(map);
            });
            // 커스텀 오버레이를 닫기 위해 호출되는 함수입니다 
            function closeOverlay() {
                overlay.setMap(null);     
            }
        }

반복문 안에서 마커도 생성하고 커스텀 오버레이도 생성하는 코드입니다.
어떻게 코드를 고쳐야할까요 도움주시면 감사하겠습니다!ㅠㅠ

(div 닫는 태그를 양쪽 다 쓰면 글 볼 때 지워져서 한 쪽만 대괄호로 바꿨습니다.)

#2

content를 문자열이 아닌 HTML Element로 넘겨주세요.
생성한 element에 이벤트를 등록하면 됩니다.
링크 참고해주세요.