탭을 구분해 지도를 여러개 불러오고 싶은데 제대로 나오지가 않습니다

지도/로컬 API
1
/* Tab style */ *{margin:0;padding:0} .allWrap{width: 800px;margin:0 auto;} .tabBox{margin:20px 0} .tab-link{width: 47%;display: inline-block;padding:10px;text-align: center;background-color:#929090;border-radius: 20px;color:#fff;cursor: pointer; } .tab-link.current{ background-color: #de4c4c; font-weight: 600; } .tab-content{ display: none; } .tab-content.current{ display: block; width: 100%; height: 300px; background-color:#d5d8d7; font-size: 30px; text-align: center; line-height: 250px; }

icon Setting01

icon Setting02

<div  id="tab-1" class="tab-content current">
    <div id="map" style="width:100%;height:350px;"></div>

    <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=cc21730f86b17af444ee67c76f8a4059"></script>
    <script>
        var mapContainer = document.getElementById('map'), // 지도를 표시할 div
            mapOption = {
                center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
                level: 3 // 지도의 확대 레벨
            };

        // 지도를 표시할 div와  지도 옵션으로  지도를 생성합니다
        var map = new kakao.maps.Map(mapContainer, mapOption);
    </script>
</div>

<div  id="tab-2" class="tab-content">
    <div id="map2" style="width:100%;height:350px;"></div>

    <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=cc21730f86b17af444ee67c76f8a4059"></script>
    <script>
        var mapContainer2 = document.getElementById('map2'), // 지도를 표시할 div
            mapOption2 = {
                center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
                level: 3 // 지도의 확대 레벨
            };

        // 지도를 표시할 div와  지도 옵션으로  지도를 생성합니다
        var map2 = new kakao.maps.Map(mapContainer2, mapOption2);
    </script>
</div>

afdda

1은 지도가 뜨지만

22

2가 뜨지 않아 질문드립니다.

2

@ijbin4327

유사 증상으로 보이는데 아래 글 한번 보시겠어요?

https://devtalk.kakao.com/t/topic/106546/2