[Springboot] 웹에 네이버지도 API 추가하기

---

1. 네이버클라우드 가입 및 결제수단 등록

2. 콘솔에서 어플리케이션 추가

3. 웹에 지도 표시

4. 완성 화면

---

 

1. 네이버클라우드 가입 및 결제수단 등록

 - 네이버맵 API는 결제수단을 등록해야 사용이 가능하다

 플랫폼 링크 : https://www.ncloud.com/product/applicationService/maps

NAVER CLOUD PLATFORM

 

 

 

2. 콘솔에서 어플리케이션 추가

 - Web Dynamic Map 체크

 - Web 서비스 URL에 임시로 localhost:8080 링크 추가

 

 

 

3. 웹에 지도 표시

 참고 사이트 : https://navermaps.github.io/maps.js.ncp/docs/tutorial-2-Getting-Started.html

 

 - 어플리케이션을 추가하고 나서 인증 정보 클릭

 

 - 클라이언트 아이디 복사 (유출 주의)

 

 - HTML 파일에 스크립트 코드 추가

 - 복사해둔 클라이언트 ID 작성

<script layout:fragment="script" type="text/javascript"
	src="https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=본인 client ID"></script>
<script layout:fragment="script">
    var mapOptions = {
        center: new naver.maps.LatLng(37.3595704, 127.105399),
        zoom: 10
    };

    var map = new naver.maps.Map('map', mapOptions); // id와 option
</script>

 

 

 

 

4. 완성 화면