마커 클러스터와 닫기가 가능한 커스텀 오버레이 동시 사용

카카오맵 API (지도/로컬)
,
1

마커클러스터와 닫기가 가능한 커스텀 오버레이 동시사용을 하고싶습니다.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>Kakao 지도 시작하기</title>
	<link rel="stylesheet" href="kakaomap.css">
</head>
<body>

		
	<h1>This is Kakao map</h1>
	<div id="map" style="width:1000px;height:900px;"></div>
	<script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=f83ee16168dc59d555b939815bd9da58&libraries=clusterer"></script>
	<script>
		var content = '<div class="wrap">' + 
		'    <div class="info">' + 
		'        <div class="title">' + 
		'            카카오 스페이스닷원' + 
		'            <div class="close" onclick="closeOverlay()" 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>' +    
		'</div>';

    var map = new kakao.maps.Map(document.getElementById('map'), { // 지도를 표시할 div
        center : new kakao.maps.LatLng(37.552715718040865, 126.98623862188596), // 지도의 중심좌표 
        level : 9 // 지도의 확대 레벨 
    });
    
    // 마커 클러스터러를 생성합니다 
    var clusterer = new kakao.maps.MarkerClusterer({
        map: map, // 마커들을 클러스터로 관리하고 표시할 지도 객체 
        averageCenter: true, // 클러스터에 포함된 마커들의 평균 위치를 클러스터 마커 위치로 설정 
        minLevel: 5 // 클러스터 할 최소 지도 레벨 
    });
 
    // 데이터를 가져오기 위해 jQuery를 사용합니다
    // 데이터를 가져와 마커를 생성하고 클러스터러 객체에 넘겨줍니다
    $.get("lat.json", function(data) {
        // 데이터에서 좌표 값을 가지고 마커를 표시합니다
        // 마커 클러스터러로 관리할 마커 객체는 생성할 때 지도 객체를 설정하지 않습니다
        var markers = $(data.data).map(function(i, position) {
            return new kakao.maps.Marker({
                position : new kakao.maps.LatLng(position.lat, position.lng)
			});
		for(let i=0; i < data.data.length; i++){
				over_lay(data.data[i])
			}
        });
	
		// 클러스터러에 마커들을 추가합니다
		clusterer.addMarkers(markers);
		
	function over_lay(lng_lat) {
			console.log(lng_lat)
			var overlay = new kakao.maps.CustomOverlay({
					map: map,
					content: content,
					position: new kakao.maps.LatLng(lng_lat.lat, lng_lat.lng)
			});

		// 마커를 클릭했을 때 커스텀 오버레이를 표시합니다
		kakao.maps.event.addListener(marker, 'click', function() {
		$(this).setMap(map);
		});
	}

		for (let i = 0; i < data.data.length; i++) {
			displaymarker(data.data[i])
		}	
	});

	function displaymarker(lat_lng) {
		var	marker = new kakao.maps.Marker({
				position : new kakao.maps.LatLng(lat_lng.lat, lat_lng.lng)
			});
	};

	// 커스텀 오버레이를 닫기 위해 호출되는 함수입니다 
	function closeOverlay() {
			over_close.setMap(null)
		}

	</script>
</body>
</html>

이 코드에서 오버레이가 안됩니다. 이유가 무엇인가요? 구체적으로 초보자입장에서 설명해주시기 바라겠습니다.

2

제가 원하는 방향은 markers를 클릭했을때만 content가 뜨게 하는것입니다.

3

먼저 불필요한 로직을 지워주셔야 할 것 같습니다.
원하는 방향이 클러스터러 클릭 시 커스텀 오버레이만 표출하는 거라면
마커 이벤트를 등록하는 부분은 주석 또는 삭제해주세요.

마커의 이벤트 등록하는 로직의 구현이 잘못되어 있습니다.
map 반복문은 [marker, marker, marker, …] 배열을 리턴하고 있는데 그 안에서 함수를 호출하여
마커 이벤트를 등록한다면 등록이 되지 않을 겁니다.

여러 개의 maker를 생성하고 overlay를 등록하는 예제가 있으니
아래 링크 참고하여 로직 확인해주세요.
http://apis.map.kakao.com/web/sample/keywordBasic/

또한 여러 개의 커스텀 오버레이의 닫기 버튼 구현 시 주의할 점도 확인 부탁드립니다.

마지막으로 클러스터러에 클릭 이벤트가 있습니다.
(문서: Kakao 지도 Web API Documentation)
아래와 같이 이벤트를 활용해서 원하는 로직으로 구현해 주세요.

var overlay = new kakao.maps.CustomOverlay({
    content: content,
    yAnchor: 1
});

kakao.maps.event.addListener( clusterer, 'clusterclick', function( cluster ) {
    overlay.setMap(map);
    overlay.setPosition(cluster.getCenter());
});