다중 오버레이에서 다른 오버레이 클릭시 이전 오버레이 닫기 관련 문의

	multiOverlay : function(address, title = "", url = "", address2 = "")
	{
		var geocoder = new daum.maps.services.Geocoder();

		address.forEach(function(addr, index)
		{
			// 주소로 좌표를 검색합니다
			geocoder.addressSearch(addr, function(result, status) {						
				if (status === daum.maps.services.Status.OK) {
					//console.log(index);

					// 정상적으로 검색이 완료됐으면 
					if (status === daum.maps.services.Status.OK) {			

						var coords = new daum.maps.LatLng(result[0].y, result[0].x);

						var marker = new daum.maps.Marker({
							map: map,
							position: coords
							//image : markerImage // 마커 이미지
						});

						// 마커 위에 커스텀오버레이를 표시합니다
						// 마커를 중심으로 커스텀 오버레이를 표시하기위해 CSS를 이용해 위치를 설정했습니다
						var CustomOverlay = new daum.maps.CustomOverlay({
							//content: content,
							map: map,
							position: marker.getPosition()
						});
						

						//마커 위에 커스텀오버레이 콘텐츠 Dom으로 구현 시작
						var Customcontent = document.createElement('div');
						Customcontent.className = "wrap";

						var info = document.createElement('div');
						info.className = "info"			
						Customcontent.appendChild(info);

						//커스텀오버레이 타이틀
						var contentTitle = document.createElement("div");
						contentTitle.className = "title"
						contentTitle.appendChild(document.createTextNode(title[index]));
						info.appendChild(contentTitle);

						//커스텀오버레이 닫기 버튼
						var closeBtn = document.createElement("div");
						closeBtn.className = "close";
						closeBtn.setAttribute("title","닫기");
						closeBtn.onclick = function() { CustomOverlay.setMap(null); };
						contentTitle.appendChild(closeBtn);

						var bodyContent = document.createElement("div");
						bodyContent.className = "body";
						info.appendChild(bodyContent);

						var imgDiv = document.createElement("div");
						imgDiv.className = "img";
						bodyContent.appendChild(imgDiv);

						//커스텀오버레이 이미지
						var imgContent = document.createElement("img");
						imgContent.setAttribute("src", "http://cfile181.uf.daum.net/image/250649365602043421936D");
						imgContent.setAttribute("width", "73");
						imgContent.setAttribute("heigth", "70");
						imgDiv.appendChild(imgContent);

						var descContent = document.createElement("div");
						descContent.className = "desc"
						bodyContent.appendChild(descContent);

						//커스텀오버레이 주소			
						var addressContent = document.createElement("div");
						addressContent.className = "ellipsis";
						addressContent.appendChild(document.createTextNode(result[0].address_name));
						descContent.appendChild(addressContent);

						//커스텀오버레이 지번주소
						var address2Content = document.createElement("div");
						address2Content.className = "jibun ellipsis";
						address2Content.appendChild(document.createTextNode(address2));
						descContent.appendChild(address2Content);

						var LinkDiv = document.createElement("div");
						descContent.appendChild(LinkDiv);

						//커스텀오버레이 링크
						var LinkContent = document.createElement("a");
						if (url == "")
						{
							url = "javascript:"
						}
						LinkContent.setAttribute("href", url);
						if (url != "javascript:")
						{
							LinkContent.setAttribute("target", "_blank");
						}
						LinkContent.className = "link";
						LinkContent.appendChild(document.createTextNode("홈페이지"));
						LinkDiv.appendChild(LinkContent);
						//마커 위에 커스텀오버레이 콘텐츠 Dom으로 구현 끝

						CustomOverlay.setContent(Customcontent);


						var testOverlay = null;
						// 마커를 클릭했을 때 커스텀 오버레이를 표시합니다
						daum.maps.event.addListener(marker, 'click', function() {

							//CustomOverlay.setMap(null);
							//console.log(marker.getPosition());
							//CustomOverlay.setPosition(marker.getPosition());

							//testOverlay = CustomOverlay;

							CustomOverlay.setMap(map);
							


							//Maps.CustomOverlayClick(testOverlay, map);
						});					
						
						// 인포윈도우로 장소에 대한 설명을 표시합니다
						//var infowindow = new daum.maps.InfoWindow({
						//	content: '<div style="width:150px;text-align:center;padding:6px 0;">우리회사</div>'
						//});
						//infowindow.open(map, marker);

						CustomOverlay.setMap(null);
						

					}
					else if (status == "ZERO_RESULT")
					{
						alert("없는 주소 입니다.")
						jQuery("#map").hide();
						return false;
					}

				}
			});				
		});

	}

위의 내용으로 진행시 클릭시 오버레이 노출 함수를 daum.maps.event.addListener 이거를 사용하는데

다른거 클릭시 기존 오버레이를 닫고 새롭게 노출하고 시픈데, 기존오버레이를 어떻게 닫아야할지 문의 드려봅니다.

두가지 방법이 있습니다.

1. CustomOverlay를 전역으로 하나만 만드시고
   클릭할 때마다 setPosition()로 위치를, setContent()로 내용을 바꿔치는 방식

2. 전역 변수를 하나 두시고
   클릭할 때마다 이 변수에 할당되어 있는 CustomOverlay를 setMap(null) 하고 현재 클릭된 CustomOverlay를 해당 변수에 재할당하여 계속하여 이 전 CustomOverlay를 지우는 방식

무엇을 구현하시느냐에 따라 사용해야 할 방법이 다른데
뭐… 간단하게 두 번째껄로 간다고 하면

// global variable
var clickedOverlay = null;

geocoder.addressSearch(addr, function(result, status) {
  /*
  ...
  ...
  ...
  */
  var CustomOverlay = new daum.maps.CustomOverlay({
    //content: content,
    map: map,
    position: marker.getPosition()
  });
  /*
  ...
  ...
  ...
  */
  daum.maps.event.addListener(marker, 'click', function() {
    if (clickedOverlay) {
        clickedOverlay.setMap(null);
    }
    CustomOverlay.setMap(map);
    clickedOverlay = CustomOverlay;
  });
  /*
  ...
  ...
  ...
  */
});

와 이거 처음에 이해 못했는데 약 2주만에 다시보니까 이해했습니다.

구현 완료입니다 감사합니다!!