지도 렌더링관련 질문드립니다

qwerwqerwer

지도렌더링이 잡아놓은 container사이즈 만큼 나오지 않고 자꾸 좌상단에 조금씩만 렌더링이 됩니다
이문제는 어떻게 해결해야할까요?

지도 하단의 축척이 표출 안되고 있습니다.
페이지에 적용된 css를 확인해 주세요.

48

축적 부분 확인해보니 인라인 css로 display none 처리가 되어있네요 제가 어디서 설정하지도 않았구요
브라우저 너비를 마우스로 늘리거나 줄이면 제대로 지도가 나오는데 왜이러는걸까요

축척은 내부에서 display: none;을 하지 않는데…
div에 해당 속성을 준 css는 없는건가요?

지도 생성 부분 소스 첨부 부탁드립니다.

var mapContainer = document.getElementById(‘map’); // 지도를 표시할 div

    if(mapContainer != null){
        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('<?=$product_row['address']?>', 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;"><?=$product_row['address']?></div>'
                });
                infowindow.open(map, marker);

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

qqqq1
말씀하신 축적부분에 css가 이렇게 처음에 잡혀있습니다
width를 넓히거나 줄이면 아래처럼 렌더가 잘됩니다
qqqq2

http://apis.map.kakao.com/web/sample/addr2coord/ 이 로직에 if문이 추가된 것 같은데 잘 동작하네요.

혹시 지도 영역의 사이즈가 동적으로 변경되는 로직이 있나요?

브라우저 리사이징 시 제대로 나오는 부분은
화면 사이즈가 변경될 때 내부에서 map.realyout() 호출하여 지도 영역을 다시 계산하기 때문에
제대로 나오는 것 같습니다.

map 생성 후 map.relayout() 호출해보시겠어요?

http://apis.map.kakao.com/web/documentation/#Map_relayout

비슷한 현상이 나오는 예제를 만들어 봤는데 같이 참고해주세요.

<div id="map" style="width:100px; height: 100px"></div>    

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

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

//지도 클릭 시 크기 변경
kakao.maps.event.addListener(map, 'click', function(mouseEvent) {
    // 비슷한 현상이 일어나는 로직
    document.getElementById('map').style.cssText = 'width: 100%; height:350px;';
    
    // 해결방법 - 동적으로 변경되는 부분이 있다면 아래와 같이 선언하여 relayout을 호출해주세요.
    //mapContainer.style.width = '500px';
    //mapContainer.style.height = '500px';    
    //map.relayout();
});

지도 container 로 잡은 #map 부모 엘리먼트에 css가 display none 처리 되어있다가
클릭이벤트 발생시 부모엘리먼트가 display가 block 으로 바뀌면서 지도가 보여지는 형식이였는데
하나하나 잡다보니 부모 container css display none 을 지우니까 렌더 되네요
정확히 이게 어떤문제를 발생시기키는지 모르겠네요

display: none;이 되면 지도 공간이 없기 때문에 지도 생성 시 영역 계산이 안됩니다.
만약 그런 의도를 원하신 거라면 block할 때 relayout()을 호출하여 지도 영역을 다시 계산할 수 있도록 해주셔야 합니다.