커스텀오버레이 질문있습니다

안녕하세요 초보개발자입니다.

커스텀오버레이 관련 여쭤보고싶어서 글남깁니다!

예제를 보면 보통

생성할때는 setMap(map); 을 쓰고

지울때는 setMap(null); 을 사용하던데

제가 지금 개발하고있는게

마커를 가지고 처음 클릭했을때 커스텀오버레이가 열리고 한번더 클릭했을때 닫히는 것과(계속반복이고 이건 잘됌.)
, 버튼을 가지고 커스텀오버레이를 닫는것(이게안됌) 을 구현하고있습니다.

코드는 아래와 같습니다.

//커스텀오버레이의 컨텐츠영역
var contents = "<div class="popup_wrap popup_map" id="popup_map" style="display: block;">";
contents += "<button type="button" class="map_x" onclick="closeOverlay()">커스텀오버레이 닫기</button>";
contents += "</div>";

//커스텀오버레이 생성
var customOverlay = new kakao.maps.CustomOverlay({
content: contents,
position: new kakao.maps.LatLng(arrLat[j],arrLng[j])
});

//마커 클릭시 클릭한마커에 커스텀오버레이 생성
kakao.maps.event.addListener(marker, 'click', makeOverListener(map, marker, customOverlay));

// 커스텀오버레이를 표시하는 클로저를 만드는 함수입니다
function makeOverListener(map, marker, customOverlay) {
	return function() {
		var test1 = $("#popup_map").length;
		if(test1 == 0){
			customOverlay.setMap(map); // 마커 처음 클릭시 커스텀오버레이 맵에 띄우는애
		} else{
			customOverlay.setMap(null); // 마커를 한번더 클릭시 커스텀오버레이 지우는애
		}
	};
}

// 커스텀 오버레이를 onclick 으로닫기 위해 호출되는 함수입니다
function closeOverlay() {
	$("#popup_map").remove();
}

이렇게 코드를 짜놨습니다.
근데 onclick 에 있는 closeOverlay()는 customOverlay 를 받아오지 못해서 setMap(null) 을 할수가 없어서,
그냥 div의 id를 remove 시켰더니 커스텀오버레이가 삭제되기만하고, 다시 setMap(map) 이 먹지않습니다.

어떻게해야 좋을까요

조언좀 주시면 감사하겠습니다 정말로 ㅠㅠㅠ

===

결론 : 버튼눌러서 remove 를 시킨 후 다시 마커클릭시 setMap(map)이 안먹음

content를 문자열 대신 HTMLElement로 생성해주세요.
생성한 element에 이벤트를 등록해주면 됩니다.

유사글에 대한 답변 참고해주세요.


1개의 좋아요

말씀해주신대로 해서 해결했습니다 정말감사드립니다 ㅠㅠㅠ갓카오 짱짱