안녕하세요 마커에 오버레이 띄우는 작업 중 오버레이 닫기 오류 관련하여 질문 드립니다.
var markers = []; // 지도에 표시된 마커 객체를 가지고 있을 배열입니다
var contents = [];
var overlays = [];
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center : new kakao.maps.LatLng(37.5397629769285, 126.996240829219), // 지도의 중심좌표
level : 5
// 지도의 확대 레벨
};
var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
// 마커를 표시할 위치와 title 객체 배열입니다
var positions = [
<%
ArrayList<ContentDTO> list = (ArrayList<ContentDTO>)request.getAttribute("list");
for(int i = 0; i < list.size(); i++) {
if(i == list.size()-1) {
%>
{
title : '<%=list.get(i).getName()%>',
address : '<%=list.get(i).getAddress()%>',
category : '<%=list.get(i).getCategory()%>',
latlng : new kakao.maps.LatLng<%=list.get(i).getCoordinate()%>
}
<%
} else {
%>
{
title : '<%=list.get(i).getName()%>',
address : '<%=list.get(i).getAddress()%>',
category : '<%=list.get(i).getCategory()%>',
latlng : new kakao.maps.LatLng<%=list.get(i).getCoordinate()%>
},
<%
}
}
%>
];
for (var i = 0; i < positions.length; i ++) {
// 마커 이미지의 이미지 주소입니다
if(positions[i].category == '관광지') var imageSrc = "https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/markerStar.png";
else if(positions[i].category == '숙박시설') var imageSrc = "https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/markerStar.png";
else var imageSrc = "https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/markerStar.png";
// 마커 이미지의 이미지 크기 입니다
var imageSize = new kakao.maps.Size(24, 35);
// 마커 이미지를 생성합니다
var markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize);
// 마커를 생성합니다
var marker = new kakao.maps.Marker({
map: map, // 마커를 표시할 지도
position: positions[i].latlng, // 마커를 표시할 위치
title : positions[i].title, // 마커의 타이틀, 마커에 마우스를 올리면 타이틀이 표시됩니다
image : markerImage, // 마커 이미지
clickable: true // 마커를 클릭했을 때 지도의 클릭 이벤트가 발생하지 않도록 설정합니다
});
markers.push(marker);
}
for(var i=0; i<positions.length; i++) {
// 마커 위에 커스텀오버레이를 표시합니다
// 마커를 중심으로 커스텀 오버레이를 표시하기위해 CSS를 이용해 위치를 설정했습니다
var overlay = new kakao.maps.CustomOverlay({
map: map,
position: markers[i].getPosition()
});
overlay.setMap(null);
var content = '<div class="wrap">' +
' <div class="info">' +
' <div class="title">' + positions[i].title +
' <div class="close" onclick="closeOverlay()" title="닫기"></div>' +
' </div>' +
' <div class="body">' +
' <div class="img">' +
' <img src="image/contents/hyattseoul1.PNG" width="73" height="70">' +
' </div>' +
' <div class="desc">' +
' <div class="ellipsis">' + positions[i].address + '</div>' +
' </div>' +
' </div>' +
' </div>' +
' </div>';
overlay.setContent(content);
// 마커를 클릭했을 때 커스텀 오버레이를 표시합니다
kakao.maps.event.addListener(markers[i], 'click', function(o) {
return function() {
o.setMap(map);
}
}(overlay));
}
function closeOverlay() {
overlay.setMap(null);
}
// 배열에 추가된 마커들을 지도에 표시하거나 삭제하는 함수입니다
function setMarkers(map) {
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(map);
}
}
// "마커 보이기" 버튼을 클릭하면 호출되어 배열에 추가된 마커를 지도에 표시하는 함수입니다
function showMarkers() {
setMarkers(map);
}
// "마커 감추기" 버튼을 클릭하면 호출되어 배열에 추가된 마커를 지도에서 삭제하는 함수입니다
function hideMarkers() {
setMarkers(null);
}
오버레이를 생성하고 content를 추가하는 식으로 코딩을 했는데요
마커 클릭시 해당하는 오버레이가 정상적으로 출력되긴합니다.
다만, 닫기 버튼 클릭시 마지막 오버레이만 닫힙니다.
닫기 버튼에서 closeOverlay() 함수가 있는데 각 마커 클릭시 열리는 오버레이를 closeOverlay() 함수의 파라미터로 넘겨줘야 할거같은데 도무지 방법을 모르겠습니다.
자바스크립트 부분이 약해서 그런지 감이 오질 않네요
고수님들의 답변 부탁드리겠습니다.
(positions 배열에 요소 추가하는 부분에 스크립트릿이 들어가는 부분은 제가 스크립트에서 jstl 사용 방식이 조금 서툴러서 급한대로 스크립트릿을 사용한 점 양해 부탁드립니다ㅜㅜ)