코드를 대충 축약하면
<script src="https://dapi.kakao.com/v2/maps/sdk.js?appkey=">
<article class="article">
<ul class="contents"></ul>
<div class="buttons"></div>
</article>
<script src="js/place.js"></script>
스크립트 내용입니다.
const contents = document.querySelector(".contents");
const buttons = document.querySelector(".buttons");
var mapContainer = document.getElementById("map"); // 지도를 표시할 div
var mapOption = {
center: new kakao.maps.LatLng(35.13417, 129.11397), // 지도의 중심좌표
level: 3, // 지도의 확대 레벨
mapTypeId: kakao.maps.MapTypeId.ROADMAP
};
var map = new kakao.maps.Map(mapContainer, mapOption);
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");
var marker = new kakao.maps.Marker({
position: new kakao.maps.LatLng(courses[id - 1]["LAT"], courses[id - 1]["LNG"]), // 마커의 좌표
map: map // 마커를 표시할 지도 객체
});
content.innerHTML = `
<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">
<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 style="display:inline-block;">
<p style="font-weight: bold; color:darkblue;font-size: 40;">주소</p>
${courses[id-1]["ADDR1"]}<br><br>
<div id="map" style="width:450px;height:350px;"></div>
<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>
</div>
</div>
`;
return content;
};
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));
}
};
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);
});
와 같은 스크립트입니다.
지도 스크립트를 먼저 선언하고 위와 같이 콘텐츠에 div를 넣을려고합니다.
스크립트를 통해서 api 에서 json 데이터에서 좌표를 받아오고 받아 온 좌표를 통해 innerHTML을 통해 contents에 div#map을 띄우는 방식을 사용합니다.
이런 방식을 사용했더니 위와 같은 오류가 발생했고요.
지도 스크립트를 뒤에 선언하니 map을 찾을 수 없다고 나와서 질문 드립니다.