네이버 지도·검색 API 활용하기

네이버는 API가 두 사이트로 나뉘어 있습니다. 목적에 맞는 곳에서 키를 받으세요. ① 지도·길찾기 → 네이버 클라우드 플랫폼 (ncloud.com) · 콘솔 → [AI·NAVER API] → Application 등록 · API Key ID와 API Key 발급 (Maps 전용) · [서비스 환경 등록]에서 Web 서비스 URL 입력 — http://localhost:3000처럼 포트까지 정확히 · 무료이용량은 '대표 계정' 1개에만 부여됩니다(월 단위). 같은 전화번호·사업자번호로 계정이 여러 개면 대표 계정 외에는 과금되니 콘솔에서 확인하세요 ② 뉴스·블로그·지역·쇼핑 검색 → 네이버 개발자센터 (developers.naver.com) · [Application] → 애플리케이션 등록 → 사용 API에 '검색' 선택 · Client ID와 Client Secret 발급 카카오 가이드(/learn/kakao-map-api)와 헷갈리지 않게: 카카오는 한 사이트·한 앱에서 키 4개, 네이버는 목적별로 사이트가 갈립니다.

HTML 세 조각은 카카오와 거의 같습니다. 키 파라미터 이름만 다릅니다. <div id="map" style="width:100%;height:400px;"></div> <script src="https://oapi.map.naver.com/openapi/v3/maps.js?ncpKeyId=API_Key_ID"></script> <script> var map = new naver.maps.Map('map', { center: new naver.maps.LatLng(37.3595704, 127.105399), // (위도, 경도) — 카카오와 동일 zoom: 10 // 클수록 확대 (카카오 level과 반대 방향!) }); </script> · 키 파라미터는 ncpKeyId (구 문서의 ncpClientId는 구버전, 공공기관은 govClientId, 금융기관은 finClientId) · div에 width·height를 꼭 지정하세요. 높이 0이면 지도가 안 보입니다 · 인증 실패를 잡으려면 이 함수를 정의해 두세요: window.navermap_authFailure = function () { /* 키·도메인 확인 */ } · '지도가 안 뜨면' → 콘솔의 서비스 환경 등록 URL이 현재 주소(포트 포함)와 정확히 같은지부터

부가 기능은 스크립트 주소의 submodules 파라미터로 불러옵니다. <script src="https://oapi.map.naver.com/openapi/v3/maps.js?ncpKeyId=키&submodules=geocoder"></script> // 마커 + 정보창 var marker = new naver.maps.Marker({ position: new naver.maps.LatLng(37.3595704, 127.105399), map: map }); var info = new naver.maps.InfoWindow({ content: '<b>그린팩토리</b>' }); naver.maps.Event.addListener(marker, 'click', function () { info.getMap() ? info.close() : info.open(map, marker); }); // 주소 → 좌표 (geocoder 서브 모듈) naver.maps.Service.geocode({ query: '경기도 성남시 분당구 불정로 6' }, function (status, response) { if (status === naver.maps.Service.Status.OK) { var item = response.v2.addresses[0]; map.setCenter(new naver.maps.LatLng(item.y, item.x)); // item.x=경도, y=위도 } }); 그 외 서브 모듈: panorama(거리뷰), drawing(그리기), visualization(열지도·점지도). 쉼표로 여러 개: submodules=geocoder,panorama

서버에서 호출합니다. 헤더가 카카오와 다른 점에 주의 — 키를 두 개로 나눠 담습니다. 공통 헤더: x-ncp-apigw-api-key-id: {API Key ID} x-ncp-apigw-api-key: {API Key} Accept: application/json · 주소 → 좌표 (Geocoding) GET https://naveropenapi.apigw.ntruss.com/map-geocode/v2/geocode?query=분당구 불정로 6 → addresses[0].x(경도), .y(위도), .roadAddress, .jibunAddress, .addressElements(시도/시군구/우편번호 조각) · 좌표 → 주소 (Reverse Geocoding) GET https://naveropenapi.apigw.ntruss.com/map-reversegeocode/v2/gc?coords=127.1054328,37.3595963&output=json → 지번·도로명·법정동·행정동 · 자동차 길찾기 (Directions 5 — 경유지 최대 5개) GET https://naveropenapi.apigw.ntruss.com/map-direction/v1/driving?start=127.1054328,37.3595963&goal=126.9706,37.5559&option=trafast → route.trafast[0].summary.distance(미터), .duration(밀리초!), .tollFare, .taxiFare option: trafast(실시간 빠른길, 기본) / tracomfort(편한길) / traoptimal(최적) / traavoidtoll(무료) / traavoidcaronly 좌표는 start·goal 모두 '경도,위도' — duration이 밀리초라 60000으로 나눠야 분이 됩니다

지도가 아니라 '네이버 검색 결과'를 데이터로 받는 API입니다. 별도 사이트(developers.naver.com)의 Client ID/Secret을 씁니다. 공통 헤더: X-Naver-Client-Id: {Client ID} X-Naver-Client-Secret: {Client Secret} GET https://openapi.naver.com/v1/search/news.json?query=경상남도&display=10&sort=date 종류별로 주소 끝만 바뀝니다: blog 블로그 · news 뉴스 · local 지역(업체) · shop 쇼핑 · image 이미지 · book 책 kin 지식iN · cafearticle 카페글 · encyc 백과사전 공통 파라미터: query(필수) · display(1~100) · start(1~1000) · sort(sim 정확도 / date 최신) 함정 두 개: · 지역검색(local)만 display 최대 5 · start 최대 1 — '주변 업체 전부' 수집엔 못 씁니다. 목록 수집은 카카오 로컬 API(최대 45페이지)나 공공데이터가 맞습니다 · 무료 호출은 하루 25,000회 (모든 검색 API 합산) 활용 예: 우리 지역·기업 관련 뉴스를 매일 아침 모아 보여 주는 화면 — sort=date로 받아 중복만 빼면 끝.

· 검색 결과 링크: https://map.naver.com/v5/search/경남 창원 카페 안내문에 링크만 달 때는 이것으로 충분합니다. · Static Map API: 지도 '이미지'를 URL 한 줄로 받습니다. HTML·인쇄물·보고서에 그냥 <img>로 박을 수 있어 JS가 필요 없습니다. GET https://naveropenapi.apigw.ntruss.com/map-static/v2/raster?w=600&h=400&center=127.105399,37.3595704&level=12&markers=type:d|pos:127.105399 37.3595704 (헤더는 Geocoding과 동일. 중심 좌표·줌·마커를 파라미터로 지정) · 파노라마(거리뷰)도 서브 모듈로 넣을 수 있습니다 — 시설 안내 페이지에 유용합니다.

둘 다 되는 게 많습니다. 이렇게 고르면 됩니다. · 지도 화면 하나 띄우기: 취향 차이. 둘 다 무료, 둘 다 도메인 등록 필요 · 장소·업체 목록 수집: 카카오 로컬 API가 유리 (페이징 45페이지, 카테고리 코드) · 뉴스·블로그·쇼핑 검색: 네이버 검색 API (카카오는 Daum 검색이 별도) · 길찾기: 카카오모빌리티(택시요금 포함, duration=초) / 네이버 Directions(실시간 옵션 다양, duration=밀리초) · 인쇄물용 지도 이미지: 네이버 Static Map이 편합니다 공통 함정: REST 호출은 서버에서(키 노출·CORS), 좌표는 '경도,위도' 문자열 / 지도 객체는 LatLng(위도, 경도) — 양쪽 서비스 모두 이 순서입니다.

[네이버 지도 페이지] 네이버 클라우드 플랫폼 Web Dynamic Map으로 주소 목록을 지도에 표시하는 페이지를 만들어 주세요. - API Key ID는 NEXT_PUBLIC_NAVER_MAP_KEY_ID 환경변수로 읽고 코드에 직접 쓰지 마세요 - 스크립트는 maps.js?ncpKeyId=키&submodules=geocoder 로 로드 - 주소 목록을 geocode로 좌표 변환해 마커를 찍고, 클릭하면 장소명 정보창을 띄우세요 - window.navermap_authFailure에서 인증 실패를 화면에 안내하세요 - 완료 조건: npm run dev에서 지도와 마커가 보이고 클릭 동작 [뉴스 수집 화면] 네이버 검색 API로 특정 키워드의 최신 뉴스 20건을 표로 보여주는 화면을 만들어 주세요. - Client ID/Secret은 환경변수로, 반드시 Route Handler(/api/news)에서만 호출하세요 - GET https://openapi.naver.com/v1/search/news.json?display=20&sort=date - 응답 items의 title에서 <b> 태그를 제거하고, originallink·pubDate를 함께 표시 - 하루 25,000회 제한이 있으니 같은 키워드는 10분간 캐시하세요 키 발급과 서비스 URL 등록은 사람이 합니다. '제가 콘솔에서 해야 하는 단계를 순서대로 알려주세요'라고 덧붙이면 됩니다.