회원 로그인
|
|
다음 지도 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개(2/4페이지)
| 번호 | 제목 | 글쓴이 | 조회 | 날짜 |
|---|---|---|---|---|
| 51 |
[database] mySQL Warning: Skipping the data of table mysql.event 경고 시
 |
푸딩뱃살 | 3520 | 2015.07.01 01:30 |
| 50 | [홈페이지] 킴스큐 - 글쓰기 Editor의 레이아웃 설정하기 | 푸딩뱃살 | 1626 | 2015.06.18 02:32 |
| >> |
[웹] 다음 지도 API
|
푸딩뱃살 | 3095 | 2015.03.30 02:19 |
| 48 |
[웹] SyntaxHighlighter 설치
|
푸딩뱃살 | 758 | 2015.03.08 00:05 |
| 47 |
[웹] phpMyAdmin 에러 - Cannot start session without errors, ...
|
푸딩뱃살 | 1869 | 2015.01.15 01:44 |
| 46 | [cloud] owncloud 로그인이 안될 때 | 푸딩뱃살 | 2170 | 2015.01.15 01:28 |
| 45 |
[cloud] ownCloud 수동 업데이트
|
푸딩뱃살 | 2469 | 2014.12.15 13:29 |
| 44 | [html] 홈페이지 우클릭, 드래그 방지 | 푸딩뱃살 | 2402 | 2014.12.03 12:00 |
| 43 |
[웹] jwplayer 포멧 레퍼런스
|
푸딩뱃살 | 1532 | 2014.11.24 00:00 |
| 42 | [홈페이지] 킴스큐 - 미리 정의된 함수 (sys.func.php) | 푸딩뱃살 | 1932 | 2014.08.20 01:02 |
| 41 |
[cloud] owncloud 파일, 디렉토리 권한
  |
푸딩뱃살 | 1307 | 2014.08.14 15:45 |
| 40 |
[cloud] ownCloud - 설치 시 오류 'Dependency check'
|
푸딩뱃살 | 1701 | 2014.08.14 15:33 |
| 39 |
[cloud] ownCloud - 동기화 계정 바꾸기
|
푸딩뱃살 | 1731 | 2014.07.23 00:15 |
| 38 |
[cloud] ownCloud - .htaccess 보안 경고 해결
|
푸딩뱃살 | 2968 | 2014.07.15 18:58 |
| 37 | [cloud] ownCloud 설치 시 참고 | 푸딩뱃살 | 2659 | 2014.06.23 11:48 |
| 36 |
[웹] CSS syntax highlighting for Notepad++
|
푸딩뱃살 | 1688 | 2014.05.22 23:10 |
| 35 | [홈페이지] 킴스큐 - 게시판만 나오게 하는 팁 | 푸딩뱃살 | 2218 | 2014.04.03 12:01 |
| 34 |
[cloud] ownCloud - 사용자 생성 시 오류 해결법
|
푸딩뱃살 | 2166 | 2014.02.11 10:53 |
| 33 | [database] mySQL 계정 비밀번호 변경 | 푸딩뱃살 | 1570 | 2013.12.26 14:08 |
| 32 |
[database] mySQL 계정 생성 - grant
|
푸딩뱃살 | 1644 | 2013.12.13 10:23 |
