개인 프로젝트로 간단한 기능을 포함한 웹사이트 만들기를 진행하면서, 네이버 지도 API를 적용할 일이 있어 기능을 사용하고 어떻게 사용하는지 후에 다시 보기 위해 작성한다.
방법은 어렵지 않다.
Application 등록방법
네이버 클라우드 가입 후 네이버 지도 API 발급
API 검색 후 AI•NAVER API 클릭
Application 창에서 +Application 등록
Application 이름을 설정하고, 원하는 API를 설정 후 URL을 추가 후 등록을 누른다.
등록 완료
다음으로는 사용 방법이다. 사용방법도 크게 어렵지 않다.
네이버 지도 API v3 적용방법
Application을 등록 후 인증정보를 누르면 Application Key를 확인할 수 있다.
여기서 Client ID를 복사한다.
<head> 태그 안에 네이버 지도 api script를 넣는다.
<script type="text/javascript"
src="https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=YOUR_CLIENT_ID"></script>지도를 삽입할 DOM 요소를 <body> 태그 안에 넣는다.
<div id="map" style="width:100%; height:400px;"></div>map에 인수를 전달하는 컨테이너 요소를 추가한다.
<script>
var map = new naver.maps.Map('map', {
center: new naver.maps.LatLng(35.155743, 129.059535), //위도, 경도 대입(부산 서면 짐박스 예시)
zoom: 15
});
var marker = new naver.maps.Marker({
position: new naver.maps.LatLng(35.155743, 129.059535),
map: map
});
</script>위도, 경도 찾기
위도 경도를 찾는데는 크게 두가지 방법이 있다.
구글맵에서 찾기
원하는 위치를 검색한다.
빨간 표시 위에서 우클릭한 후 [이곳이 궁금한가요?] 클릭
위도, 경도 표시 -> 한번 더 클릭하면 위도 경도가 보인다.
웹툴 사용(한번씩 로딩이 오래 걸리거나 잘 안되는 경우 존재)
이런 식으로 로딩이 오래 걸리는 경우가 빈번히 발생한다.
https://xn--yq5bk9r.com/blog/map-coordinates
지도 위도 경도
지도 위도 경도
xn--yq5bk9r.com
https://support.google.com/maps/answer/18539?hl=ko&co=GENIE.Platform%3DDesktop
위도 또는 경도로 좌표를 찾거나 검색하기 - 컴퓨터 - 지도 고객센터
좌표가 Google 지도에 표시되도록 형식을 지정하려면 십진수 도를 다음과 같은 형식으로 사용합니다. 올바른 예: 41.40338, 2.17403 잘못된 예: 41,40338, 2,17403 팁 위도 좌표, 경도 좌표 순으로 입력합니
support.google.com
완성 화면
참고자료
https://navermaps.github.io/maps.js.ncp/docs/tutorial-2-Getting-Started.html
NAVER Maps API v3
NAVER Maps API v3로 여러분의 지도를 만들어 보세요. 유용한 기술문서와 다양한 예제 코드를 제공합니다.
navermaps.github.io
'기타' 카테고리의 다른 글
| 클린 코드에 관하여 (0) | 2023.03.22 |
|---|---|
| [Mac OS] Terminal(터미널) 명령어 (0) | 2023.03.20 |
