[React] React + Typescript NaverMap API 사용하기

먼저 

npm install --save @types/navermaps

명령어를 사용하여 패키치를 설치해준다.

 

이후 Client ID를 발급받기 위해 

https://www.ncloud.com/product/applicationService/maps

NAVER CLOUD PLATFORM

해당 사이트에 접속하여 결제수단 등록 후 

Application 등록을 해준다.

 

<script type="text/javascript" src="https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=발급받은아이디"></script>

이후 public의 index.html에 위 코드를 넣어준다.

 

네이버 지도를 첨부 할 컴포넌트로 이동한다.

 

const NaverMap = () => {
    useEffect(() => {
        let map = null
        let marker = null
        const initMap = () => {
            map = new naver.maps.Map('map', {
                //지도 추가, 좌표를 기점으로 주변 지도가 추가된다.
                center: new naver.maps.LatLng(37, 127.039573),
                zoom: 13
            })

            marker = new naver.maps.Marker({
                position: new naver.maps.LatLng(37, 127.039573), //Marker 추가, 좌표에 마커가 찍힌다.
                map: map,
                icon: {
                    content: `
              <img alt="marker" src={vectorIcon} /> //마커에 사용할 이미지
            `
                }
            })
        }
        initMap()
    }, [])

    const mapStyle = {
        width: '45vw',
        height: '22vw'
    }

    return (
        <MapContainer>
            <div id="map" style={mapStyle} />
       
        </MapContainer>
    )
}

export default NaverMap

해당 방식으로 naverMap을 사용할 수 있다.