Zoom_changed 를 이용하여 CustomOverlay 숨기기 질문드립니다 2

지도/로컬 API
1

안녕하세요.
어제도 질문을 올렸는데 또 올리게 됐습니다. ㅠ
확대, 축소때마다 Zoom_changed 를 이용하여 커스텀오버레이를 숨기고 싶습니다.

소스는 아래와 같습니다.

	var positions = [
{
  "lat": 37.27943075229118,
  "lng": 127.01763998406159,
  "content": "테스트1"
},
{
  "lat": 37.55915668706214,
  "lng": 126.92536526611102,
  "content": "테스트2"
}
// 500개 이상 입력 예정
	];

	for (var i = 0; i < positions.length; i++) {
		
   var markers = $(positions).map(function(i, position) {
        return new kakao.maps.Marker({
						position : new kakao.maps.LatLng(positions[i].lat, positions[i].lng)
        });
    });
    
    // 커스텀 오버레이 올리기 ㅜㅜㅜ
			var customOverlays = $(positions).map(function(i, position) {
        return new kakao.maps.CustomOverlay({
					content: positions[i].content, 
					position : new kakao.maps.LatLng(positions[i].lat, positions[i].lng),
            map:map,
					zIndex: 1
        });
    });
	}
	
    // 확대 축소에 따라 커스텀 오버레이 출력 유무 정하기기
			kakao.maps.event.addListener(map, 'zoom_changed', function() {
			    if(map.getLevel() <= 7) {
			        for(let i=0; i<customOverlays.length; i++) {
			            customOverlays[i].setMap(map);
			        }
			    } else if(map.getLevel() >= 7) {
			        for(let i=0; i<customOverlays.length; i++) {
			            customOverlays[i].setMap(null);
			        }
			    }
			});
			
		// 클러스터러에 마커들을 추가합니다
		clusterer.addMarkers(markers);

다른건 잘되는데 Zoom_changed 부분만 막히네요 ㅠ
그리고 저 상태에서
var positions 의 위도,경도,컨텐츠가
대략 500개 정도 등록될 예정인데
테스트 해보니 지도가 엄청 느려지더라구요.
php문을 입력해야 해서 밖으로 뺀건데
json을 이용하는게 더 좋은것인지요…

감사합니다.

2

이중 반복문으로 positions.length만큼 반복문이 돌면서
Marker, CustomOverlay가 중복 생성되고 있으며
가장 마지막으로 담긴 커스텀 오버레이만 삭제하고 있습니다.
코드 참고해주세요.

var markers = [];
var customOverlays = [];

for (var i = 0; i < positions.length; i++) {
    const lat = positions[i].lat;
    const lng = positions[i].lng;

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

    var customOverlay = new kakao.maps.CustomOverlay({
        content: positions[i].content,
        position : new kakao.maps.LatLng(lat, lng),
        map:map,
        zIndex: 1
    });

    // 생성한 마커와 커스텀 오버레이를 배열에 담아줍니다.
    markers.push(marker);
    customOverlays.push(customOverlay);
}

clusterer.addMarkers(markers);

// 확대 축소에 따라 커스텀 오버레이 출력 유무 정하기기
kakao.maps.event.addListener(map, 'zoom_changed', function() {
    if(map.getLevel() <= 7) {
        for(let i=0; i<customOverlays.length; i++) {
            customOverlays[i].setMap(map);
        }
    } else if(map.getLevel() >= 7) {
        for(let i=0; i<customOverlays.length; i++) {
            customOverlays[i].setMap(null);
        }
    }
});

그리고 대량의 마커표시 관련 내용은 아래 답변 참고해주세요.
https://devtalk.kakao.com/t/topic/70927/2