| 구분 | API / SDK | 용도 |
|---|---|---|
| 지도 표시 | Web Dynamic Map | 웹에서 지도 띄우기, 마커 표시, 클릭 이벤트 |
| 모바일 지도 | Android / iOS SDK | 나중에 앱 만들 때 사용 |
| 정적 지도 | Static Map | 썸네일, 공유 카드, 공지 이미지 |
| 주소 → 좌표 | Geocoding | 사용자가 입력한 장소를 좌표로 변환 |
| 좌표 → 주소 | Reverse Geocoding | 지도 클릭 지점의 주소 표시 |
| 길찾기 | Directions 5 / 15 | 경로 계산 |
| 지도 스타일 | Map Style Editor | 지도 테마 커스텀 |
| 우선순위 | 사용할 것 | MVP 필요도 | 역할 |
|---|---|---|---|
| 1 | Web Dynamic Map API | 필수 | 모바일 웹앱 안에서 네이버 지도 렌더링 |
| 2 | Marker / Overlay | 필수 | DB에 저장된 흡연/금연 좌표를 지도 위에 표시 |
| 3 | Naver Maps URL Scheme /route/walk |
선택적 필수 | 도보 길찾기 버튼을 눌렀을 때 네이버 지도 앱으로 넘김 |
| 4 | Map Style Editor | 선택 | 지도 테마 커스텀. API라기보다 콘솔 도구 |
웹 페이지 안에 네이버 지도를 띄우는 JavaScript API
네이버 공식 문서는 Web Dynamic Map API를 “JavaScript 형태의 네이버 지도 플랫폼”이라고 설명하고, 웹 서비스나 애플리케이션에 네이버 지도 기능을 구현할 수 있는 클래스와 라이브러리를 제공한다고 설명한다. 모바일 환경도 지원한다.
프론트에서 네이버 지도 JS 파일을 로드한다.
<script
src="<https://oapi.map.naver.com/openapi/v3/maps.js?ncpKeyId=YOUR_CLIENT_ID>">
</script>
그 다음 naver.maps.Map 객체를 만든다.
constmap=newnaver.maps.Map('map', {
center:newnaver.maps.LatLng(37.5665,126.9780),
zoom:16,
});
공식 시작 예제도 DOM 요소에 new naver.maps.Map('map', { center, zoom }) 형태로 지도를 생성한다.
type WebDynamicMapInput= {
containerId:string;// 예: "map"
center:naver.maps.LatLng;
zoom:number;
};