Kakao map loading 시 console에 parser-blocking message 노출, 지도가 그려지지 않네요

지도/로컬 API
1

console log에 아래와 같이 출력되고, 지도가 그려지지 않습니다 ~
문제가 될만한게 있나요?

message :
A parser-blocking, cross site (i.e. different eTLD+1) script, http://t1.daumcdn.net/mapjsapi/js/main/4.0.10/kakao.js, is invoked via document.write. The network request for this script MAY be blocked by the browser in this or a future page load due to poor network connectivity. If blocked in this page load, it will be confirmed in a subsequent console message. See https://www.chromestatus.com/feature/5718547946799104 for more details.

kakao dev 사이트에 프로젝트 등록 후 웹에 http://localhost:8080 host 등록 해 둔 상태입니다.
사이트 script는 아래처럼 걸어 두었구요,

지도 init script는 아래처럼 작성했습니다. (사이트에서 제공해주시는 샘플)

var container = document.getElementById(‘map’); //지도를 담을 영역의 DOM 레퍼런스
var options = { //지도를 생성할 때 필요한 기본 옵션
center: new daum.maps.LatLng(33.450701, 126.570667), //지도의 중심좌표.
level: 3 //지도의 레벨(확대, 축소 정도)
};

var map = new daum.maps.Map(container, options);

확인 부탁드립니다.

2

해당 메시지는 오류가 아닌 워닝일 거라 지도가 그려지지 않는 건 다른 이유일 듯한데요

문의주신 계정에서 등록된 앱에서의 지도 호출 기록을 보면 200 ok 가 확인됩니다.

3

#map 엘리먼트의 width/height가 올바르게 지정되어 있는지 확인해 보세요.

4

네 ~ 일단 문제는 해결 했는데,
아래처럼 지도가 그려지다가 마네요 ;;

46

5

타이밍의 문제입니다.

new daum.maps.Map() 을 호출할 시점에
#map 엘리먼트의 레이아웃 사이즈가 원하는 크기대로 잡혀 있어야만 제대로 지도가 나옵니다.

엘리먼트가 동적으로 변경되어야 한다면
사이즈 변경 후에 map.relayout()을 호출해야만 합니다.

1개의 좋아요
6

네 ~ 원인은 파악했습니다.
친절하신 설명 감사합니다 ~

1개의 좋아요