logo
Tutorials Examples naver map js api v3 네이버 지도 API 사용자 정의 컨트롤

사용자 정의 컨트롤

NAVER 지도 API v3은 기본적으로 제공하는 컨트롤을 사용하지 않고, 사용자가 직접 만든 컨트롤을 사용할 수 있도록 API를 제공합니다.

사용자 정의 컨트롤 추가하기

NAVER 지도 API v3은 사용자 정의 컨트롤을 추가할 수 있도록 두 가지 방법을 제공합니다.

첫 번째는 추가할 컨트롤의 HTML을 문자열 형태로 전달하면서 CustomControl 객체를 생성하는 방법입니다. 두 번째 방법은 생성한 Map 객체의 controls 속성에 추가할 컨트롤의 HTML 노드를 설정하는 방법입니다.

다음은 두 가지 방법으로 사용자 정의 컨트롤이 생성된 지도를 보여주는 예제입니다.

CustomControl 클래스를 이용한 방법

var locationBtnHtml = '<a href="#" class="btn_mylct"><span class="spr_trff spr_ico_mylct">NAVER 그린팩토리</span></a>';

var customControl = new naver.maps.CustomControl(locationBtnHtml, {
    position: naver.maps.Position.TOP_LEFT
});

var map = new naver.maps.Map('map', {});

customControl.setMap(map);

Map 객체의 controls 속성을 이용한 방법

var $locationBtn = $('<div style="position: absolute; left: 0px; top: 0px;"><a href="#" class="btn_mylct"><span class="spr_trff spr_ico_mylct">NAVER 그린팩토리</span></a></div>'),
    locationBtnEl = $locationBtn[0];

var map = new naver.maps.Map("map", {});

map.controls[naver.maps.Position.TOP_LEFT].push(locationBtnEl);

위 예제는 jQuery 구문을 포함하고 있습니다.

사용자 정의 컨트롤 이벤트 추가하기

컨트롤이 사용자와 상호작용을 하려면 컨트롤이 사용자의 입력에 응답할 수 있어야 합니다. NAVER 지도 API v3에서 제공하는 Event 메서드를 이용해 컨트롤의 DOM 이벤트를 처리합니다.

다음은 버튼을 눌렀을 때 NAVER 그린팩토리의 위치로 중심점을 설정하는 예제입니다.

CustomControl 클래스를 이용한 방법

var locationBtnHtml = '<a href="#" class="btn_mylct"><span class="spr_trff spr_ico_mylct">NAVER 그린팩토리</span></a>';

var customControl = new naver.maps.CustomControl(locationBtnHtml, {
    position: naver.maps.Position.TOP_LEFT
});

var map = new naver.maps.Map('map', {});

customControl.setMap(map);

var domEventListener = naver.maps.Event.addDOMListener(customControl.getElement(), 'click', function() {
    map.setCenter(new naver.maps.LatLng(37.3595953, 127.1053971));
});

Examples: 사용자 정의 컨트롤 만들기

Map 객체의 controls 속성을 이용한 방법

var $locationBtn = $('<div style="position: absolute; left: 0px; top: 0px;"><a href="#" class="btn_mylct"><span class="spr_trff spr_ico_mylct">NAVER 그린팩토리</span></a></div>'),
    locationBtnEl = $locationBtn[0];

var map = new naver.maps.Map("map", {});

map.controls[naver.maps.Position.TOP_LEFT].push(locationBtnEl);

var domEventListener = naver.maps.Event.addDOMListener(locationBtnEl, 'click', function() {
    map.setCenter(new naver.maps.LatLng(37.3595953, 127.1053971));
});

위 예제는 jQuery 구문을 포함하고 있습니다.

Examples: 사용자 정의 컨트롤 만들기