svelte-naver-maps/README.md

Svelte component for Naver Maps

# svelte-naver-maps

> [가이드 문서](https://svelte-naver-maps.vercel.app/)

## Svelte Naver Maps이 무엇인가요?

Svelte Naver Maps은 네이버에서 제공하는 [Naver Map API](https://navermaps.github.io/maps.js.ncp/)를 Svelte 컴포넌트로 제공하는 비공식 라이브러리 입니다.

`NaverMaps API`의 직접적인 사용이 필요한 경우 [NaverMaps API 공식문서](https://navermaps.github.io/maps.js.ncp/docs/)를 참고해 주세요.


## 지원 컴포넌트

| 컴포넌트        | 설명 |
| :-----------: | :----:|
| `NaverMap`    | 네이버 지도 컴포넌트 |
| `NaverMarker` | 마커 컴포넌트 |
| `NaverMarkerCluster` | 마커 클러스터 컴포넌트 |
| `NaverInfoWindow` | 정보창 컴포넌트 |
| `NaverCircle` | 원 컴포넌트 |
| `NaverEllipse` | 타원 컴포넌트 |
| `NaverRectangle` | 직사각형 컴포넌트 |
| `NaverPolygon` | 폴리곤 컴포넌트 |
| `NaverPolyline` | 폴리라인 컴포넌트 |


## 설치

```sh [npm]
$ npm i svelte-naver-maps
$ npm i -D @types/navermaps # for typescript
```

타입스크립트를 사용할 경우 네이버에서 제공해주는 타입 정의([@types/navermaps](https://navermaps.github.io/maps.js.ncp/docs/tutorial-3-Using-TypeScript.html))를 추가적으로 설치해주세요.

## 기본 사용법

```svelte
<script>
import { NaverMap } from "svelte-naver-maps";

</script>

<NaverMap
  mapOptions={{
    clientId: "YOUR_NAVER_MAP_CLIENT_ID",
    width: "100%",
    height: "400px",
  }}
/>
```