다른마커를 클릭했을때 기존 커스텀 오버레이 숨기기

다중마커일때 다른마커를 클릭했을때 기존의 커스텀 오버레이는 안보이고 클릭한 커스텀오버레이만
보이게 하고싶은데 여러개 읽어봐도 어려워서 잘안되는데 도움좀 부탁드립니다. 아래는 코드입니다.

<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>

로직상 하나의 CustomOverlay만 사용하면 될 것 같으니…

  1. CustomOverlay는 하나만 만드세요.
  2. 마커 클릭 이벤트 핸들러 내부에서 CustomOverlay의 위치를 마커의 위치와 동일하게 바꿔주세요. (setPosition)
  3. 위치 변경하면서 내부의 내용을 변경해 주세요. (setContent)
1개의 좋아요

overlay를 담을 변수를 하나 지정해서 마커를 클릭할때마다 그 오버레이의 정보를 담고 이전의 오버레이는 null 처리 해주시면 됩니다.

ex.
초기화
var selectOverlay = null;

클릭시
btn.addEventListener(‘click’, function() {
selectOverlay.setMap(null)
selectOverlay = _clickMakerOverlay
selectOveray.setMap(map)
}

1개의 좋아요