네이버 지도 API 활용하기
API(Application Programming Interface)
응용 프로그램에서 사용할 수 있도록 OS, PR언어가 제공하는 기능을 제어할 수 있는 인터페이스.
우리 웹 페이지와 같은 응용 프로그램에서
우리가 갖고 있지 않은 외부기능을 가져다 쓸 수 있다.
네이버 지도 API 활용하기!
## Naver cloud platform
ncloud 페이지 들어가서 회원가입
첨부파일
0.00MB
첨부파일
0.00MB
회원가입 후 서비스 들어가서 maps 클릭
첨부파일
0.00MB
maps 이용신청하기 클릭
하단에 application 등록
첨부파일
0.00MB
web dynamic mab 클릭
web 서비스 url은 http://127.0.0.1:8000 입력
첨부파일
0.00MB
첨부파일
0.00MB
첨부파일
0.00MB
첨부파일
0.00MB
clientID와 clientSecret 복사
사용설명서 누르면 자세한 설명을 볼 수 있음(https://navermaps.github.io/maps.js.ncp/docs/tutorial-2-Getting-Started.html)
지도 예시 코드 복사
## template
복사한 지도 예시 코드 입력
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<title>간단한 지도 표시하기</title>
<script type="text/javascript" src="https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=YOUR_CLIENT_ID"></script>
</head>
<body>
<div id="map" style="width:100%;height:400px;"></div>
<script>
var mapOptions = {
center: new naver.maps.LatLng(37.3595704, 127.105399),
zoom: 10
};
var map = new naver.maps.Map('map', mapOptions);
</script>
</body>
</html>
|
cs |
YOUR_CLIENT_ID 부분에 우리가 복사해둔 clientID 입력하면 된다.
추가로 지도 크기를 조정하려면 width와 height 값을 변경하면 된다.
zoom 항목도 조정하여 zoom도 조정가능!
(ncloud에서 지도 예제 모아보기에서 여러 예제를 볼 수 있음!)
'Web Programming > Django' 카테고리의 다른 글
| Blog 보충(로그인 요구, 내가 쓴글) (2) | 2019.02.26 |
|---|---|
| 소셜로그인 API 활용하기 (0) | 2019.02.26 |
| 댓글 기능 추가하기(모델 관계) (0) | 2019.02.20 |
| Django 장고 텍스트에디터 사용하기(CKeditor) (4) | 2019.02.19 |
| Form 활용하기 (0) | 2019.02.16 |
