네이버 지도 API를 Web에서 사용하는 법을 알아보도록 한다.
1. 네이버 클라우드에 가서 지도 API 이용 신청하기를 한다.
(NAVER cloud platform 회원가입이 필요하다.)
https://www.ncloud.com/product/applicationService/maps
NAVER CLOUD PLATFORM
cloud computing services for corporations, IaaS, PaaS, SaaS, with Global region and Security Technology Certification
www.ncloud.com
네이버 클라우드 플랫폼의 서비스에서 Maps 이용신청하기를 누르자.
2. 네이버 클라우드 플랫폼 콘솔에서 Application 추가하기
Naver cloud platfrom console 페이지에서 Application 등록을 눌러서 Maps를 추가해야한다.
원하는 서비스를 일부 선택하여 고를 수 도 있고 Maps가 제공하는 모든 서비스를 일괄 선택하여 추가할 수도 있다.
Application을 등록해주면 인증 정보를 확인할 수 있다. 네이버 지도 API를 이용하기 위해선 이 인증 정보가 필요하다.
3. 웹에 지도 붙이기
코드에 지도 코드를 붙여보자.
아래를 참고하여 웹에 코드를 추가한다.
https://navermaps.github.io/maps.js.ncp/docs/tutorial-2-Getting-Started.html
NAVER Maps API v3
NAVER Maps API v3로 여러분의 지도를 만들어 보세요. 유용한 기술문서와 다양한 예제 코드를 제공합니다.
navermaps.github.io
아래 코드는 가장 간단한 형태이다.
<!DOCTYPE html>
<head>
<script type="text/javascript" src="https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=본인의 인증 CLIENT ID를 쓸것"></script>
</head>
<body>
<div id="map" style="width:100%;height:100vh;"></div>
<script>
var mapOptions = {
center: new naver.maps.LatLng(37.3595704, 127.105399),
zoom: 10
};
var map = new naver.maps.Map('map', mapOptions); // id와 option
</script>
</body>ncpClientId = 뒤에 본인의 인증 client ID쓰는 것을 잊지 말자
이 Client ID는 위 2번 과정의 네이버 클라우드 플랫폼 콘솔에서 인증 정보를 누르고 나타나는
다음과 같은 창에서 Client ID에서 확인할 수 있다.
코드를 입력하고 해당하는 웹을 띄워보면
위와 같이 화면에 꽉찬 (100% width, 100vh) 지도를 볼 수 있다.
댓글