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 이거를 사용하는데
다른거 클릭시 기존 오버레이를 닫고 새롭게 노출하고 시픈데, 기존오버레이를 어떻게 닫아야할지 문의 드려봅니다.