위와 같은 식으로 지도가 깨집니다. 다른 페이지에서는 안그러는데 유독 이것만 그러네요
const contents = document.querySelector(".contents");
const buttons = document.querySelector(".buttons");
const url = "https://apis.data.go.kr/6260000/AttractionService/getAttractionKr?serviceKey=Lqi9%2BhQ05m%2FBgW3AfuDg046JQYPIHg427xeUNqLtTl9ML6xhouhlJnomEVxN%2Bj%2Bt2R%2BsNxKIOTFq%2FRhqj6TovQ%3D%3D&numOfRows=114&pageNo=1&resultType=json";
fetch(url)
.then(res => res.json())
.then(resJson => {
var courses = resJson.getAttractionKr.item
const numOfContent = courses.length;
const maxContent = 5;
const maxButton = 5;
const maxPage = Math.ceil(numOfContent / maxContent);
let page = 1;
const makeContent = (id) => {
const content = document.createElement("li");
content.classList.add("content");
content.innerHTML = `
<div class="card shadow mb-4" style="width:893px;">
<a href="#collapseCard${id-1}" class="d-block card-header py-3 collapsed" data-toggle="collapse"
role="button" aria-expanded="false" aria-controls="collapseCard${id-1}">
<div style="display:inline-block; margin: 10px;">
<img src=${courses[id-1]["MAIN_IMG_THUMB"]} width=100 height=100>
</div>
<div style="display:inline-block;">
<h4 class="m-0 font-weight-bold text-primary">${courses[id-1]["MAIN_TITLE"]}</h4>
</div>
</a>
<div class="collapse" id="collapseCard${id-1}">
<div class="card-bodyz">
<br>
<h5 class="m-0 font-weight-bold text-primary" style="margin: 5px;">${courses[id-1]["TITLE"]}</h5>
<h7 class="m-0 font-weight-bold text-primary">${courses[id-1]["SUBTITLE"]}</div>
<div style="display:inline-block; margin: 5px;">
<img src=${courses[id-1]["MAIN_IMG_THUMB"]} width=200 height=200>
</div>
<hr>
<div>
<p style="font-weight: bold; color:darkblue;font-size: 40;">주소</p>
${courses[id-1]["ADDR1"]}<br><br>
<div id="map${id-1}" style="width:375px;height:200px;display: block; margin: 0px auto"></div><br>
<p style="font-weight: bold; color:darkblue;font-size: 40;">교통 정보</p>
${courses[id-1]["TRFC_INFO"]}<br><br>
<p style="font-weight: bold; color:darkblue;font-size: 40;">가격 정보</p>
${courses[id-1]["USAGE_AMOUNT"]}<br><br>
<p style="font-weight: bold; color:darkblue;font-size: 40;">시간 정보</p>
${courses[id-1]["USAGE_DAY"]}
${courses[id-1]["USAGE_DAY_WEEK_AND_TIME"]}
</div>
<hr>
<div style="display:inline-block;">
<p style="font-weight: bold; color:darkblue;font-size: 40;">상세 내용</p>
${courses[id-1]["ITEMCNTNTS"]}
<hr>
<p style="font-weight: bold; color:darkblue;font-size: 40;">사이트 정보</p>
<a href=${courses[id-1]["HOMEPAGE_URL"]} target="_blank">${courses[id-1]["HOMEPAGE_URL"]}<a><br><br>
<p style="font-weight: bold; color:darkblue;font-size: 40;">전화 번호</p>
${courses[id-1]["CNTCT_TEL"]}
</div>
<hr>
<a href="#" onclick="store('${courses[id-1]["MAIN_TITLE"]}',${courses[id - 1]["LAT"]}, ${courses[id - 1]["LNG"]});" class="btn btn-warning btn-icon-split">
<span class="icon text-white-50">
<i class="fa fa-archive" aria-hidden="true"></i>
</span>
<span class="text">등록</span>
</a>
<br><br>
</div>
</div>
</div>
`;
return content;
};
const makemap = (id) => {
const numOfContent = courses.length;
const maxContent = 5;
const maxButton = 5;
const maxPage = Math.ceil(numOfContent / maxContent);
let page = 1;
var mapname = "map" + (id - 1);
var mapContainer = document.getElementById(mapname); // 지도를 표시할 div
var mapOption = {
center: new kakao.maps.LatLng(courses[id - 1]["LAT"], courses[id - 1]["LNG"]), // 지도의 중심좌표
level: 4, // 지도의 확대 레벨
mapTypeId: kakao.maps.MapTypeId.ROADMAP
};
var mapname = new kakao.maps.Map(mapContainer, mapOption);
var marker = new kakao.maps.Marker({
position: new kakao.maps.LatLng(courses[id - 1]["LAT"], courses[id - 1]["LNG"]), // 마커의 좌표
map: mapname // 마커를 표시할 지도 객체
});
}
const makeButton = (id) => {
const button1 = document.createElement("button");
button1.classList.add("button");
button1.dataset.num = id;
button1.innerText = id;
button1.addEventListener("click", (e) => {
Array.prototype.forEach.call(buttons.children, (button1) => {
if (button1.dataset.num) button1.classList.remove("active");
});
e.target.classList.add("active");
renderContent(parseInt(e.target.dataset.num));
});
return button1;
};
// Prev, Next Button
const goPrevPage = () => {
page -= maxButton;
render(page);
};
const goNextPage = () => {
page += maxButton;
render(page);
};
const prev = document.createElement("button");
prev.classList.add("button", "prev");
prev.innerHTML = '<ion-icon name="chevron-back-outline"></ion-icon>';
prev.addEventListener("click", goPrevPage);
const next = document.createElement("butto1");
next.classList.add("button1", "next");
next.innerHTML = '<ion-icon name="chevron-forward-outline"></ion-icon>';
next.addEventListener("click", goNextPage);
const renderContent = (page) => {
while (contents.hasChildNodes()) {
contents.removeChild(contents.lastChild);
}
for (let id = (page - 1) * maxContent + 1; id <= page * maxContent && id <= numOfContent; id++) {
contents.appendChild(makeContent(id));
makemap(id);
}
};
const renderButton = (page) => {
while (buttons.hasChildNodes()) {
buttons.removeChild(buttons.lastChild);
}
for (let id = page; id < page + maxButton && id <= maxPage; id++) {
buttons.appendChild(makeButton(id));
}
buttons.children[0].classList.add("active");
buttons.prepend(prev);
buttons.append(next);
if (page - maxButton < 1) buttons.removeChild(prev);
if (page + maxButton > maxPage) buttons.removeChild(next);
};
const render = (page) => {
renderContent(page);
renderButton(page);
};
render(page);
});
코드입니다. 감사합니다.