마우스 클릭 이벤트가 작동을 안합니다. wrap 에 display: none; 이 부분 없애면 마우스 클릭이 작동하긴 하는데 저걸 없애면 모든 다중 마커에서 커스텀 오버레이가 떠서 처음 화면에는 없앤 후 마우스 클릭하면 커스텀 오버레이가 뜨게 하고 싶은데 아무리 해도 안되네요…
<%@ page import="dbhwork.DBTable" %>
<%@ page import="java.util.List" %>
<%@ page import="java.util.Map" %>
<%@ page import="java.util.concurrent.atomic.AtomicInteger" %>
<%@ page import="java.util.ArrayList" %>
<%@ page import="java.util.Iterator" %>
<%@ page import="java.util.concurrent.atomic.AtomicInteger" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>마커 생성하기</title>
<style>
.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;
display: none;
}
.wrap * {
padding: 0;
margin: 0;
}
.wrap .info {
width: 286px;
height: 120px;
border-radius: 5px;
border-bottom: 2px solid #ccc;
border-right: 1px solid #ccc;
overflow: hidden;
background: #fff;
}
.wrap .info:nth-child(1) {
border: 0;
box-shadow: 0px 1px 2px #888;
}
.info .title {
padding: 5px 0 0 10px;
height: 30px;
background: #eee;
border-bottom: 1px solid #ddd;
font-size: 18px;
font-weight: bold;
}
.info .close {
position: absolute;
top: 10px;
right: 10px;
color: #888;
width: 17px;
height: 17px;
background: url('https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/overlay_close.png');
}
.info .close:hover {
cursor: pointer;
}
.info .body {
position: relative;
overflow: hidden;
}
.info .desc {
position: relative;
margin: 13px 0 0 90px;
height: 75px;
}
.desc .ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.desc .jibun {
font-size: 11px;
color: #888;
margin-top: -2px;
}
.info .img {
position: absolute;
top: 6px;
left: 5px;
width: 73px;
height: 71px;
border: 1px solid #ddd;
color: #888;
overflow: hidden;
}
.info:after {
content: '';
position: absolute;
margin-left: -12px;
left: 50%;
bottom: 0;
width: 22px;
height: 12px;
background: url('https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/vertex_white.png');
}
.info .link {
color: #5085BB;
}
</style>
</head>
<body>
<div id="map" style="width:100%;height:1000px;"></div>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey="></script>
<%
List<Map<String, Object>> toiletData = DBTable.getLocations();
%>
<script>
var mapContainer = document.getElementById('map');
var mapOption = {
center: new kakao.maps.LatLng(37.63954, 127.0341011),
level: 3
};
var map = new kakao.maps.Map(mapContainer, mapOption);
var overlays = [];
<%
AtomicInteger markerIdGenerator = new AtomicInteger(0);
for (Map<String, Object> toilet : toiletData) {
double latitude = (double) toilet.get("Latitude");
double longitude = (double) toilet.get("Longitude");
int markerId = markerIdGenerator.incrementAndGet();
%>
var markerPosition = new kakao.maps.LatLng(<%= latitude %>, <%= longitude %>);
var marker = new kakao.maps.Marker({
position: markerPosition
});
marker.setMap(map);
var content = '<div class="wrap">' +
' <div class="info">' +
' <div class="title">' +
' 카카오 스페이스닷원' +
' <div class="close" onclick="closeOverlay(<%= markerId %>)" title="닫기"></div>' +
' </div>' +
' </div>' +
'</div>';
var overlay = new kakao.maps.CustomOverlay({
content: content,
map: map,
position: marker.getPosition()
});
kakao.maps.event.addListener(marker, 'click', (function(overlay) {
return function() {
closeAllOverlays(); // 모든 오버레이 닫기
overlay.setMap(map); // 클릭한 오버레이 표시
overlay.getElement().className = 'wrap'; // hiddenOverlay 클래스 제거
};
})(overlay));
overlays[<%= markerId %>] = overlay;
function closeOverlay(markerId) {
overlays[markerId].setMap(null);
}
function closeAllOverlays() {
for (var i = 0; i < overlays.length; i++) {
if (overlays[i]) {
overlays[i].setMap(null);
}
}
}
overlay.setMap(map); // 초기에 오버레이 표시
<%
}
%>
</script>
</body>
</html>