인프런 커뮤니티 질문&답변

15개 장소db가 있는데 5개만 조회 됩니다.

코드가 잘못된 부분이 있을까요?

아무리 찾아도 잘 모르겠습니다;;

function getContent(data) {
	// 유튜브 섬네일 id 가져오기

	console.log(data);
	let replaceUrl = data.videoUrl;
	let finUrl = "";
	replaceUrl = replaceUrl.replace("https://youtu.be/", "");
	replaceUrl = replaceUrl.replace("https://youtube.com/embed", "");
	replaceUrl = replaceUrl.replace("https://youtube.com/watch?v=", "");
	finUrl = replaceUrl.split("&")[0];	

	// 인포윈도우 가공하기
	return ` 
	<div class="infowindow">
    <div class="infowindow-img-container">
      <img 
	  	src="https://img.youtube.com/vi/${finUrl}/mqdefault.jpg"
	  	class="infowindow-img"
	  />
    </div>
    <div class="infowindow-body">
      <h5 class="infowindow-title">${data.title}</h5>
      <p class="infowindow-address">${data.address}</p>
      <a href="${data.videoUrl}" class="infowindow-btn" target="_blank">영상이동</a>
    </div>
  </div>
  `;
}


// HTML 코드로 바꾸는 함수
function getContent(data) { 
	let videoId = "";
	let replaceUrl = data.videoUrl;
	replaceUrl = replaceUrl.replace("https://youtu.be/", "");
	replaceUrl = replaceUrl.replace("https://www.youtube.com/embed/", "");
	replaceUrl = replaceUrl.replace("https://www.youtube.com/watch?v=", "");
	videoId = replaceUrl.split("&")[0];
  
	const result = `<div class="infowindow">
	  <div class="infowindow-img-container">
		<img src="https://img.youtube.com/vi/${videoId}/mqdefault.jpg" class="infowindow-img" alt="...">
	  </div>
	  <div class="infowindow-body">
		<h5 class="infowindow-title">${data.title}</h5>
		<p class="infowindow-text">${data.address}</p>
		<a href="https://youtu.be/${videoId}" target="_blank" class="infowindow-btn">영상이동</a>
	  </div>
	</div>`;
	return result;
  }
  
	async function setMap(dataSet) {
		markerArray = [];
		infowindowArray = [];

	for (var i = 0; i < dataSet.length; i ++) {
	// 마커를 생성합니다 
	let coords = await getCoordsByAddress(dataSet[i].address)   
	var marker = new kakao.maps.Marker({
	 map: map, // 마커를 표시할 지도
	 position: coords, // 마커를 표시할 위치
	});

	markerArray.push(marker);

	// 마커에 표시할 인포윈도우를 생성합니다 
    var infowindow = new kakao.maps.InfoWindow({
     content: getContent(dataSet[i]), // 인포윈도우에 표시할 내용
    });

	infowindowArray.push(infowindow);

    // 마커에 mouseover 이벤트와 mouseout 이벤트를 등록합니다
    // 이벤트 리스너로는 클로저를 만들어 등록합니다 
    // for문에서 클로저를 만들어 주지 않으면 마지막 마커에만 이벤트가 등록됩니다
    kakao.maps.event.addListener(
		marker, 
		"click", 
		makeOverListener(map, marker, infowindow, coords));
    kakao.maps.event.addListener(
		map, 
		"click", 
		makeOutListener(infowindow));
	  }
   }

// 인포윈도우를 표시하는 클로저를 만드는 함수입니다W
// 1. 클릭시 다른 인포윈도우 닫기
// 2. 클릭한 곳으로 지도 중심 옮기기
function makeOverListener(map, marker, infowindow, coords) {
    return function() {
		// 1. 클릭시 다른 인포윈도우 닫기
		closeInfoWindow();
        infowindow.open(map, marker);
		// 2. 클릭한 곳으로 지도 중심 옮기기
		map.panTo(coords)	

    };
}

let infowindowArray = [];
function closeInfoWindow(){
	for (let infowindow of infowindowArray) {
		infowindow.close();
	}
}

// 인포윈도우를 닫는 클로저를 만드는 함수입니다 
function makeOutListener(infowindow) {
    return function() {
        infowindow.close();
    };
}

/*
**********************************************
5. 카테고리 분류
*/

// 카테고리
const categoryMap = {
	korea: "한식",
	china: "중식",
	japan: "일식",
	america: "양식",
	wheat: "분식",
	meat: "구이",
	sushi: "회/초밥",
	etc: "기타",
  };

  const categoryList = document.querySelector(".category-list");
  categoryList.addEventListener("click", categoryHandler);

  async function categoryHandler(event) {
	const categoryId = event.target.id;
	const category = categoryMap[categoryId];

	try {	
		// 데이터 분류
		let categorizedDataSet = await getDataSet(category);
	  
			
		// 기존 마커 삭제
		closeMarker();
	  
		// 기존 인포윈도우 닫기
		closeInfoWindow();
	  
		setMap(categorizedDataSet)
		} catch (error) {
		console.error(error);
		}
	   }
	  

let markerArray = [];
function closeMarker() {
	for (marker of markerArray) {
	marker.setMap(null)
   }
  } 

  async function setting() {
	try {
	  const dataSet = await getDataSet();
	  setMap(dataSet);
	} catch (error) {
	  console.error(error);
	}
  }
  
  setting();