지도가 깨져서 질문 드립니다

image
위와 같은 식으로 지도가 깨집니다. 다른 페이지에서는 안그러는데 유독 이것만 그러네요

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);
    });

코드입니다. 감사합니다.

지도를 modal, tab, collapse에서 선언한 경우
아래 답변 참고해서 지도가 보이는 시점에 map.relayout()을 호출해주세요.
https://devtalk.kakao.com/t/topic/122056/2