<%@ page language=“java” contentType=“text/html; charset=UTF-8”
pageEncoding=“UTF-8”%>
<%@taglib prefix=“c” uri=“http://java.sun.com/jsp/jstl/core” %>
/타이틀/
#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;}
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메소드가 실행되지 않습니다 ㅠ 도와주세요
