아래 링크와 같이 컨텐츠는 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);
});
});