모달창에서 카카오지도API 잘림 현상 대처법

모달창에서 카카오지도API 잘림 오류 대처법

 

아래 사진과 같이, 동일한 소스여도 일반 HTML 페이지에서는 지도가 잘 보이지만, 모달창에서 불러올 때는 지도가 잘리는 경우가 있다.

모달창에서 지도api 잘림 현상 발생

원인은 호출 시점의 문제로,

동적으로 display나 크기가 바뀌거나 모달창 호출하는 등 변경이 생긴 경우에, 지도를 다시 호출해주어야한다.

카카오지도api에서 map을 다시 호출하는 함수는 map.relayout(); 에 해당한다.

 

아래는 예시이다.

<a href="javascript:openModal('modal2'); relayout();">지도열기</a>

 

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

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

function relayout() {    
	map.relayout();
}
</script>

openModal로 모달창을 호출한 후, relayout 함수로 map을 다시 호출하는 예시이다.

 

만약 마커핀이 있거나, 중심점이 있는 경우에도 다시 재설정해주어야한다.

이 때는 setCenter(); 함수를 사용한다.

function relayout() {    
	map.relayout();
	var moveLatLon = new kakao.maps.LatLng(33.452613, 126.570888);
	map.setCenter(moveLatLon);
}

 

모달창에서 지도 API 정상적으로 호출

 

 

끝.

 

 

 

반응형