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

사용자 정의 컨트롤 만들기

사용자 정의 컨트롤

사용자 정의 컨트롤을 생성하는 예제입니다. 이 예제는 jQuery 구문을 포함하고 있습니다.

var locationBtnHtml = '<a href="#" class="btn_mylct"><span class="spr_trff spr_ico_mylct">NAVER 그린팩토리</span></a>';
var map = new naver.maps.Map('map', {zoom: 13});

naver.maps.Event.once(map, 'init', function() {
    //customControl 객체 이용하기
    var customControl = new naver.maps.CustomControl(locationBtnHtml, {
        position: naver.maps.Position.TOP_LEFT
    });

    customControl.setMap(map);

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

    //Map 객체의 controls 활용하기
    var $locationBtn = $(locationBtnHtml),
        locationBtnEl = $locationBtn[0];

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

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