애니빌드.LAB
매뉴얼
지도API Daum 지도 api 시작하기
- Anybuild
- 2015-08-07 10:57:00
- hit12028
- http://wdev.anybuild.co.kr/bbs/faq/4648
※ 다음 지도 api를 사용하기 위해서는 API Key를 발급받아야 합니다.
※ http://apis.map.daum.net/ 여기를 먼저 방문해서 key를 발급받으시기 바랍니다.
콘솔 탭에서 지도 api key를 발급 받을 앱을 생성합니다
생성된 앱 화면에서 API Key 등록버튼을 누릅니다.
REST/JS API 추가 버튼을 누르고 팝업 창이 뜨면 플랫폼을 선택합니다. 저는 브라우저 용을 쓸것이라 웹브라우저 탭을 선택했습니다.
Referer 입력 란에 사용할 도메인 주소를 http:// 를 붙여서 입력합니다.
API Key 발급이 완료되었습니다 API 키를 드래그 해서 복사해주세요
<!-- 로드뷰를 표시할 div 입니다 -->
<div id="daum_map" style="width:100%;height:800px;"></div><script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 API Key를 여기 입력하세요"></script>
<script>
var container = document.getElementById('daum_map'); //지도를 표시할 div
var options = {
center: new daum.maps.LatLng(35.17969, 129.07564),
level: 3
};var map = new daum.maps.Map(container, options); //지도 생성
//마커 옵션
var markerPosition = new daum.maps.LatLng(35.17969, 129.07564);
var marker = new daum.maps.Marker({
position: markerPosition
});marker.setMap(map); //마커 생성
// 마커 위에 표시할 인포윈도우를 생성한다
var infowindow = new daum.maps.InfoWindow({
content : '<div style="padding:5px;">부산시청입니다</div>' // 인포윈도우에 표시할 내용
});// 인포윈도우를 지도에 표시한다
infowindow.open(map, marker);// 마커에 클릭 이벤트를 등록한다 (우클릭 : rightclick)
daum.maps.event.addListener(marker, 'click', function() {
alert('마커를 클릭했습니다!');
});//맵 컨트롤 생성
var mapTypeControl = new daum.maps.MapTypeControl();
map.addControl(mapTypeControl, daum.maps.ControlPosition.TOPRIGHT);
var zoomControl = new daum.maps.ZoomControl();
map.addControl(zoomControl, daum.maps.ControlPosition.RIGHT);</script>
완성화면 : http://wdev.anybuild.co.kr/page/d_addr
다음 지도 API 메뉴얼 http://apis.map.daum.net/web/guide/
다음 지도 API 마법사 http://apis.map.daum.net/web/wizard/
열기 닫기