사용자 정의 컨트롤

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', {});

naver.maps.Event.once(map, 'init', function() {
    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", {});

naver.maps.Event.once(map, 'init', function() {
    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', {});

naver.maps.Event.once(map, 'init', function() {
    customControl.setMap(map);

    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", {});

naver.maps.Event.once(map, 'init', function() {
    map.controls[naver.maps.Position.TOP_LEFT].push(locationBtnEl);

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

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

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