커스텀 오버레이 닫기 버튼 오류

현재 지도에서 마커 표시 및 커스텀 오버레이까지 잘 나오는데요 닫기버튼 클릭시
Uncaught ReferenceError: closeOverlay is not defined
at HTMLDivElement.onclick 라는 에러가 뜹니다.

아래는 코드 부분입니다.

			var Content = '<div class = "wrap">' + 
						'   <div class="info">' + 
						'    <div class="title">' + 
						positions[i].medical_name + 
						'    <div class="close" onclick="closeOverlay(' + i + ')" title="닫기"></div>' + 
						'   </div>' + 
						'    <div class="body">' + 
						'     <div class="img">' +
						'      <img src="1.png" width="73" height="70">' +
						'     </div>' + 
						'      <div class="desc">' + 
						'       <div class="ellipsis"> ' + positions[i].medical_ad + '</div>' +     
						'       <div class="jibun"> ' + positions[i].medical_tel + '</div>' + 
						'       <div><a href=" "target="_blank" class="link">홈페이지</a></div>' + 
						'      </div>' + 
						'     </div>' + 
						'    </div>' +    
						'   </div>';
		
		var medOverlay = new kakao.maps.CustomOverlay({
			content : Content,
			position: medMarker.getPosition()
		});
		
		ovList[i] = medOverlay;		
		
		kakao.maps.event.addListener(medMarker, 'click', makeOverListener(map, medOverlay));		
	}
	
	    function makeOverListener(map, medOverlay) {
	
        return function() {
		
		    
		    for (var i = 0; i < ovList.length; i++) {
			    ovList[i].setMap(null);     
		    }
	
	        
        medOverlay.setMap(map); 
       };
    }

	function closeOverlay(i) {
			ovList[i].setMap(null);     
	}

검색 해서 HTML DOM createElement() Method 를 사용하라는 글도 봐서
해보았는데 커스텀 오버레이가 계속해서 나오질 않아
따로 코드 첨부 후 질문 올립니다 !!

위의 답변처럼 써야 onclick이 제대로 동작합니다.

답변 감사합니다 ! 링크 주신 게시글 들어가서 확인해보고 작성해보았는데요

오버레이가 아예 나오지 않습니다 ㅠㅠ…

			var latlng = new kakao.maps.LatLng(positions[i].lat, positions[i].lng);
		
		var medMarker = new kakao.maps.Marker({
			map : map,
			position : latlng,
			title : positions[i].medical_name,
			image : markerImage
		});
		
		var overlay = new kakao.maps.CustomOverlay({
			position : latlng
		});
		
		var content = document.createElement('div');
		content.className = 'overlay';
		content.innerHTML = '파크 :D';
		
		var closeBtn = document.createElement('button');
		closeBtn.src = "close.png";
		closeBtn.onclick = function() {
			overlay.setMap(null);
		};
		content.appendChild(closeBtn);
		
		overlay.setContent(content);
		
		kakao.maps.event.addListener(medMarker, 'click', function() {
			overlay.setMap(map);
		});

웹페이지 들어가서 f12로 확인해봐도 오류가 안나와서 잘 모르겠네요
어디가 문제인걸까요…? ㅠㅠ

제가 드린 답변 중에 일부 잘못된 부분이 있긴 하나,
동작 자체는 크게 문제 없습니다.
아래에 조금 더 정제된 코드를 첨부해 드리니 참고해 주세요.

javascript:

var mapContainer = document.getElementById('map'), // 지도를 표시할 div 
    mapOption = { 
        center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
        level: 3 // 지도의 확대 레벨
    };

var map = new kakao.maps.Map(mapContainer, mapOption);

var latlng  = new kakao.maps.LatLng(33.450701, 126.570667); 

var medMarker = new kakao.maps.Marker({
	map : map,
	position : latlng
});
		
var overlay = new kakao.maps.CustomOverlay({
    yAnchor: 3,
	position : latlng
});
		
var content = document.createElement('div');
content.className = 'overlay';
content.innerHTML = '파크 :D';
		
var closeBtn = document.createElement('button');
closeBtn.innerHTML = '닫기';
closeBtn.onclick = function() {
	overlay.setMap(null);
};
content.appendChild(closeBtn);
		
overlay.setContent(content);
		
kakao.maps.event.addListener(medMarker, 'click', function() {
	overlay.setMap(map);
});

CSS:

.overlay {
  background-color: white;
}