피로에 살고 피로에 죽자

아래와 같은 스크립트 코드를 통해 구글맵 api js 라이브러리를 로드하는 경우에 맵이 간헐적으로 표시되지 않는 경우가 있다.

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key={Your API KEY}&callback=initMap" async defer></script>

원인은 script 태그의 async속성 때문이다.

보통 웹페이지는 낮은 숫자 라인(1)부터 차례대로 읽어들여 로딩한다고 보면 된다.
그 때 위 api 를 로딩하는 태그를 소스상에서 callback 에 설정한 js함수보다 먼저 배치하게 되는경우, 간헐적으로 발생한다.(결국은 로딩문제다)

해결법은 해당 스크립트 태그를 callback함수보다 아래에 배치하거나, async, defer를 빼면 된다.

async는 웹페이지 로딩과 스크립트 파일 로딩을 동시에 실행하기 때문에 웹페이지 로딩보다 api js파일 로딩이 먼저 끝나는 경우에 맵이 표시되지 않는다.

구글의 예제에는 defer가 없는데, 검색한 것들에선 왜 있는지 모르겠다...