맵 반토막만 나와요

지도/로컬 API
1

[FAQ] 지도/로컬 API 문의 전 꼭 읽어 주세요.

image
image967×732 83.9 KB

  	$(window).on('load', function() {
	  var mapContainer = document.getElementById('map'), // 지도를 표시할 div
	      mapOption = {
	          center: new kakao.maps.LatLng(37.21681044,128.96257856), // 지도의 중심좌표
	          level: 1 // 지도의 확대 레벨
	      };
	  var map = new kakao.maps.Map(mapContainer, mapOption);
	  map.setMapTypeId(kakao.maps.MapTypeId.SKYVIEW); // 스카이뷰 타입으로 설정

	  kakao.maps.event.addListenerOnce(map, 'idle', function() {
	      window.setTimeout(function() {
	          kakao.maps.event.trigger(map, 'resize');
	          map.setCenter(new kakao.maps.LatLng(37.16554,128.98032)); // 중심 재설정
	      }, 500);
	  });
	});

자바스크립트에서 실행한 코드입니다. 맵은 불러와지는데 계속 반만 불러와집니다 ㅠㅠㅠㅠ

2

첨부 사진을 보면 지도 영역이 완전하게 잡히지 않은 상태에서 생성된 것 같아요.
모달이나 탭에서 지도를 보이게 하고 있거나
스타일 속성이 display:none > display: block처럼 동적으로 속성이 변경된 경우는
지도가 보이는 시점에 map.relayout(); API를 실행해서 확인해 주세요.
https://apis.map.kakao.com/web/documentation/#Map_relayout