회원 로그인
|
다음 지도 API
다음 지도 API
모바일, 웹에서 다음 지도를 무료로 사용할 수 있는 API
곧 벗꽃 시즌이라 여의도 국회의사당 옆 도로의 지도를 찍어보았다. var mapContainer = document.getElementById('map'), // 지도를 표시할 div mapOption = { center: new daum.maps.LatLng(37.532300, 126.920385), // 지도의 중심좌표 level: 3 // 지도의 확대 레벨 }; var map = new daum.maps.Map(mapContainer, mapOption); // 지도를 생성합니다 // 일반 지도와 스카이뷰로 지도 타입을 전환할 수 있는 지도타입 컨트롤을 생성합니다 var mapTypeControl = new daum.maps.MapTypeControl(); // 지도에 컨트롤을 추가해야 지도위에 표시됩니다 // daum.maps.ControlPosition은 컨트롤이 표시될 위치를 정의하는데 TOPRIGHT는 오른쪽 위를 의미합니다 map.addControl(mapTypeControl, daum.maps.ControlPosition.TOPRIGHT); // 지도 확대 축소를 제어할 수 있는 줌 컨트롤을 생성합니다 var zoomControl = new daum.maps.ZoomControl(); map.addControl(zoomControl, daum.maps.ControlPosition.RIGHT);
#웹브라우저에서 다음맵을 사용하기
<홈페이지> http://apis.map.daum.net
홈페이지로 가서 Web 선택
시작하기 클릭!
다음맵을 사용하기 위해선 키를 발급 받아야 한다.
앱 만들기 클릭!!
앱 이름을 원하는 이름으로 넣어준다.
왼쪽 메뉴에 API 키 클릭(1), REST/JS API의 오른쪽에 클릭(2)한다.
플랫폼 선택에 웹브라우저에서 사용하기 위해 웹브라우저를 선택(1), 아래 Referer 입력에 자신의 홈페이지 url을 넣어준다.(2)
http://를 포함한 url 전부를 넣는다. 예) http://dvframes.com
API 키가 발급되었다.
API 키가 발급되었다.
이제 최상위 index.html 또는 index.php 파일을 text 에디터(메모장 등)에서 연다.
라이브러리
말풍선 표시(마커)를 해준다던지, 길찾기, 로드뷰, 지도 검색 라이브러리를 제공한다.
<body>~</body> 사이에 아래 스크립트를 넣는다. (또는 script 태그를 사용할 수 있는 게시물을 작성한다.)
<script type="text/javascript" src="//apis.daum.net/maps/maps3.js?apikey=발급받은 API KEY"></script> <div id="map" style="width:500px;height:400px;"></div><!--웹에 표시할 지도 크기--> <script> var container = document.getElementById('map'); var options = { center: new daum.maps.LatLng(위도, 경도), //위도, 경도 순으로 넣는다. 지도의 중심좌표 level: 3 //레벨이 낮을수록 확대 }; var map = new daum.maps.Map(container, options); </script>
위도, 경도 알아내는 법 다음 지도에서 제공해주던 위도, 경도가 없어져 이를 구글 지도로 대체했다. 원하는 곳에 마우스 오른 클릭하여 '이곳이 궁금한가요?' 클릭 위에 위도와 경도가 표시된다. |
라이브러리
말풍선 표시(마커)를 해준다던지, 길찾기, 로드뷰, 지도 검색 라이브러리를 제공한다.
댓글 0개
| 엮인글 0개
71개(1/4페이지)
번호 | 제목 | 글쓴이 | 조회 | 날짜 |
---|---|---|---|---|
71 | [cloud] owncloud - WindowsError: ffffffff80070005: 액세스가 거부되었습니다. | 푸딩뱃살 | 156 | 2021.11.27 23:29 |
70 | [cloud] owncloud - Lock이 걸려 폴더/파일 삭제가 안될 때 | 푸딩뱃살 | 211 | 2020.05.17 17:56 |
69 | [웹] roundcube email 업데이트 | 푸딩뱃살 | 788 | 2018.04.16 10:58 |
68 | [서버] AWS Innovate Special Edition - Machine Learning on AWS 온라인 | 푸딩뱃살 | 930 | 2018.01.18 10:19 |
67 | [cloud] ownCloud 서버 에러 | 푸딩뱃살 | 1015 | 2017.12.20 10:21 |
66 | [홈페이지] 킴스큐 - whois 검색 수정 | 푸딩뱃살 | 1211 | 2017.11.05 18:22 |
65 | [웹] roundcube 날짜가 표시가 안될 때 | 푸딩뱃살 | 1050 | 2017.11.01 15:52 |
64 | [웹] DVWA 설치 / 사용법 [1+1] | 푸딩뱃살 | 3752 | 2017.10.02 01:39 |
63 | [html] html5 - nav / article | 푸딩뱃살 | 971 | 2017.06.05 18:36 |
62 | [cloud] owncloud 백업 방법 | 푸딩뱃살 | 1478 | 2017.05.02 11:54 |
61 | [홈페이지] 킴스큐 - httpd 경고/에러가 많아 | 푸딩뱃살 | 1337 | 2017.04.02 22:53 |
60 | [홈페이지] 킴스큐 - ERR_CONTENT_DECODING_FAILED 에러 시 | 푸딩뱃살 | 991 | 2017.03.28 15:07 |
59 | [cloud] owncloud 파일 스캔 (DB 정리) | 푸딩뱃살 | 1810 | 2016.09.10 04:37 |
58 | [cloud] owncloud occ(ownCloud console) | 푸딩뱃살 | 1493 | 2016.09.10 04:25 |
57 | [database] mySQL - UPDATE (수정) | 푸딩뱃살 | 1306 | 2015.12.01 23:22 |
56 | [database] mySQL - DELETE (삭제) | 푸딩뱃살 | 1391 | 2015.12.01 16:30 |
55 | [database] mySQL - SELECT (조회) | 푸딩뱃살 | 1197 | 2015.12.01 12:56 |
54 | [database] mySQL 기초 | 푸딩뱃살 | 1386 | 2015.11.30 15:48 |
53 | [웹] HTTP 프로토콜 | 푸딩뱃살 | 1206 | 2015.11.26 13:53 |
52 | [html] HTML 특수문자 리스트 | 푸딩뱃살 | 2204 | 2015.07.08 02:01 |