카카오맵 html태그복사를 이용한 지도노출

카카오맵 API (지도/로컬)
4

모달, 탭에서 약도를 사용할 경우 OpenAPI의 relayout API를 제공하고 있지 않기 때문에
setTimeout을 이용해서 지도를 생성해주셔야 합니다.

첫 페이지에서 바로 로딩되는 탭의 지도는 지금처럼 바로 render함수를 실행해서 지도를 생성해주시고
그외 다른 탭에서 지도를 표시할 경우, 탭이 열릴 때 최초 한번 지도를 생성할 수 있도록 구현해주셔야합니다.
이때 setTimeout을 이용해서 render 함수를 호출해주세요.
https://devtalk.kakao.com/t/topic/123928/2?u=lea.ju
아래 코드는 참고로 봐주세요.

$('.loca_tab li').on('click', function(){
    var tab_id = $(this).attr('data-tab');
    console.log(tab_id);

    $('.loca_tab li').removeClass('on');
    $(this).addClass('on');
    $('.loca_area').removeClass('on');
    $("#"+tab_id).addClass('on');

    if(tab_id == 'tab1') {
        $('#tab1').css('display', 'block');
        $('#tab1').css('visibility', 'visible');
        $('#tab2').css('display', 'none');
        $('#tab2').css('visibility', 'hidden');
    } else if(tab_id == 'tab2') {
        $('#tab1').css('display', 'none');
        $('#tab1').css('visibility', 'hidden');
        $('#tab2').css('display', 'block');
        $('#tab2').css('visibility', 'visible');

        const map2 = document.getElementById('daumRoughmapContainer1664323717675');

        if(map2.innerHTML === '') {
            setTimeout(function() {
                new daum.roughmap.Lander({
                    "timestamp" : "1664323717675",
                    "key" : "2buux",
                    "mapWidth" : "100%",
                    "mapHeight" : "400"
                }).render();
            }, 100);
        }

    }
});


$(function() {
    $('.loca_tab li:first').click();
    new daum.roughmap.Lander({
        "timestamp": "1652940949571",
        "key": "2ab4m",
        "mapWidth": "100%",
        "mapHeight": "400"
    }).render();
});