티스토리 뷰
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>태그에 복붙해두고, 실행시키니 지도가 잘 나왔다!
(이제 위도경도만 좀 맞춰주면 되겠군)
'web > javascript' 카테고리의 다른 글
| setTimeout() (0) | 2018.08.28 |
|---|---|
| 원하는 자릿수까지 버림 (0) | 2018.08.14 |
| SELECT ~ OPTION 태그 Event의 처리 (0) | 2018.02.26 |
| CHECKBOX, RADIO 태그의 Event 처리 (0) | 2018.02.23 |
| BUTTON, SUBMIT 태그의 Event 처리 (0) | 2018.02.23 |