[FAQ] 지도/로컬 API 문의 전 꼭 읽어 주세요.
맵 ID값과 지도 좌표만 넣어주면 지도를 해당 맵 ID 영역에 표시할 수 있는 스크립트로 구성을 해서 사용중에
잘 나오는 웹 페이지는 문제없이 지도자 잘 표시됩니다.
줌도 잘 되고 드래그도 잘되고…
특정 웹 페이지에서만 아래화면처럼 나옵니다.
드래그를 하면 또 아래처럼 나오구요
어디서 무엇이 문제일까요?
보통 모달, 탭 같이 스타일이 동적으로 변경되는 UI에 지도를 넣을 경우 해당 현상이 보이는데요.
지도가 보이는 시점(모달, 탭이 열린 이후)에 map.relayout(); API를 호출해야 합니다.
동적으로 스타일이 변경되는 UI에서 지도를 표시하고 있다면 map.relayout();을 호출해서 확인 부탁드립니다.
https://apis.map.kakao.com/web/documentation/#Map_relayout
해당 페이지가 탭 구성의 컨텐츠로 들어가는것은 맞습니다.
해당 탭 내용을 ajax 로 불러와서 다 구성을 하고 제일 마지막으로 지도를 표시하는 스크립트롤 호출을 하고 있습니다.
지도 표시 스크립트 는 기본으로 지도 표시하가 마지막으로 map.relayout(); 도 호출을 하고 있습니다.
다른 모달창창에서는 모달창 안에 탭으로 구성이 되어 있음에도 잘 되던데 단순 페이지 탭구성에서만 이렇게 나오네요 ㅠㅠ
탭이 보일때도 동일하게 map.relayout()을 호출하고 있는건가요?
탭이 열리는 타이밍보다 relayout 호출 시점이 빠르면 첨부 사진처럼 보일 수 있습니다.
디버깅으로 호출 시점도 확인해주시고 탭이 열리는 시점에 map.relayout을 호출해도 동일하게 깨져보인다면
setTimeout을 사용하는 방법도 고려해주세요.
setTimeout(function() {
map.relayout();
}, 0 /*delay 값은 원하는 값으로 넣어주세요.*/);