지도/로컬 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 닫는 태그를 양쪽 다 쓰면 글 볼 때 지워져서 한 쪽만 대괄호로 바꿨습니다.)