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

지도/로컬 API
#1

안녕하세요.

홈페이지내에 찾아오시는 길을 탭 구성으로 본사 및 지사로 구분하여 구성을 하고 있는데요.
본사쪽은 정상적으로 노출이 되지만 지사쪽은 정상적으로 노출이 안되고 있네요.

위와 같이 카카오맵에서 HTML 태그복사를 이용하여 구현을 진행하고 있습니다.
이곳에서 여러자료를 찾아보고 답글을 남겨주신 대로 적용을 해보았는데 해결이 안되네요.

답변좀 부탁드립니다. 감사합니다.

#2

먼저 지도가 표시될 div 요소가 2개(본사, 지사) 선언되어 있는지 확인해주시고
현상을 확인할 수 있는 코드 전체도 첨부해주세요.

#3

답변감사합니다.

[HTML 코드]

        <div class="con">
            <!-- 탭메뉴 -->
            <ul class="loca_tab">
                <li data-tab="tab1" class="on">본사주소</li>
                <li data-tab="tab2">지사주소</li>
            </ul>
            <div class="loca_wrap">
                <!-- 지도 콘텐츠 영역 1 -->
                <div id="tab1" class="loca_area on" style="display:block; visibility:visible">
                    <h2 class="add_tit">본사</h2>
                    <!-- 지도영역 -->
                    <div class="map">
                        <div id="daumRoughmapContainer1652940949571" class="root_daum_roughmap root_daum_roughmap_landing" style="width:100% !important"></div>
                    </div>
                </div>

                <!-- 지도 콘텐츠 영역 2 -->
                <div id="tab2" class="loca_area" style="display:none; visibility:hidden">
                    <h2 class="add_tit">지사</h2>
                    <!-- 지도영역 -->
                    <div class="map">
                        <div id="daumRoughmapContainer1664323717675" class="root_daum_roughmap root_daum_roughmap_landing" style="width:100% !important"></div>
                    </div>
                </div>
            </div>
        </div>

[JAVASCRIPT]

	$('.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');

		}


	});


<script charset="UTF-8" class="daum_roughmap_loader_script" src="https://ssl.daumcdn.net/dmaps/map_js_init/roughmapLoader.js"></script>
<script charset="UTF-8">
    new daum.roughmap.Lander({
        "timestamp": "1652940949571",
        "key": "2ab4m",
        "mapWidth": "100%",
        "mapHeight": "400"
    }).render();
</script>
<script charset="UTF-8">
    new daum.roughmap.Lander({
        "timestamp" : "1664323717675",
        "key" : "2buux",
        "mapWidth" : "100%",
        "mapHeight" : "400"
    }).render();
</script>
<script>
$(function() {
	$('.loca_tab li:first').click();
});
</script>

위와 같이 코드가 구성되어있습니다.

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