관광지 정보를 지도에 표시하기 위해 네이버 지도 API를 활용하였다.
네이버에서 제공하는 Maps API는 위와 같다. 우선 지도를 화면에 표시하기 위해 Web Dynamic Map을 활용하였고, 주소나 좌표를 통해 정보를 얻기 위해 Places의 Geocoding과 Reverse Geocoding도 활용하였다.
1. 서비스 이용 신청
https://www.ncloud.com/product/applicationService/maps#overview
우선 위 링크로 이동하여 서비스를 신청한다.
애플리케이션 이름을 입력하고 이용할 서비스를 체크한 뒤 서비스 환경을 등록한 후 api key와 api secret을 발급받자.
2. 프로젝트에 연동
Next.JS 프로젝트를 생성했다면 layout.tsx 파일이 있다.
해당 파일을 열어 스크립트를 추가해주자.
<Script
src={`https://oapi.map.naver.com/openapi/v3/maps.js?ncpClientId=${naverMapApiKey}&submodules=geocoder`}
strategy="beforeInteractive"
/>naverMapApiKey 부분에는 발급받은 api key를 입력하면 된다.
나는 geocoding을 활용할 것이기 때문에 geocoder 서브모듈을 로드해주었다.
활용할 수 있는 네이버 지도의 서브모듈로는 geocoder 말고도 여러가지가 있는데
자세한 내용은 https://navermaps.github.io/maps.js.ncp/docs/tutorial-4-Submodules.html 링크를 참고하자
