728x90
NAVER MAPS API
웹에 네이버 지도 API 추가하기
1.네이버 클라우드 가입 및 결제수단 등록
가입 후, 네이버맵 API는 결제수단을 등록해야 사용이 가능하다.
https://www.ncloud.com/product/applicationService/maps
NAVER CLOUD PLATFORM
cloud computing services for corporations, IaaS, PaaS, SaaS, with Global region and Security Technology Certification
www.ncloud.com
1.콘솔에서 어플리케이션 추가
https://console.ncloud.com/naver-service/application/create
- Web Dynamic Map 체크
- Web 서비스 URL에 임시로 localhost:8080 링크 추가
3.웹에 지도 표시
1)어플리케이션을 추가하고 나서 인증 정보 클릭
2)클라이언트 아이디 복사
3) HTML 파일에 스크립트 코드 추가
4) 복사해둔 클라이언트 ID 코드에 넣기
참고사이트: https://navermaps.github.io/maps.js.ncp/docs/tutorial-2-Getting-Started.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<title>간단한 지도 표시하기</title>
<script type="text/javascript" src="https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=YOUR_CLIENT_ID"></script>
</head>
<body>
<div id="map" style="width:100%;height:400px;"></div>
<script>
var mapOptions = {
center: new naver.maps.LatLng(37.3595704, 127.105399),
zoom: 10
};
var map = new naver.maps.Map('map', mapOptions);
</script>
</body>
</html>
728x90
'Follow Work > SpringbootBoard' 카테고리의 다른 글
| [Springboot] 회원 정보 수정하기(닉네임,이메일) [36] (0) | 2022.09.05 |
|---|---|
| [API] 네이버지도 API에 현재 위치 표시 [35] (0) | 2022.09.05 |
| [Springboot] 유저 회원가입 [33] (0) | 2022.08.25 |
| [Springboot] 댓글 페이징 [32] (3) | 2022.08.25 |
| [Springboot] 닉네임 만들기 [31] (0) | 2022.08.25 |