지도 일부만 보여지는 문제

지도/로컬 API
1

현재 다음 지도API로 개발중에 있는데 특이한 점을 발견해서 질문드립니다.
지도를 불러와 로딩하면 화면이 일부만 보이는 현상이 있습니다.
근데 특이하게도 브라우저 창을 줄였다 피거나 하는행위를 하면 지도가 정상적으로 출력됩니다.
https://photos.app.goo.gl/Ztxjywe2gd7Axuhx8

소스코드는 예시 그대로 적용했습니다./

<div class="tab_conts">
      <p class="map_address"><span class="addr">주소 : 경기 용인시 수지구 손곡로 111</span> 
     <span class="post"><span>지번</span> 동천동 946-9</span></p>
     <div  id="map">
     <div>
</div>

스크립트

var mapContainer = document.getElementById('map'), // 지도를 표시할 div 
    mapOption = { 
        center: new daum.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
        level: 3 // 지도의 확대 레벨
    };

var map = new daum.maps.Map(mapContainer, mapOption); // 지도를 생성합니다

// 마커가 표시될 위치입니다 
var markerPosition  = new daum.maps.LatLng(33.450701, 126.570667); 

// 마커를 생성합니다
var marker = new daum.maps.Marker({
    position: markerPosition
});

// 마커가 지도 위에 표시되도록 설정합니다
marker.setMap(map);

// 아래 코드는 지도 위의 마커를 제거하는 코드입니다
// marker.setMap(null);
2

map이라는 영역의 스타일이 미리 지정되지 않고
지도를 생성한 뒤 지정되면 이런 현상이 나타납니다.

API 내부에서는 해당 영역이 작았을 때를 감지한 뒤에 모든 계산을 끝내고 보니
이 영역에는 지도 이미지 타일 하나만 있어도 충분하다고 판단했기 때문에 하나만 나오는 것이죠.

이렇게 그려놓고 난 뒤,
해당 영역의 스타일이 변경되어 커졌기 때문에 뭔가 로딩이 덜 끝난 것처럼 보이는 겁니다.

스타일이 변경된 시점에
지도 영역이 변경되었다고 알려주는 map.relayout() 함수를 호출해야만 재계산을 하게 되고 정상적으로 출력됩니다.

브라우저 창을 resize하면 API 내부적으로 이벤트를 감지하여 map.relayout()을 호출하게 되어 있습니다. 그렇기 때문에 정상적으로 출력되는 것이고요.

애초에 스타일을 지정해 주시거나
스타일이 변경이 끝난 시점을 캐치하여 map.relayout() 을 호출하시면 해결 될 거에요.

1개의 좋아요
3

스타일변경이 끝난 시점이라는게 맵이 생성 되고 난뒤 를 말하는건가요

4

스타일 변경이 끝난 시점이라 함은,
지도 생성은 이미 되어 있다고 가정하고
지도 엘리먼트 혹은 그 엘리먼트에 영향을 주는 요소의
width/height 변경 혹은 숨김/보임(e.g display: none) 처리가 된 이후를 뜻합니다.

사용자가 직접 map.relayout()을 호출해야 하는 이유 :

지도를 생성할 때 지도가 보여질 영역의 엘리먼트를 필수적으로 넘겨주게 되어 있는데

var mapContainer = document.getElementById('map'), //  <= 바로 이 엘리먼트
    mapOption = { 
        center: new kakao.maps.LatLng(33.450701, 126.570667),
        level: 3
    };
var map = new kakao.maps.Map(mapContainer, mapOption);

이 때 해당 엘리먼트의 width/height를 체크하여 표출해야 할 타일 영역을 계산합니다.
이렇게 인식한 width/height값은 (특별한 일이 없다면) 지도 내부에 값으로 지정되며 매 계산마다 해당 값을 참조하게 됩니다.

그 이후에 사용자가 외부에서 지도 엘리먼트의 크기를 변경하게 되면
지도 내부에서는 엘리먼트의 값이 변경된 시점을 감지할 수 있는 좋은 방법이 없기 때문에
(방법은 있지만 성능적으로 비효율적입니다.)
타일이 전부 화면에 보이지 않거나 타일 하나만 보이는 현상이 나타납니다.

결국 사용자가 지도 영역의 엘리먼트 width/height를 필요에 의해 변경한다면
내부에 지정된 값을 갱신하고 지도 영역을 재계산 해 주기 위해서 map.relayout()을 직접 호출해 주어야 합니다.