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

<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>