안녕하세요.
아래와 같은 소스코드로 html에서 카카오맵을 호출하고 있는데 렌더링 과정에서 오류가 발생합니다.
하지만 실행중인 창의 크기가 변동되면 다시 맵이 정상적으로 나타납니다. 해결 방법이 있을까요?
뭔가 사이즈 관련 문제같은데…
도움 부탁드립니다!
<!-- 카카오맵 시작 -->
<div id="map" style="width:100%;height:300px;"></div>
<script src="//dapi.kakao.com/v2/maps/sdk.js?appkey=API 키"></script>
<script>
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng(37.57011, 126.97752), // 지도의 중심좌표
level: 3, // 지도의 확대 레벨
mapTypeId : kakao.maps.MapTypeId.ROADMAP // 지도종류
};
// 지도를 생성한다
var map = new kakao.maps.Map(mapContainer, mapOption);
// 지도 타입 변경 컨트롤을 생성한다
var mapTypeControl = new kakao.maps.MapTypeControl();
// 지도의 상단 우측에 지도 타입 변경 컨트롤을 추가한다
map.addControl(mapTypeControl, kakao.maps.ControlPosition.TOPRIGHT);
// 지도에 확대 축소 컨트롤을 생성한다
var zoomControl = new kakao.maps.ZoomControl();
// 지도의 우측에 확대 축소 컨트롤을 추가한다
map.addControl(zoomControl, kakao.maps.ControlPosition.RIGHT);
// 지도에 마커를 생성하고 표시한다
var marker = new kakao.maps.Marker({
position: new kakao.maps.LatLng(37.57011, 126.97752), // 마커의 좌표
map: map // 마커를 표시할 지도 객체
});
</script>
<!-- 카카오맵 종료 -->