728x90
반응형

 

◆ 1. NAVER 지도 API v3 로드하기

Application 등록 후 발급받은 클라이언트 아이디를 사용해 NAVER 지도 API v3를 로드한다.

『 클라이언트 아이디 발급 방법 - [네이버 지도] 로컬환경(localhost)에서 NAVER 지도 API v3 사용 하기 』

 

<네이버 클라우드 플랫폼에서 발급받은 클라이언트 아이디인 경우>

<script type="text/javascript" src="https://oapi.map.naver.com/openapi/v3/maps.js?ncpClientId=네이버 클라우드 플랫폼에서 발급받은 클라이언트 아이디"></script>

 

<공공기관용에서 발급받은 클라이언트 아이디 인 경우>

<script type="text/javascript" src="https://oapi.map.naver.com/openapi/v3/maps.js?govClientId=공공기관용에서 발급받은 클라이언트 아이디"></script>

 

<금융기관용에서 발급받은 클라이언트 아이디 인 경우>

<script type="text/javascript" src="https://oapi.map.naver.com/openapi/v3/maps.js?finClientId=금융기관용에서 발급받은 클라이언트 아이디"></script>

 

 

◆ 2. 지도 DOM 요소 지정하기

지도를 삽입할 영역을 지정한다.

일반적으로는 <div></div> 요소를 사용한다.

<div id="mainMap" style="width:100%;height:700px;"></div>

<div> 태그의 id는 지도를 삽입할 때 영역을 호출하기 위한 용도로 사용하는데 사용자 임의로 지정해도 된다. 

만약 지도 생성시 옵션으로 size를 지정하지 않으면 DOM 컨테이너의 크기(<div> 태그에서 style로 지정한 width, height)로 지도 크기를 설정된다.

 

 

◆ 3. 지도 생성하기

new 연산자를 이용하여 지도를 표현하는 Map 클래스의 인스턴스를 생성한다.

var map = new naver.maps.Map('mainMap', {    //지도를 삽입할 영역의 id
    center: new naver.maps.LatLng(37.3595704, 127.105399),    //지도의 중심 좌표를 지정(위도,경도)
    zoom: 13,    //초기 지도의 줌 레벨을 지정
    zoomControl : true,    //지도의 줌 레벨을 조정할 수 있는 슬라이더 또는 +/- 버튼형식의 줌 컨트롤러 사용여부를 지정
    zoomControlOptions : {    //줌 컨트롤러의 옵션(위치, 모양)을 지정
        position : naver.maps.Position.TOP_RIGHT,    //줌 컨트롤러의 위치를 지정
        style: naver.maps.ZoomControlStyle.SMALL  //줌 컨트롤러의 모양을 지정
    }
});

 

naver.maps.Position 속성명 미 지정시 초기값 줌 컨트롤러 배치 위치
CENTER   중앙에 배치
TOP_LEFT 〇 왼쪽 위에 배치
TOP_CENTER   위쪽 가운데에 배치
TOP_RIGHT
  오른쪽 위에 배치
BOTTOM_LEFT   왼쪽 아래에 배치
BOTTOM_CENTER   아래쪽 가운데에 배치
BOTTOM_RIGHT   오른쪽 아래에 배치
LEFT_CENTER   왼쪽 가운데에 배치
LEFT_TOP   왼쪽 위에 배치
LEFT_BOTTOM   왼쪽 아래에 배치
RIGHT_CENTER   오른쪽 가운데에 배치
RIGHT_TOP   오른쪽 위에 배치
RIGHT_BOTTOM   오른쪽 아래에 배치

 

naver.maps.ZoomControlStyle 속성명 미 지정시 초기값 비고
LARGE 〇 확대/축소 버튼과 슬라이드 바가 함께 있는 스타일
SMALL   확대/축소 버튼만 있는 스타일

 

 

◆ 예제

페이지가 열리면 지정된 영역에 지도를 삽입하는 예제 코드이다.

<html>
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="https://oapi.map.naver.com/openapi/v3/maps.js?ncpClientId=네이버 클라우드 플랫폼에서 발급받은 클라이언트 아이디"></script>
    </head>
    <body>
        메인페이지
        <div id="mainMap" style="width:100%;height:700px;"></div>
        <script>
            $(document).ready(function() {
                // 페이지 로딩시 지도처리
                var map = new naver.maps.Map('mainMap', {
                    center: new naver.maps.LatLng(37.3595704, 127.105399),
                    zoom: 13,
                    zoomControl : true,
                    zoomControlOptions : {
                        position : naver.maps.Position.TOP_RIGHT,
                        style: naver.maps.ZoomControlStyle.SMALL
                    }
                });
            });
        </script>
    </body>
</html>

 

결과화면

 

[네이버 지도] 로컬환경(localhost)에서 NAVER 지도 API v3 사용 하기

[네이버 지도] NAVER 지도 생성하기 + 예제

[네이버 지도] NAVER 지도의 출력 언어 변경하기

[네이버 지도] NAVER 지도에 마커(Marker) 표시하기 (단일,다중마커) + 예제

[네이버 지도] NAVER 지도 이미지를 마커(Marker)로 사용하기 + 예제

참조
NAVER 지도 API v3
https://navermaps.github.io/maps.js.ncp/docs/tutorial-2-Getting-Started.html
Class: naver.maps.ZoomControl
https://navermaps.github.io/maps.js.ncp/docs/naver.maps.ZoomControl.html
Namespace: naver.maps
https://navermaps.github.io/maps.js.ncp/docs/naver.maps.html

 

글 내용 중 잘못된 부분이 있거나, 첨부하실 내용이 있으시면 댓글로 남겨주세요. 공부하는데 많은 도움이 됩니다.
-- 기억의 유효기간은 생각보다 짧다. --
728x90
반응형

'프로그래밍 언어 > JavaScript' 카테고리의 다른 글

[네이버 지도] NAVER 지도에 마커(Marker) 표시하기 (단일,다중마커) + 예제  (0) 2024.09.13
[네이버 지도] NAVER 지도의 출력 언어 변경하기 + 예제  (3) 2024.09.11
[네이버 지도] 로컬환경(localhost)에서 NAVER 지도 API v3 사용 하기  (0) 2024.09.10
TOAST UI Editor 화면에 적용하기 + 예제  (0) 2024.09.03
카카오(Daum) 우편번호 API 적용 방법 + 예제  (0) 2024.08.20

티스토리툴바