수학과의 좌충우돌 프로그래밍

[Django] 14. API를 통한 naver 지도 사용하기 본문

웹프로그래밍/Django

[Django] 14. API를 통한 naver 지도 사용하기

ssung.k 2019. 3. 1. 21:22

안녕하세요 강민성입니다.


이번에는 API 가 뭔지 알아보고 이를 사용해보도록 하겠습니다.


API : Application Programming Interface


우리가 개발한 프로젝트에 다양한 외부기능들을 사용할 수 있도록 해주는 연결통로


굉장히 여러 API가 있습니다.


그 중에서 naver의 지도 API를 사용해보도록 하겠습니다.



API 사용법


저번 시간에 실습을 진행한 login 에 이어서 실습하도록 하겠습니다.


저번 시간의 실습은 여기를 클릭해주세요.



API 도 저번 시간에 구현한 소셜 로그인과 비슷한 방식으로 구현을 합니다.


https://www.ncloud.com


위의 링크로 들어가면 다양한 기능들을 살펴볼 수 있습니다.


여기서 naver map API 를 가져올 수 있는데 


그러기 위해서는 회원가입과 결재수단을 등록해야합니다.


결재수단은 일정 수준 이상의 뷰가 되어서 과금이 되기 때문에 


일반적인 토이 프로젝트를 진행하실 때는 걱정 안하셔도 됩니다.

그 후 상단 메뉴바의 서비스로 들어가면 다양한 서비스를 보실 수 있습니다.


이 중에 Maps 를 찾아 들어가줍니다.


이용신청하기 를 누르고 

하단에 위치한 Application 등록

application의 이름과, 원하는 서비스를 선택한 후에

만들어진 App 이름 아래 인증정보 로 들어가면 ID를 확인할 수 있습니다.


이를 복사한 후 이따 이용하겠습니다,


그 후 서비스 구분 아래 있는 아이콘을 클릭하면


설명서가 나오는 걸 확인할 수 있습니다.


Web Dynamic Map v3 사이트 바로가기


로 들어가면 예제코드들이 있습니다.



제일 처음 보이는 화면에 Hello, World 가 보입니다.


이를 그대로 복사해서 저희 html 파일에 붙여넣기를 해보겠습니다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
{% load socialaccount %}
{% providers_media_js %}
<!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>
    <h1>hello world</h1>
    <a href="/accounts/signup">회원가입</a>
<br>
    {% if user.is_authenticated %}
    <a href="/accounts/logout">로그아웃</a>
<br>
    {{user.username}} 님이 로그인 중
    {% else %}
        <a href="{% provider_login_url 'google' %}">구글 로그인</a>
        로그인 해야댐
    {% endif %}
    <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



이 상태로 서버를 켜도 지도는 나오지 않습니다.


아까 발급받은 ID를 아직 사용하지 않았기 때문인데요,


head 태그 안에 script 태그 뒷 부분


YOUR_CLIENT_ID를 아까 발급받았던 ID로 바꿔줍니다.


그 결과, 지도를 확인 할 수 있습니다.


style 을 통해서 맵의 크기도 조절할 수 있고,


zoom 을 통해 확대 및 축소도 가능합니다. ( 숫자가 클수록 더 많은 확대 입니다.)


Latlng 뒤 위도, 경도 값을 조절에 지도의 첫 화면도 바꿀 수 있습니다.



이는 hello world 에 해당 되는 내용이므로 


다른 예시들 및 document를 이용하여 활용하시길 바랍니다.




저작자표시

'웹프로그래밍 > Django' 카테고리의 다른 글

[Django] 15. app 재사용하기  (2) 2019.03.02
[Django] 썸네일 만들기  (2) 2019.03.02
[Django] 13. 소셜 로그인 구현( kakao,google, fackbook 등)  (10) 2019.03.01
[Django] 12. form 을 알아보자  (0) 2019.02.28
[Django] 11. Pagination 을 알아보자  (1) 2019.02.27
'웹프로그래밍/Django' Related Articles more
Comments