커스텀 오버레이가 닫히지 않습니다

카카오맵 API (지도/로컬)
1

마커 클릭시 오버레이가 열리는 것 까지는 구현했는데 닫히지가 않네요.
반복문 안에서 마커를 다중으로 생성하고 열리는 것도 되는데 오버레이 한개만 닫히네요.
뭐가 문제일까요?

<script>
        var container1 = document
            .getElementById('map1');
        var options1 = {
            center: new kakao.maps.LatLng(
                37.9059392, 128.8271543),
            level: 11
        };

        var map = new kakao.maps.Map(container1,
            options1);

        var changeMaptype = kakao.maps.MapTypeId.SKYVIEW;
        map.addOverlayMapTypeId(changeMaptype);

        var result = [];

        var parser = new DOMParser();

        var jsArray = [];
        jsArray[0] = '67207';
        jsArray[1] = '05';
        jsArray[2] = '수동신고';
        jsArray[3] = '03';
        jsArray[4] = '진화완료';
        jsArray[5] = '강원도 인제군 인제읍 덕산리 산 23';
        jsArray[6] = '20191211';
        jsArray[7] = '162642';
        jsArray[8] = '128.1892123425546';
        jsArray[9] = '38.09493609087529';
        result[0] = jsArray;

        jsArray = [];
        jsArray[0] = '67208';
        jsArray[1] = '05';
        jsArray[2] = '수동신고';
        jsArray[3] = '03';
        jsArray[4] = '진화중';
        jsArray[5] = '강원도 인제군 인제읍 덕산리 산 50';
        jsArray[6] = '20191211';
        jsArray[7] = '162642';
        jsArray[8] = '127.1892123425546';
        jsArray[9] = '37.09493609087529';
        result[1] = jsArray;

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

            var coords = new daum.maps.LatLng(result[i][9], result[i][8]);

            var marker = new daum.maps.Marker({
                map: map,
                position: coords,
                clickale: true
            });

            var date = result[i][6].substring(0, 4) + '.' + result[i][6].substring(4, 6) + '.' + result[i][6].substring(6, 8);
            var time = result[i][7].substring(0, 2) + ':' + result[i][7].substring(2, 4) + ':' + result[i][7].substring(4, 7);

            var content = '<div class="popup">' +
                '<div class="popup__inner">' +
                '<div class="popup__header">상황정보<div class="popup__close" onclick="closeOverlay()">X</div></div>' +
                '<div class="popup__body">' +
                '<div class="popup__time">' + date + ' ' + time + '</div>' +
                '<div class="popup__text">' + result[i][5] + '</div>' +
                '<div class="popup__info">' +
                '<div class="popup__label">진행상태</div>' +
                '<div class="popup__content">' +
                result[i][4] +
                '</div>' +
                '</div>' +
                '</div>' +
                '</div>' +
                '</div>';

            var overlay = new kakao.maps.CustomOverlay({
                position: coords
            });

            overlay.setContent(content);

            kakao.maps.event.addListener(marker, 'click', displayOverlay(map, overlay));

            function closeOverlay() {
                overlay.setMap(null);
            }
        }

        function displayOverlay(map, overlay) {
            return function() {
                overlay.setMap(map);
            }
        }
        </script>
2

아래 링크 참고해주세요.
https://devtalk.kakao.com/t/topic/41602/5
https://devtalk.kakao.com/t/topic/64848/9

3

[저 커스텀 오버레이들 분명히 스타일을 보아하니 예제에 있는 형태 그대로이고
문자열을 이어붙여서 content를 구성하셨을 것이라 예상되는데요,

일단 document.createElement로 만든 HTMLElement를 content로 넘겨주시는 방식으로 변경하셔야 합니다.
그리고 각각의 element가 기본적으로 제공하는 이벤트 리스너를 통해 이벤트들을 등록하셔야 합니다.]

이 부분이 핵심이네요.
문자열로 content를 생성하는것과 element로 만드는게 무슨 차이인지는 모르겠지만
element로 넘겨주니 제대로 동작합니다.

혹시 저 같은 분들을 위해서 제가 참고한 링크 첨부합니다.
https://devtalk.kakao.com/t/topic/60502?u=ad6979

1개의 좋아요
4

문자열로 content를 설정하는 것은 innerHTML을 삽입하는 것이기 때문에
새로운 HTMLElement가 만들어진다고 봐야합니다.
이후에 setContent로 content를 다시 설정하게 되면 이전의 Node에 걸린 이벤트는 사라지게 됩니다.

하지만, DOM Element로 직접 객체를 만들어 핸들링하게 되면
커스텀 오버레이 내부에서 일어나는 이벤트와 인터렉션들에 구애를 받지 않고
설정한 이벤트들을 사용할 수 있습니다.

이러한 차이로 인해서 질문주신 상황일 때는 직접 객체를 생성하여
content를 주는것을 권장합니다.:slightly_smiling_face: