레이어팝업으로 실행시 중앙에서 벗어나는 이유

지도/로컬 API
#1

image

마크가 레이어팝업으로 넣었을 때 중앙에서 벗어나는 이유가 무엇일까요…

<!-- * 카카오맵 - 지도퍼가기 -->
<!-- 1. 지도 노드 -->
<div id="daumRoughmapContainer1678841308378" class="root_daum_roughmap root_daum_roughmap_landing"></div>

<!--
	2. 설치 스크립트
	* 지도 퍼가기 서비스를 2개 이상 넣을 경우, 설치 스크립트는 하나만 삽입합니다.
-->
<script charset="UTF-8" class="daum_roughmap_loader_script" src="https://ssl.daumcdn.net/dmaps/map_js_init/roughmapLoader.js"></script>

<!-- 3. 실행 스크립트 -->
<script charset="UTF-8">
	new daum.roughmap.Lander({
		"timestamp" : "1678841308378",
		"key" : "2e3dg",
		"mapWidth" : "800",
		"mapHeight" : "500"
	}).render();
	setTimeout( function() {
		window.dispatchEvent(new Event('resize'));
	}, 1000);
</script>
#2

지도 크기가 동적으로 변경되거나 모달 또는 탭처럼 display 속성이 변경되는 경우
지도 영역 계산을 위해 필요한 속성 값이 설정되기 전에 지도를 생성하면 의도와 달리 표시될 수 있습니다.
지도가 보이는 시점에 약도를 생성해서 확인 부탁드립니다.

//약도 렌더링 여부
let render = false;

//모달이 보이는 시점의 이벤트를 등록해서 
//한번도 렌더링이 되지 않았다면 지도가 보이는 시점에 렌더링합니다.
if(!render) { 
    new daum.roughmap.Lander({
        "timestamp" : "1678841308378",
        "key" : "2e3dg",
        "mapWidth" : "800",
        "mapHeight" : "500"
    }).render();

    render = true;
}

https://devtalk.kakao.com/t/topic/123928/2?u=lea.ju