[API] 네이버 지도API 사용하기 1탄 - 등록 및 페이지에 표시

안녕하세요!

코딩전사 추추입니다!!

 

웹 또는 앱개발을 하다 보면 지도를 사용해야 할 때가 생깁니다.

지도 API를 사용해서 지도를 띄우고 원하는 기능을 구현하는데요!

 

오늘은 네이버지도API를 사용하는 방법을 알아보도록 하겠습니다.

 

1. 네이버 클라우드 가입

https://www.ncloud.com/

NAVER CLOUD PLATFORM

 

네이버 클라우드 플랫폼을 통해서 제공하고 있습니다.

네이버 계정과 연동도 되고, 따로 회원가입도 가능합니다.

 

회원가입을 하면서 '카드정보'를 입력해야 합니다.

이는 네이버 정책이 바뀌면서 월별, 일별 특정 횟수 이상 사용하게 되면 건당 비용을 지불하게 되었습니다.

 

자세한 횟수와 비용, 네이버 지도에 대한 전반적인 설명은 

이곳에서 확인 가능합니다!!

 

네이버 MAP API 비용 및 설명

NAVER CLOUD PLATFORM

 

 

2. 서비스 이용 신청하기

로그인 후 ->  상단의 '서비스'  -> 'Appication Services' -> 'Maps'  선택

 

 

Application 등록 선택

 

 

 

Application 이름을 설정

 

 

우선 기본적인 Maps에서 Web Dynamic Map을 선택합니다.

맵의 각 기능마다의 설명과 가이드는 옆에서 선택해 확인하면 됩니다.

 

 

Web에서 지도를 표시하기위해 Web 서비스 URL에 입력해 추가해 줍니다!!

로컬에서 테스트로 개발하기 때문에 localhost:포트번호를 입력해 줍니다!

나중에 실제로 서비스를 구현하게 된다면 서비스의 대표 도메인을 입력하면 됩니다.

프로젝트를 통해 여러 사람과 함께 사용한다면 각각의 localhost url을 등록하면 사용가능합니다!

아니면 포트번호를 동일하게 맞춰주어도 되겠죠?

 

등록을 하면

아래와 같이 지도 애플리케이션이 생성됩니다.

저는 지도의 3가지 기능을 사용하고 있어서 3개가 표시됩니다. 

이 콘솔에서 당일 사용량과 당월 사용량 확인이 가능하고

, 한도와 알림을 설정해서 사용 가능합니다. 

 

3. 지도 띄우기

서비스 이용신청을 완료했으니

웹 화면에 지도를 띄워보겠습니다.

 

네이버 지도 개발자 문서

NAVER Maps API v3

개발자 문서를 참고해서 해 보겠습니다!!

 

 

지도를 띄우는 것은 간단합니다

우선 application 고유의 clientId값을 가져옵니다!!

app 이름 하단에 인증정보를 선택하면 ClientID를 확인 가능합니다.

 

 

ClientID를 복사해서 아래 코드의

네이버 지도 호출하는 부분의 YOUR_CLIENT_ID에 넣어줍니다.

 

<!-- 네이버 지도 api 호출
   YOUR_CLIENT_ID 부분에 clientID 입력 -->
<script type="text/javascript" 
src="https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=YOUR_CLIENT_ID"></script>


<!-- 지도가 표시될 html
지도는 표시하는 돔 요소의 크기에 맞춰서 표시됩니다.
resize하기 전까지는 이 크기가 고정됩니다! -->
<div id="map" style="width:100%;height:400px;"></div>


<!-- 지도 표시 -->
<script>

    // 지도가 표시될 옵션 
    var mapOptions = {
        center: new naver.maps.LatLng(37.3595704, 127.105399),	// 중심 위치 좌표값
        zoom: 10		// 줍 레벨
    };
    
    // 지도에 표시                 (지도에 표시될 id값, 옵션)
    var map = new naver.maps.Map('map', mapOptions);
</script>

끝!!

화면 표시 성공!!

 

 

네이버 지도 API에 대한 세부적인 설명은 다음 편에서 설명하도록 하겠습니다!

지금까지 코딩전사 추추였습니다.