카카오지도 관련 문의 입니다

지도/로컬 API
#1

안녕하세요.
카카오 지도 api관련해서 문의 좀 드리려고 합니다.
밑의 코드를 이용해서 지도를 쓰려고 하는데 지도가 왼쪽 상단부분에 짤려서 나오더라고요 그리고 나서 개발자 도구를 켯다가 없애면 지도가 제대로 나옵니다 이런 경우는 어떻게 해야 하나요?

<div id="map1" style="width: 500px; height: 200px; "></div>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=appkey&libraries=services"></script>
<script>
 var mapContainer = document.getElementById('map1'), // 지도를 표시할 div 
     mapOption = {
         center: new daum.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
         level: 3 // 지도의 확대 레벨
     };  

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

    // 주소-좌표 변환 객체를 생성합니다
    var geocoder = new daum.maps.services.Geocoder();

    // 주소로 좌표를 검색합니다
    geocoder.addressSearch('제주특별자치도 제주시 첨단로 242', function(result, status) {

        // 정상적으로 검색이 완료됐으면 
         if (status === daum.maps.services.Status.OK) {

            var coords = new daum.maps.LatLng(result[0].y, result[0].x);

            // 결과값으로 받은 위치를 마커로 표시합니다
            var marker = new daum.maps.Marker({
                map: map,
                position: coords
            });

            // 인포윈도우로 장소에 대한 설명을 표시합니다
            var infowindow = new daum.maps.InfoWindow({
                content: '<div style="width:150px;text-align:center;padding:6px 0;">우리회사</div>'
            });
            infowindow.open(map, marker);

            // 지도의 중심을 결과값으로 받은 위치로 이동시킵니다
            map.setCenter(coords);
        } 
    }); 

</script>
#2

지도가 노출되는 타이밍에 문제가 있을 수 있습니다.

해당 코드가 노출되는 시점이 어떻게 되나요?
혹시 모달로 동작하거나
숨겨둔 상황에서 특정 액션이 있을 때만 보여지거나 하지 않나요?

#3

아니요 그냥 화면들어오면 바로 보이도록 해놓았습니다.

#4

딱히… 문제가 있어보이는 코드는 아닌데요.
실제 apis.map.daum.net/web/sample 에서 [직접해보기]로 돌려봐도 정상적으로 잘 나오고 있습니다.

image

일단 제대로 나오지 않는 상태에서 페이지의 CSS를 확인해 보세요.
실마리를 찾을 수 있을지도 몰라요.

그래도 모르겠다 하시면
제가 증상을 직접 확인할 수 있는 URL을 부탁드립니다. 위 코드로는 재현이 되질 않아서요.
그게 힘들면 어떻게 나오고 있는지 스크린 샷이라도 ㅠ

#5

캡처

제가 부트 스트랩을 쓰고 있는데요 팝업창에서 지도를 가지고 오려고 하는데 혹시 부트스트랩 때문인가요?
근데 왜 개발자도구를 켰다 끄면 잘 될까요?
캡처02

#6

검증은 제가 할 수 있는것이 아니니

페이지 코드에서 부트스트랩 관련 코드를 빼고 시도해 보시고
만약 뺐는데 잘 나오면 부트스트랩 관련한 기능을 제어하거나 대체하시면 될테고
그게 아니라면 직접 작성하신 페이지의 CSS와 충돌이 일어나는지 확인해 보세요.

개발자 도구를 껐다 켜면 잘 되는 이유는
애초에 #map1 에 해당하는 엘리먼트가 width/height가 매우 작거나 없었는데
개발자 도구를 켜면 브라우저 창 크기가 변하면서 resize 이벤트가 발생합니다.
API 내부에서는 이 resize 이벤트 핸들러로 등록한 함수가 있고
그 함수에서 map.relayout()을 호출하고 있어요. 그래서 정상적으로 보이게 되는 겁니다.

뭐… 극약처방을 해 드리면

setTimeout(function() {
  map.relayout();
}, 200 /*이 값은 원하는 대로...*/);

이 코드를 넣으면 대부분 되는데 추천드리지는 않습니다.
정확한 타이밍에 호출하는것을 권장 드리며

더 추천드리는건 위에 제가 말씀드린대로 CSS충돌이나 동적으로 엘리먼트 변화가 일어나는 부분을 제거하여 아예 map.relayout() 호출을 하지 않는 상황으로 만드는 것입니다.