Custom Controls

You can create your own controls as well as using the default controls provided by the NAVER Maps API v3.

Add a custom control

There are two ways to add a custom control.

One is to create a CustomControl object by passing the HTML character string of a control to add. The other is to set the HTML node of a control to add in the controls property of the Map object created.

The following code examples create a custom control in these two ways.

Using the CustomControl class

var locationBtnHtml = '<a href="#" class="btn_mylct"><span class="spr_trff spr_ico_mylct">NAVER GREEN FACTORY</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);
});

Using the controls property of the Map object

var $locationBtn = $('<div style="position: absolute; left: 0px; top: 0px;"><a href="#" class="btn_mylct"><span class="spr_trff spr_ico_mylct">NAVER GREEN FACTORY</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);
});

This example contains jQuery code.

Add a custom control event

Controls should be able to respond to user inputs in order to interact with users. To do so, you should handle the DOM events of your control by using the Event method provided by the NAVER Maps API v3.

The following code example sets the center of the map to the location of NAVER Green Factory when the button is clicked.

Using the CustomControl class

var locationBtnHtml = '<a href="#" class="btn_mylct"><span class="spr_trff spr_ico_mylct">NAVER GREEN FACTORY</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: Creating cutsom controls

Using the controls property of the Map object

var $locationBtn = $('<div style="position: absolute; left: 0px; top: 0px;"><a href="#" class="btn_mylct"><span class="spr_trff spr_ico_mylct">NAVER GREEN FACTORY</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));
    });
});

This example contains jQuery code.

Examples: Creating cutsom controls