네이버 맵 구현

프로젝트 소개

네이버 지도 API를 사용하여 웹 페이지에 지도를 표시하는 프로젝트입니다.

주요 기능

네이버 지도 API 연동

지도 중심 좌표 설정 (서울 시청)

줌 컨트롤 및 마커 표시

반응형 지도 뷰

기술 스택

Naver Maps API

Nuxt 3

TypeScript

API 키 설정 필요

.env 파일에 NUXT_PUBLIC_NAVER_CLIENT_ID를 설정해야 지도가 표시됩니다.

네이버 지도

서울 시청

코드 예제

1. .env 파일에 API 키 설정

NUXT_PUBLIC_NAVER_CLIENT_ID=your_client_id_here

2. 런타임 설정에서 가져오기

const config = useRuntimeConfig()
const clientId = config.public.naverClientId

3. 지도 초기화

const mapOptions = {
  center: new naver.maps.LatLng(37.5665, 126.9780),
  zoom: 15,
  zoomControl: true
}

const map = new naver.maps.Map('map', mapOptions)

4. 마커 추가

new naver.maps.Marker({
  position: new naver.maps.LatLng(37.5665, 126.9780),
  map: map,
  title: '서울 시청'
})