닫기가 가능한 커스텀 오버레이

<%@ page language=“java” contentType=“text/html; charset=UTF-8”
pageEncoding=“UTF-8”%>
<%@taglib prefix=“c” uri=“http://java.sun.com/jsp/jstl/core” %>

Insert title here /*맵입력*/ #kk_map { margin: 0 AUTO; width: 90%; TOP: 81PX; height: 350px; z-index: 1; }

/타이틀/
#kk_title {
width: 100%;
height: 100px;
background-color: #68ca86;
margin-top: 6%;

}

.kk_wrap {position: absolute;left: 0;bottom: 40px;width: 288px;height: 132px;margin-left: -144px;text-align: left;overflow: hidden;font-size: 12px;font-family: ‘Malgun Gothic’, dotum, ‘돋움’, sans-serif;line-height: 1.5;}
.kk_wrap * {padding: 0;margin: 0;}
.kk_wrap .kk_info {width: 286px;height: 120px;border-radius: 5px;border-bottom: 2px solid #ccc;border-right: 1px solid #ccc;overflow: hidden;background: #fff;}
.kk_wrap .kk_info:nth-child(1) {border: 0;box-shadow: 0px 1px 2px #888;}
.kk_info .kk_title {padding: 5px 0 0 10px;height: 30px;background: #eee;border-bottom: 1px solid #ddd;font-size: 18px;font-weight: bold;}
.kk_info .kk_close {position: absolute;top: 10px;right: 10px;color: #888;width: 17px;height: 17px;background: url(‘http://t1.daumcdn.net/localimg/localimages/07/mapapidoc/overlay_close.png’);}
.kk_info .kk_close:hover {cursor: pointer;}
.kk_info .kk_body {position: relative;overflow: hidden;}
.kk_info .kk_desc {position: relative;margin: 13px 0 0 90px;height: 75px;}
.kk_desc .kk_ellipsis {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.kk_desc .kk_jibun {font-size: 11px;color: #888;margin-top: -2px;}
.kk_info .kk_img {position: absolute;top: 6px;left: 5px;width: 73px;height: 71px;border: 1px solid #ddd;color: #888;overflow: hidden;}
.kk_info:after {content: ‘’;position: absolute;margin-left: -12px;left: 50%;bottom: 0;width: 22px;height: 12px;background: url(‘http://t1.daumcdn.net/localimg/localimages/07/mapapidoc/vertex_white.png’)}
.kk_info .kk_link {color: #5085BB;}

Daum 지도 시작하기
var container = document.getElementById('kk_map'); var options = { center: new daum.maps.LatLng(33.450701, 126.570667), level: 7 };
	var map = new daum.maps.Map(container, options);
	// 주소-좌표 변환 객체를 생성합니다
	var geocoder<c:out value="${article.rno}"/> = new daum.maps.services.Geocoder();

	// 주소로 좌표를 검색합니다
	geocoder<c:out value="${article.rno}"/>.addressSearch('<c:out value="${article.sto_addr}"/>',function(result, status) {

	    // 정상적으로 검색이 완료됐으면 
	     if (status === daum.maps.services.Status.OK) {

	        var coords = new daum.maps.LatLng(result[0].y, result[0].x);

	        // 결과값으로 받은 위치를 마커로 표시합니다
	        var marker = new daum.maps.Marker({
	            map: map,
	            position: coords
	        });
	        // 지도의 중심을 결과값으로 받은 위치로 이동시킵니다
	        map.setCenter(coords);
	        var content = '<div class="kk_wrap">'+
	        ' <div class="kk_info">'+
           ' <div class="kk_title"><c:out value="${article.sto_name}"/>'+
           '     <div class="kk_close" onclick="closeOverlay()" title="닫기"></div>'+
           ' </div>'+
           ' <div class="kk_body">'+
              '  <div class="kk_img"> <img src="http://cfile181.uf.daum.net/image/250649365602043421936D" width="73" height="70">'+
              '  </div>'+
               ' <div class="kk_desc">'+
                  '  <div class="kk_ellipsis"><c:out value="${article.sto_addr}"/></div>'+
                  '  <div class="kk_jibunellipsis">(우) 63309 (지번) 영평동 2181</div>'+
                    '<div><a href="kk_viewrno?${article.rno}" target="_blank" class="kk_link">게시글보기</a><a href="http://map.daum.net/link/to/Hello World!,33.450701,126.570667" class="kk_link" target="_blank">길찾기</a></div>'+
               ' </div>'+
            '</div>'+
       ' </div>'+
    '</div>'; 
   
// 마커 위에 커스텀오버레이를 표시합니다
// 마커를 중심으로 커스텀 오버레이를 표시하기위해 CSS를 이용해 위치를 설정했습니다

// 커스텀 오버레이를 닫기 위해 호출되는 함수입니다 
	    
	        // 인포윈도우로 장소에 대한 설명을 표시합니다
	        var overlay = new daum.maps.CustomOverlay({
 			 content: content,
			  map: map,
			 position: marker.getPosition()       
			 
			});
			

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

			var closeclick=$(".kk_close");
			// 커스텀 오버레이를 닫기 위해 호출되는 함수입니다 
		function closeOverlay() {
		  overlay.setMap(null);     
			}
		      
			
	     } 
	    
	});    
	 
</script>
</c:forEach>

주소를 여러개 검색하고 띄운 마크들의 오버레이들을 닫음 상태로 시작해 클릭시 열고 x 버튼시 닫기로 구현하고 싶었으나
오버레이들이 열린채로 닫기의 closeOverlay메소드가 실행되지 않습니다 ㅠ 도와주세요

https://devtalk.kakao.com/t/overlay/37448/2?u=doji.doo

우선 이 답변을 보시고 구현해 보세요.

foreach문을 통해 데이터베이스에서 여러개의 오버레이로 받아오는것은 구현 되었는데

클릭이벤트 들을 열고닫는건 어찌 접근해야하나요

아까 글 전체복사해서 올렷엇는데 다시보니 안보이네요 스크립트 전체가 포위치 문으로 도는형태입니다.
접근이잘못된건가요

크흡… 위에 제 답변이… 내용적으로 부족하지는 않다고 생각되는데 ㅠㅠ

저 커스텀 오버레이들 분명히 스타일을 보아하니 예제에 있는 형태 그대로이고
문자열을 이어붙여서 content를 구성하셨을 것이라 예상되는데요,

일단 document.createElement로 만든 HTMLElement를 content로 넘겨주시는 방식으로 변경하셔야 합니다.
그리고 각각의 element가 기본적으로 제공하는 이벤트 리스너를 통해 이벤트들을 등록하셔야 합니다.

닫기 버튼을 document.createElement로 만들고
이를 closeBtn 이란 변수에 할당 받았다고 가정하면

closeBtn.onclick = function () { /* do something */ };

혹은

closeBtn.addEventListener('click', function () { /* do something */ });

이런식으로 모든 커스텀 오버레이의 content들 마다 이벤트를 따로 등록해 주셔야 합니다.
적어도 이 로직들만큼은 매번 html을 생성해내는 곳에 들어 있어야 하는 것이죠.

물론 현재 상태 그대로 구현할 방법이 없는건 아니지만
문자열로 content를 만들고 그 안에서 onclick으로 제어하는 닫기 버튼이 제대로 동작하도록 만드는 것은 매우 복잡하고 나중에 유지 보수도 힘들겁니다.

일단 위에 답변드린 것 처럼

이 예제를 살펴보시는 것으로 시작해 보세요.

3개의 좋아요

큰 도움 되었습니다. 감사합니다!