반응형
1. API 문서 페이지 소개
아래 링크는 javascript로 지도를 표현하는 방법들에 대해 안내하는 문서이다.
https://navermaps.github.io/maps.js.ncp/docs/tutorial-2-Getting-Started.html
NAVER Maps API v3
NAVER Maps API v3로 여러분의 지도를 만들어 보세요. 유용한 기술문서와 다양한 예제 코드를 제공합니다.
navermaps.github.io
해당 문서로 들어가서 Tutorials, Examples를 참고하며 학습하면 된다.
2. 기본 예제
1) 샘플 코드
[Tutorials -> 시작하기 -> Hello, World]에 있는 샘플 코드이다.
이 샘플 코드에서 필자가 밑줄친 부분에, 여러분이 생성한 애플리케이션의 Client ID값을 넣어주면 된다.
Client ID를 넣어주고, 지도의 크기를 보기 좋게 변경했다.
<!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=pci7h12l33"></script>
</head>
<body>
<div id="map" style="width:60%;height:600px;margin:0 auto;"></div>
<script>
var map = new naver.maps.Map('map', mapOptions);
var mapOptions = {
center: new naver.maps.LatLng(37.3595704, 127.105399),
zoom: 10
};
</script>
</body>
</html>
2) 출력 화면
서울 시청의 좌표를 중심으로 하는 지도가 생성되었으며, 줌 인, 줌 아웃, 이동(드래그)이 모두 가능했다.
(1) 기본
(2) 줌 인
(3) 줌 아웃
(4) 이동(드래그)
반응형
'OpenAPI > Javascript API' 카테고리의 다른 글
| [OpenAPI] 네이버 지도 API(4) - 데이터베이스 연동 (0) | 2021.08.13 |
|---|---|
| [OpenAPI] 네이버 지도 API(3) - 마커와 정보창 표시 (0) | 2021.08.11 |
| [OpenAPI] 네이버 지도 API(1) - 내 애플리케이션 생성 (0) | 2021.08.10 |
댓글