https://apis.map.kakao.com/web/sample/removableCustomOverlay/
위 내용을 보고 커스텀 오버레이를 만들었습니다.
<c:forEach items="${listShop}" var="shop" varStatus="status">
var markerPosition = new kakao.maps.LatLng("${shop.shopLocationX}", "${shop.shopLocationY}");
// 마커를 생성합니다
var marker = new kakao.maps.Marker({
position: markerPosition,
map: map
});
var content = '<div class="wrap">' +
' <div class="info">' +
' <div class="title">' +
" ${shop.shopName}" +
' <div class="close" onclick="closeOverlay()" title="닫기"></div>' +
' </div>' +
' <div class="body">' +
' <div class="img">' +
' </div>' +
' <div class="desc">' +
' <div class="ellipsis";>' +
" ${shop.shopAddress}" +
' </div>' +
' <div class="jibun ellipsis">(우)' + "${shop.shopPost}" + '</div>' +
' <div><a href="https://map.kakao.com/link/to/' + "${shopName}" + ',' + "${shop.shopLocationX}" + ',' + "${shop.shopLocationY}" + '"' + 'style="color:blue" target="_blank">길찾기 </a>' +
' <a href="/static/html&" style="color:blue" target="_blank"">상세정보</a></div>' +
' </div>' +
' </div>' +
' </div>' +
'</div>';
var overlay = new kakao.maps.CustomOverlay({
content: content,
position: marker.getPosition()
});
(function(marker, overlay) {
kakao.maps.event.addListener(marker, 'click', function() {
overlay.setMap(map);
});
})(marker, overlay);
function closeOverlay() {
overlay.setMap(null);
</c:forEach>
forEach 구문을 이용해서 DB에서 받아온 만큼 마크를 찍고 커스텀 오버레이를 만든건 좋은데
이상하게 닫기 버튼만 작동을 하지 않습니다.
DB에서 맨 상단에 위치해 제일 처음 만들어진 오버레이의 닫기 버튼만 작동합니다
closeOverlay 함수를 밖으로 빼면 아예 코드가 통채로 고장나버립니다
어떻게 해야할까요?