네이버 지도 API key 발급 방법 (Naver Map API)
기술정보 24.04.05네이버 에서 제공하는 지도 API를 이용하려면 먼저 구글에서 발급하는 API Key를 발급받아야 합니다.
1. 로그인
네이버 클라우드 플랫폼 웹사이트에 가입하거나 기존 계정으로 로그인합니다.
네이버 클라우드 웹사이트: https://www.ncloud.com/
2. maps 이용 신청하기
로그인 후 화면 상단 메뉴 서비스 > Application Service > map 선택합니다.
(https://www.ncloud.com/product/applicationService/maps)
3. Application 등록
결제 수단 등록 후 나오는 콘솔에서 Application을 등록합니다.
AI · Naver Service 를 이용할 Application 이름을 설정합니다.
Application에서 이용할 Service > Web Dynamic Map 선택합니다.
Application에서 이용할 서비스 환경을 예시에 맞게 작성 후 추가합니다.
4. Application 인증 정보 확인
Application key > Client ID로 앱키 사용합니다.
[예시]
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 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 | <!DOCTYPE html> <html> <head> <title>Naver 지도 시작하기</title> <script type="text/javascript" src="https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=발급받은 APP KEY를 넣으시면 됩니다.&callback=initMap"></script> </head> <body> <div id="map" style="width:100%;height:100%;"></div> </body> <script> var map = new naver.maps.Map('map', { center: new naver.maps.LatLng(x값, y값), //지도의 초기 중심 좌표 useStyleMap: true, zoom: 줌레벨, //지도의 초기 줌 레벨 minZoom: 1, //지도의 최소 줌 레벨 mapTypeControl: true, //지도 유형 컨트롤의 표시 여부 mapTypeControlOptions: { //지도 유형 컨트롤의 옵션 style: naver.maps.MapTypeControlStyle.BUTTON, position: naver.maps.Position.TOP_LEFT }, zoomControl: true, //줌 컨트롤의 표시 여부 zoomControlOptions: { //줌 컨트롤의 옵션 position: naver.maps.Position.TOP_RIGHT } }); //정보창 var contentString = [ '', " ", ' ' ].join(''); var marker = new naver.maps.Marker({ position: new naver.maps.LatLng(x값,y값), map: map }); var infowindow = new naver.maps.InfoWindow({ content: contentString, anchorSize: new naver.maps.Size(15, 5), pixelOffset: new naver.maps.Point(0, -10) }); naver.maps.Event.addListener(marker, "click", function(e) { if (infowindow.getMap()) { infowindow.close(); } else { infowindow.open(map, marker); } }); infowindow.open(map, marker); //setOptions 메서드를 통해 옵션을 조정할 수도 있습니다. map.setOptions("mapTypeControl", true); //지도 유형 컨트롤의 표시 여부 </script> </html> | cs |