카카오 지도 사용시 - Uncaught TypeError: Cannot read properties of null 에러

Kakao 지도 Api 를 사용하려고 하는데 위와 같은 에러가 뜬다.

appkey를 잘못 입력해서 그런가 , header 를 템플릿화 시켜서 그런가 했다.

-아래는 해당 코드-

<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=앱키"/>

<script>
	var container = document.getElementById('map');<!-- 2  -->
	var options = {
		center : new kakao.maps.LatLng(33.450701, 126.570667),
		level : 3
	};

	var map = new kakao.maps.Map(container, options); 
</script>

<div id="map" style="width: 500px; height: 400px;"></div>  <!-- 1  -->

이게 안 먹는건가 싶었는데 , 간단한 문제였다.

 

브라우저가 HTML을 파싱 (읽어들이는 과정) 후 , DOM 트리를 구성하면서

위에서 아래로 순차적으로 읽는데

1을 아직 못 읽었는데 2에서 map을 찾기 때문에 오류가 난 것이다.

 

 

<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=앱키"/>

<div id="map" style="width: 500px; height: 400px;"></div>  <!-- 1  -->

<script>
	var container = document.getElementById('map');<!-- 2  -->
	var options = {
		center : new kakao.maps.LatLng(33.450701, 126.570667),
		level : 3
	};

	var map = new kakao.maps.Map(container, options); 
</script>

 

위와 같이 1번과 2번 순서를 바꿔주면 오류가 나지 않는다.