<%@ page language=“java” contentType=“text/html; charset=UTF-8”
pageEncoding=“UTF-8”%>
마커 감추기 마커 보이기
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=01adb31bf702fae04c0bd8c61712b7f9&libraries=services "></script>
<script>
var mapContainer = document.getElementById('map'), // 지도의 중심좌표
mapOption = {
center: new kakao.maps.LatLng(33.451475, 126.570528), // 지도의 중심좌표
level: 3 // 지도의 확대 레벨
};
var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
// 주소-좌표 변환 객체를 생성합니다
var geocoder = new kakao.maps.services.Geocoder();
// 지도에 표시된 마커 객체를 가지고 있을 배열입니다
var markers = [];
// 마커 하나를 지도위에 표시합니다
// addMarker(new kakao.maps.LatLng(33.450701, 126.570667));
// 마커를 생성하고 지도위에 표시하는 함수입니다
function addMarker( maddr1, mnick ) {
// 주소로 좌표를 검색합니다
geocoder.addressSearch( maddr1 , function(result, status) {
// 정상적으로 검색이 완료됐으면
if (status === kakao.maps.services.Status.OK) {
var coords = new kakao.maps.LatLng(result[0].y, result[0].x);
// 결과값으로 받은 위치를 마커로 표시합니다
var marker = new kakao.maps.Marker({
map: map,
position: coords
});
// 커스텀 오버레이에 표시할 컨텐츠 입니다
// 커스텀 오버레이는 아래와 같이 사용자가 자유롭게 컨텐츠를 구성하고 이벤트를 제어할 수 있기 때문에
// 별도의 이벤트 메소드를 제공하지 않습니다
var content = '<div class="wrap">' +
'<div class="info">' +
'<div class="title">' +
mnick +
'<div class="close" onclick="closeOverlay()" title="닫기"></div>' +
'</div>' +
'<div class="body">' +
'<div class="desc">' +
'<div class="ellipsis">'+ maddr1 + '</div>' +
'<div class="jibun ellipsis">(우) 63309 (지번) 영평동 2181</div>' +
'</div>' +
'</div>' +
'</div>' +
'</div>';
// 생성된 마커를 배열에 추가합니다
markers.push(marker);
// 지도의 중심을 결과값으로 받은 위치로 이동시킵니다
map.setCenter(coords);
// 마커 위에 커스텀오버레이를 표시합니다
// 마커를 중심으로 커스텀 오버레이를 표시하기위해 CSS를 이용해 위치를 설정했습니다
var overlay = new kakao.maps.CustomOverlay({
content: content,
map: map,
position: marker.getPosition()
});
// 마커를 클릭했을 때 커스텀 오버레이를 표시합니다
kakao.maps.event.addListener(marker, 'click', function() {
overlay.setMap(map);
});
}//if
});
}
// 커스텀 오버레이를 닫기 위해 호출되는 함수입니다
function closeOverlay() {
alert("close");
overlay.setMap(null);
}
// 배열에 추가된 마커들을 지도에 표시하거나 삭제하는 함수입니다
function setMarkers(map) {
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(map);
}
}
// "마커 보이기" 버튼을 클릭하면 호출되어 배열에 추가된 마커를 지도에 표시하는 함수입니다
function showMarkers() {
setMarkers(map)
}
// "마커 감추기" 버튼을 클릭하면 호출되어 배열에 추가된 마커를 지도에서 삭제하는 함수입니다
function hideMarkers() {
alert("marker hide");
setMarkers(null);
}
</script>
<script type="text/javascript">
$(document).ready(function() {
$.each(${list}, function(idx, dto) {
// alert(dto.addr1);
addMarker(dto.maddr1, dto.mnick);
showMarkers();
});//each
});//ready
</script>
</body>
위 코드처럼 배열을 구성하여 마커를 생성한뒤 닫기가 가능한 커스텀 오버레이를 적용시켰는데
마커는 지도상에 뜨긴하나 마커를 눌렀을때와 닫기 버튼을 눌렀을때 아무런 반응이 없습니다. 어떤이유인지 모르겠습니다.