안녕하세요 다중마커로 닫기가 가능한 커스텀 오버레이를 구현하려고 하는데 가이드 부탁드립니다

안녕하세요 제가 현재 닫기가 가능한 커스텀 오버레이를 여러 마커에 적용을 시키고 싶은데요 조금 어려운 부분이 있어 도움을 요청합니다.

우선 제가 사용한 코드

이렇게 인데요

이렇게 하면 결국 반목문의 마지막 닫기만 가능하더하구요 혹시 도움 주실수 있을까요??ㅠㅠ

document.createElement로 HTMLElement를 구성고
거기에 closeOverlay 함수를 네이티브 DOM이벤트를 통해 거는 방식으로 작성하셔야 합니다.

자세한 내용은 아래 링크 참고해주세요.
https://devtalk.kakao.com/t/topic/93671

lea.ju님 답글 주셔서 정말 감사 드립니다 . 말씀하신거를 참고하여 구현을 최대한 해보려고 했으나 문제가 더 생겼는데요
우선 수정 소스는 아래 와 같이 수정 해 봤습니다

지도에 마커가 2개정도 찍히는건 확인 했으나 마커를 클릭시 다른 마커에 이벤트가 적용이되고 닫기 버튼 기능 조차 되지 않고 있는데 혹시 이런 부분에서도 가이드를 얻을 수 있을까요?

아래 코드 참고해주세요.

<div id="map" style="width:100%;height:350px;"></div>
<script>
var mapContainer = document.getElementById('map'), // 지도의 중심좌표
    mapOption = { 
        center: new kakao.maps.LatLng(33.451475, 126.570528), // 지도의 중심좌표
        level: 3 // 지도의 확대 레벨
    }; 

var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다

var positions = [
    {
        title: '카카오', 
        latlng: new kakao.maps.LatLng(33.450705, 126.570677)
    },
    {
        title: '생태연못', 
        latlng: new kakao.maps.LatLng(33.450936, 126.569477)
    },
    {
        title: '텃밭', 
        latlng: new kakao.maps.LatLng(33.450879, 126.569940)
    },
    {
        title: '근린공원',
        latlng: new kakao.maps.LatLng(33.451393, 126.570738)
    }
];

for(let i=0; i < positions.length; i++){
    var data = positions[i];
    displayMarker(data);
}

// 지도에 마커를 표시하는 함수입니다    
function displayMarker(data) { 
    var marker = new kakao.maps.Marker({
        map: map,
        position: data.latlng
    });
    var overlay = new kakao.maps.CustomOverlay({
        yAnchor: 3,
        position: marker.getPosition()
    });
    
    var content = document.createElement('div');
    content.innerHTML =  data.title;
    content.style.cssText = 'background: white; border: 1px solid black';
    
    var closeBtn = document.createElement('button');
    closeBtn.innerHTML = '닫기';
    closeBtn.onclick = function () {
        overlay.setMap(null);
    };
    content.appendChild(closeBtn);
    overlay.setContent(content);

    kakao.maps.event.addListener(marker, 'click', function() {
        overlay.setMap(map);
    });
}
</script>

lea.ju님 너무 감사합니다. 덕분에 해결 되지 않았던 부분이 정상적으로 잘 해결이 되었습니다. 감사합니다~

다른 마커 클릭시에 기존에 열려있는 오버레이가 닫히게 하는 것은 어떻게 하나요? ㅜㅠ

CustomOverlay 객체를 관리하는 배열을 생성하고
클릭 시 배열을 돌며 overlay.setMap(null); API를 호출하여 지도에서 제거해주세요.
http://apis.map.kakao.com/web/documentation/#CustomOverlay_setMap

lea.ju 님 덕분에 저도 해결하고 가요!! 감사합니당!!!