네이버 지도 API, Web Dynamic Map 사용 방법 - 실습해 보자 (Naver map API)
위의 네이버 지도 API - Web Dynamic Map이 삽입된 것이 보이시나요?
네이버에는 프로그래머들이 유용하게 활용할 수 있는 API가 여러 가지 준비되어 있는데요. 저는 네이버 지도, 그 중에서도 Web Dynamic Map을 HTML에 삽입하는 것을 직접 차례대로 자세히 실습해 보겠습니다.
1. 우선 네이버 클라우드 플랫폼에 접속합니다.
https://www.ncloud.com/product/applicationService/maps
서비스의 Application Service 중 Maps 에 들어가서 이용 신청하기를 클릭합니다.
이용 신청하기를 클릭하면 로그인 화면이 나올 겁니다. 네이버 아이디가 있더라도 클라우드 플랫폼에는 따로 회원 가입이 필요합니다. 회원 가입 이후에 계정 관리에서 네이버 아이디를 연동해 주면 다음 로그인부터는 네이버 아이디로 간편하게 로그인 할 수 있습니다. 일단은 회원 가입을 진행합니다.
2. 회원 가입이 완료되면 다음 화면으로 넘어가고, 결제 수단을 입력하라는 안내가 나옵니다. 제가 사용할 Web Dynamic Map은 월 1천만 회의 무료 이용 한도가 있어, 사실상 무료나 다름 없습니다. 걱정하지 않고 결제 수단을 등록해 줍니다.
결제 수단까지 등록하고 나면 네이버 클라우드 플랫폼 웹사이트 우측 상단에 Console 버튼이 있습니다. 위의 캡쳐 화면에서도 Console 버튼의 위치를 확인할 수 있습니다. 여기를 클릭합니다.
그러면 아래 캡쳐 화면처럼 콘솔에 들어가게 되는데요. 왼쪽 메뉴들 중 Products & Services를 클릭한 뒤 나오는 상세 메뉴들 중 AI, NAVER API를 클릭합니다.
3. 그 후 나오는 화면에서는 Application 등록을 클릭합니다.
Application 이름에는 자신이 서비스를 분간할 수 있는 이름을 정합니다. 웹사이트 이름을 적는 것이 무난합니다.
Web 서비스 URL에는 사이트 URL을 정확하게 기입합니다.
URL을 추가한 뒤 다음으로 넘어가면 인증 정보를 발급 받습니다.
열쇠 모양 아이콘이 있는 인증 정보 버튼을 눌러주면 자신의 Client ID를 확인할 수 있는데 이것을 복사해 두는 것이 편합니다.
4. 자, 이제 마지막 단계입니다. 이제 실제로 HTML 편집을 통해서 지도를 직접 삽입하는 과정입니다. 네이버는 지도API를 사용하는 분들을 위해 예제를 하나 만들어 놓았는데요. 코드를 직접 짤 필요 없이 이 예제를 본인 필요에 맞게 변형하시면 편합니다.
<!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>특기사항
1. YOUR_CLIENT_ID는 꼭 본인의 Client ID로 변경할 것 (이를 위해 아까 복사해 두면 편하다고 한 것입니다. 아까 복사 안 하신 분들은 지금 가서 복사하셔도 됩니다.)
2. zoom은 줌, 확대 정도를 의미합니다.
3. naver.maps.LatLng()에 들어가는 숫자는 위도, 경도를 의미합니다. (Latitude, Longitude).
저는 축구를 좋아하므로 서울월드컵경기장을 지도에 뜨게 설정해 보겠습니다. 구글 지도를 이용하면 간단히 지도의 좌표 즉, 위도와 경도를 알아낼 수 있습니다.
구글 지도에서 서울월드컵경기장을 검색하면 상단URL에 좌표가 뜨고, 우클릭을 해도 자세한 좌표를 알 수 있습니다.
저는 상단 URL의 좌표를 복사해서 naver.maps.LatLng()에 붙여 넣기 한 뒤, zoom은 16으로 설정했습니다. 사이트에 적용할 때 참고하셔서 적정한 확대 정도를 정하시기 바랍니다.
이상으로 HTML에 네이버 지도API Web Dynamic Map 삽입 실습을 마무리 하겠습니다.
Comments
Post a Comment