다중 마커 및 오버레이 닫기 관련 문제

아래 링크와 같이 컨텐츠는 HTMLElement로 생성하여 이벤트를 등록해주시고
스코프 유지를 위해 forEach 또는 함수 스코프로 만들어주세요.
https://devtalk.kakao.com/t/topic/41602/5
https://devtalk.kakao.com/t/topic/54337/2

마커를 생성하는 반복문 안에서 모두 처리가 가능합니다.
첫 번째 반복문에 마커 생성, 커스텀 오버레이 생성 및 닫기 이벤트 추가, 마커 이벤트를 등록해주세요.
그리고 커스텀 오버레이 생성 시 map 파라미터를 부여하지 않으면 지도에 올라가지 않기 때문에
위 로직처럼 map 파라미터를 적용하고 setMap(null);을 호출하지 않아도 됩니다.

정리하면 아래와 같은 로직으로 구현이 됩니다.
참고해주세요.

positions.forEach(function (pos) {
    // 마커를 생성합니다
    var marker = new kakao.maps.Marker({/* do something */});

    // content HTMLElement 생성
    var content = document.createElement('div');

    var info = document.createElement('span');
    info.appendChild(document.createTextNode(pos.title));
    content.appendChild(info);

    var closeBtn = document.createElement('button');
    closeBtn.appendChild(document.createTextNode('닫기'));
    // 닫기 이벤트 추가
    closeBtn.onclick = function() {
        overlay.setMap(null);
    };

    content.appendChild(closeBtn);

    // customoverlay 생성, 이때 map을 선언하지 않으면 지도위에 올라가지 않습니다.
    var overlay = new daum.maps.CustomOverlay({
        position: pos.latlng,
        content: content
    });

    // 마커를 클릭했을 때 커스텀 오버레이를 표시합니다
    kakao.maps.event.addListener(marker, 'click', function() {
        overlay.setMap(map);
    });
});
2개의 좋아요