네이버 지도 API 사용

사용 목적

아래의 기능 구현을 위해 카페 위치를 표시할 지도 api가 필요하여 naver map api를 사용하게 되었다.

필요한 기능

1. 연남동 주변 카페 위치를 마커 표시

2. 필터가 변경될 때마다 그에 해당하는 카페 표시

3. 매장 상세 모달에서 ‘지도로 이동하기’ 버튼 클릭시 해당 카페 위치로 이동 및 seleted 마커 표시

---

서비스 신청 및 프로젝트 적용

서비스 신청

1. Naver Cloud Platform에 접속하여 서비스 -> Maps 로 이동하여 이용 신청하기를 클릭한다.

   

   
   

2. Application 등록 버튼 클릭 후 이름, 서비스, 서비스 환경 등록을 입력한다.

   

   • 서비스 환경 등록 시 네이버 지도 api를 이용할 클라이언트 url을 입력

   • 로컬에서 3000포트로 작업중이라면 http://localhost:3000을 등록

   • 배포한 사이트에서도 동작할 수 있도록 배포 완료 후 배포한 도메인도 등록

   
   

3. 등록이 완료되었다면 Application에서 인증 정보를 확인할 수 있다.

   

   
   

프로젝트 적용

1. 설치

   $ npm install @types/navermaps
   

   
   

2. .env 폴더 생성 후 client id 작성

   // .env
   NEXT_PUBLIC_NCP_CLIENT_ID = "Application에서 확인한 client id";
   

   
   

3. 스크립트 적용

   지도가 필요한 부분에 Next Script를 이용해 네이버 지도를 가져온다.

   return (
     <>
       <Script
         strategy="afterInteractive"
         type="text/javascript"
         src={`https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=${process.env.NEXT_PUBLIC_NCP_CLIENT_ID}`}
         onReady={initializeMap}
       />
       <div id={mapId} />
     </>
   );
   

4. 지도 설정

   const mapOptions = {
     center: new window.naver.maps.LatLng(...initialCenter),
     zoom: initialZoom,
     minZoom: 9,
     scaleControl: false,
     mapDataControl: false,
     logoControlOptions: {
       position: naver.maps.Position.BOTTOM_LEFT
     }
   };
   
   const map = new window.naver.maps.Map(mapId, mapOptions);
   

---

📑 참고 자료

[React/Typescript] 네이버 지도 API (1편) - 서비스 신청 및 연동하기

네이버 클라우드 플랫폼