다중마커일때 다른마커를 클릭했을때 기존의 커스텀 오버레이는 안보이고 클릭한 커스텀오버레이만
보이게 하고싶은데 여러개 읽어봐도 어려워서 잘안되는데 도움좀 부탁드립니다. 아래는 코드입니다.
<script type="text/javascript">
var mapContainer = document.getElementById('map'), // 지도의 중심좌표
mapOption = {
center: new daum.maps.LatLng(33.450936, 126.569477), // 지도의 중심좌표
level: 7 // 지도의 확대 레벨
};
var map = new daum.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
(function() {
function createContentDiv(content) {
var div = document.createElement('div');
div.className = 'wrap';
div.innerHTML = content;
return div;
}
function addOverlayEvent(btn, overlay) {
// 마커를 클릭했을 때 커스텀 오버레이를 표시합니다
daum.maps.event.addListener(marker, 'click', function() {
overlay.setMap(map);
});
btn.addEventListener('click', function() {
overlay.setMap('')
});
}
var positions = [
{
content: createContentDiv(
' <div class="info">' +
' <div class="title">' +
' 카카오 스페이스닷원' +
' <div class="close" title="닫기"></div>' +
' </div>' +
' <div class="body">' +
' <div class="img">' +
' <img src="http://cfile181.uf.daum.net/image/250649365602043421936D" width="73" height="70">' +
' </div>' +
' <div class="desc">' +
' <div class="ellipsis">제주특별자치도 제주시 첨단로 242</div>' +
' <div class="jibun ellipsis">(우) 63309 (지번) 영평동 2181</div>' +
' <div><a href="http://www.kakaocorp.com/main" target="_blank" class="link">홈페이지</a></div>' +
' </div>' +
' </div>' +
' </div>'),
latlng: new daum.maps.LatLng(33.450936, 126.569477)
},
{
content: createContentDiv(
' <div class="info">' +
' <div class="title">' +
' 카카오 스페이스닷원' +
' <div class="close" title="닫기"></div>' +
' </div>' +
' <div class="body">' +
' <div class="img">' +
' <img src="http://cfile181.uf.daum.net/image/250649365602043421936D" width="73" height="70">' +
' </div>' +
' <div class="desc">' +
' <div class="ellipsis">제주특별자치도 제주시 첨단로 242</div>' +
' <div class="jibun ellipsis">(우) 63309 (지번) 영평동 2181</div>' +
' <div><a href="http://www.kakaocorp.com/main" target="_blank" class="link">홈페이지</a></div>' +
' </div>' +
' </div>' +
' </div>'),
latlng: new daum.maps.LatLng(35.174353, 129.126173)
}
];
for (var i = 0; i < positions.length; i ++) {
var marker = new daum.maps.Marker({
map: map, // 마커를 표시할 지도
position: positions[i].latlng // 마커의 위치
});
var overlay = new daum.maps.CustomOverlay({
map: '',
position: marker.getPosition(),
content: positions[i].content
});
var btn = overlay.getContent().getElementsByClassName('close')[0];
addOverlayEvent(btn, overlay);
}
})();
</script>