안녕하세요 카카오맵 API를 활용해 닫기가 가능한 커스텀 오버레이를 여러개 만들어보려고 하고 있는 예비개발자입니다.
var mapContainer = document.getElementById(‘map’),
mapOption = {
center: new kakao.maps.LatLng(33.3616666, 126.5291666),
level : 9 // 지도의 확대 레벨
};
var map = new kakao.maps.Map(mapContainer, mapOption);
/*<![CDATA[*/
var positions = [
/*[# th:each="jeju : ${jejuList}"]*/
{
content: '<div class="wrap">' +
'<div class="info">' +
'<div class="title">' +
'[(${jeju.tradeName})]' +
'<div class="close" onclick="closeOverlay()" title="닫기"></div>' +
'</div>' +
'<div class="body">' +
'<div class="desc">' +
'<div class="ellipsis">[(${jeju.location})]</div>' +
'<div class="jibun ellipsis">[(${jeju.address})]</div>' +
'<div><a href="https://www.kakaocorp.com/main" target="_blank" class="link">홈페이지</a></div>' +
'</div>' +
'</div>' +
'</div>' +
'</div>',
latlng : new kakao.maps.LatLng(/*[[${jeju.latitude}]]*/, /*[[${jeju.longitude}]]*/)
},
/*[/]*/
];
for (var i = 0; i < positions.length; i ++) {
var marker = new kakao.maps.Marker({
map: map,
position: positions[i].latlng
});
var overlay = new kakao.maps.CustomOverlay({
content : positions[i].content,
map : map,
position: marker.getPosition()
});
}
// 마커를 클릭했을 때 커스텀 오버레이를 표시합니다
kakao.maps.event.addListener(marker, 'click', function () {
overlay.setMap(map);
});
// 커스텀 오버레이를 닫기 위해 호출되는 함수입니다
function closeOverlay() {
overlay.setMap(null);
}
/*]]>*/
지도를 생성하고 positions 배열에 타임리프 반복문으로 DB에 있는 값을 content와 latlng에 담고
for 문을 통해 배열에 들어있는 위경도에 맞춰 모든 마커를 찍고
해당 마커의 위치에 맞는 오버레이를 생성하였습니다.
이후 마커만 떠있고 클릭을 했을때 커스텀 오버레이가 표시되도록 만들고 싶은데
현재 창을 실행하면 모든 마커가 정상적인 위치에 찍히고 오버레이가 자동으로 펼쳐져 있습니다.
열었을때 닫혀져있고 사용자가 마커를 클릭했을때만 커스텀 오버레이가 열리게 하는 방법이 있을까요?
추가적으로 현재는 커스텀 오버레이의 x(닫기) 기능도 작동되지 않습니다ㅜ
글 읽어주셔서 감사합니다.