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

지도/로컬 API
1

qwerwqerwer

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

2

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

48

3

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

4

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

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

5

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);
            } 
        }); 
    }
6

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

7

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

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

9

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