web/javascript

카카오 지도 api 이용하기

자벌레 2018. 4. 1. 20:10

http://apis.map.daum.net/web/guide/


위 가이드를 잘 참고하자.


앱 등록은 필요없어 보이지만 웹이어도 발급 시 생기는 appkey가 꼭 필요하니 잔말말고 등록해놓자. 




그리고 가이드를 잘 읽으면 문제될게 없는데, 눈대중으로 <script>파일을 header에 두고 <div>를 body에 넣었더니 container가 null이라고 에러가 자꾸 떴다.. 구글에 검색하니나와 같은 문제오류를 겪은 분들이 많았는데


div를 먼저 선언하라는 답변이 있더라.. 가이드에도 그렇게 나와있었음..ㅋ


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

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

<script type="text/javascript">

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); //지도 생성 및 객체 리턴

</script>


이런 코드를 <body>태그에 복붙해두고, 실행시키니 지도가 잘 나왔다!


(이제 위도경도만 좀 맞춰주면 되겠군)