맵이 깨지거나 각 리스트마다 맵이 등장하지 않아서 질문 드립니다

<!DOCTYPE html>
<html lang="kr">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>떠나자, 부산</title>

    <!-- Custom fonts for this template-->
    <link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
    <link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">

    <!-- Custom styles for this template-->
    <link href="css/sb-admin-2.min.css" rel="stylesheet">

    <link rel="stylesheet" href="css/style.css" />

</head>

<body id="page-top">



    <!-- Page Wrapper -->
    <div id="wrapper">

        <!-- Sidebar -->
        <ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordionSidebar">

            <!-- Sidebar - Brand -->
            <a class="sidebar-brand d-flex align-items-center justify-content-center" href="index.html">
                <div class="sidebar-brand-icon">
                    <i class="fa fa-suitcase" aria-hidden="true"></i>
                </div>
                <div class="sidebar-brand-text mx-3">떠나자, 부산</div>
            </a>

            <!-- Divider -->
            <hr class="sidebar-divider my-0">

            <!-- Nav Item - Dashboard -->
            <li class="nav-item active">
                <a class="nav-link" href="index.html">
                    <i class="fas fa-map-marked"></i>
                    <span>Main</span></a>
            </li>

            <!-- Divider -->
            <hr class="sidebar-divider">

            <!-- Heading -->
            <div class="sidebar-heading">
                Menu
            </div>

            <!-- Nav Item - Pages Collapse Menu -->
            <!-- 메뉴내용 -->
            <li class="nav-item">
                <a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapsePages" aria-expanded="true" aria-controls="collapsePages">
                    <i class="fas fa-fw fa-folder"></i>
                    <span>Pages</span>
                </a>
                <div id="collapsePages" class="collapse" aria-labelledby="headingPages" data-parent="#accordionSidebar">
                    <div class="bg-white py-2 collapse-inner rounded">
                        <h6 class="collapse-header">검색</h6>
                        <a class="collapse-item" href="course2.html">추천 코스</a>
                        <a class="collapse-item" href="culture.html">문화</a>
                        <div class="collapse-divider"></div>
                        <h6 class="collapse-header">선택 및 검색</h6>
                        <a class="collapse-item" href="experience.html">해양/체험</a>
                        <a class="collapse-item" href="place.html">관광지</a>
                        <a class="collapse-item" href="place3.html">도보 여행길</a>
                        <a class="collapse-item" href="festival.html">축제</a>
                        <a class="collapse-item" href="place2.html">공연장</a>
                    </div>
                </div>
            </li>

            <!-- Nav Item - Tables -->
            <li class="nav-item">
                <a class="nav-link" href="tables.html">
                    <i class="fas fa-calendar-alt"></i>
                    <span>Tables</span></a>
            </li>

            <!-- Divider -->
            <!-- 나누는 선-->
            <hr class="sidebar-divider d-none d-md-block">

            <!-- Sidebar Toggler (Sidebar) -->
            <div class="text-center d-none d-md-inline">
                <button class="rounded-circle border-0" id="sidebarToggle"></button>
            </div>



        </ul>
        <!-- End of Sidebar -->

        <!-- Content Wrapper -->
        <div id="content-wrapper" class="d-flex flex-column">

            <!-- Main Content -->
            <div id="content">

                <!-- Topbar -->
                <nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">
                </nav>
                <!-- End of Topbar -->

                <!-- Begin Page Content -->
                <div class="container-fluid">

                    <!-- Page Heading -->
                    <div class="d-sm-flex align-items-center justify-content-between mb-4">
                        <h1 class="h3 mb-0 text-gray-800">관광지</h1>
                    </div>

                    <div class="card mb-4 py-3 border-left-primary">
                        <div class="card-body">
                            코스를 짜기 위한 관광지를 참고해보세요! <br> 이미지를 클릭하여 정보를 확인하세요!
                        </div>
                    </div>

                    <a href="place_search.html" class="btn btn-success btn-icon-split">
                        <span class="icon text-white-50">
                            <i class="fas fa-check"></i>
                        </span>
                        <span class="text">검색창</span>
                    </a>

                    <!-- Content Row -->
                    <!-- <div class="row"> -->
                    <article class="article">
                        <ul class="contents"></ul>
                        <div class="buttons"></div>
                    </article>
                    <!-- </div> -->

                    <!-- Scroll to Top Button-->
                    <a class="scroll-to-top rounded" href="#page-top">
                        <i class="fas fa-angle-up"></i>
                    </a>

                    <!-- Bootstrap core JavaScript-->
                    <script src="vendor/jquery/jquery.min.js"></script>
                    <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

                    <!-- Core plugin JavaScript-->
                    <script src="vendor/jquery-easing/jquery.easing.min.js"></script>

                    <!-- Custom scripts for all pages-->
                    <script src="js/sb-admin-2.min.js"></script>

                    <!-- Page level plugins -->
                    <script src="vendor/chart.js/Chart.min.js"></script>

                    <!-- Page level custom scripts -->
                    <script src="js/demo/chart-area-demo.js"></script>
                    <script src="js/demo/chart-pie-demo.js"></script>

                    <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
                    <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>

                    <script src="https://dapi.kakao.com/v2/maps/sdk.js?appkey="></script>
                    <script src="js/place.js"></script>

</body>

</html>
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 = `
            <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;text-align: center;">
                        <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 makemap = (id) => {
            const numOfContent = courses.length;
            const maxContent = 5;
            const maxButton = 5;
            const maxPage = Math.ceil(numOfContent / maxContent);
            let page = 1;

            var mapContainer = document.getElementById("map"); // 지도를 표시할 div

            var mapOption = {
                center: new kakao.maps.LatLng(courses[id - 1]["LAT"], courses[id - 1]["LNG"]), // 지도의 중심좌표
                level: 3, // 지도의 확대 레벨
                mapTypeId: kakao.maps.MapTypeId.ROADMAP
            };

            var map = 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: map // 마커를 표시할 지도 객체
            });
        }

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

코드입니다. CORS 때문에 크롬 확장 프로그램을 사용하고 있어서 깨지는 건가요?
처음 리스트만 떠서 질문드립니다.
또한 오류가 뜨는 텍스트?는

  1. Because a cookie’s SameSite attribute was not set or is invalid, it defaults to SameSite=Lax, which prevents the cookie from being sent in a cross-site request. This behavior protects user data from accidentally leaking to third parties and cross-site request forgery.

Resolve this issue by updating the attributes of the cookie:

  • Specify SameSite=None and Secure if the cookie should be sent in cross-site requests. This enables third-party use.
  • Specify SameSite=Strict or SameSite=Lax if the cookie should not be sent in cross-site requests.
  1. AFFECTED RESOURCES

  2. 3 cookies
    입니다.

1개 이상의 지도를 한 페이지에 띄우려면 각 지도 Element는 고유한 id값을 가져야 합니다.
makeContent함수에서 각 장소를 특정할 수 있게 (id-1)값을 이용해서 Element id를 적용하신 것처럼
지도 Element도 고유한 id값을 적용해서 각각의 Element로 지도를 생성할 수 있게 수정해주세요.

그리고 해당 메세지는 장소 정보를 가져오는 api를 가져올 때 출력되는 메세지로 보입니다.
다시 확인 부탁드립니다.

감사합니다

좋아요 1