UI Events

User interface (UI) events are generated by interactions between a user and a map. Some objects of the NAVER Maps API v3 are designed to respond to the following UI events.

• mousedown, mouseup, click, dblclick, rightclick, mouseover, mouseout, mousemove
• dragstart, drag, dragend
• touchstart, touchmove, touchend, pinchstart, pinch, pinchend, tap, longtap, twofingertap, doubletap

These events look like standard document object model (DOM) events, but actually are the NAVER Maps API v3’s events. So, you can receive and respond to these events without directly handling the differences of characteristics between browsers.

Add an event listener

Add an event listener to receive a UI event. With the addListener method, you can add a listener that runs the handler after receiving an event generated in the specified object.

The following code example displays the clicked location with the console.log method.

var mapOptions = {
    zoom: 4,
    center: new naver.maps.LatLng(37.3614483, 127.1114883)
};

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

naver.maps.Event.addListener(map, 'click', function(e) {
    console.log(e);
});

After adding a listener, you can receive a MapEventListener object as shown below.

MapEventListener = {
    eventName: String,
    listener: Function,
    listenerId: String,
    target:Object
}

The MapEventListener object contains information of the added listener, and is used to remove the listener.

Remove an event listener

If an event listener is removed, UI events are no longer received. You can remove a listener with the removeListener method.

The following code example removes the listener added to a marker.

var mapOptions = {
    zoom: 4,
    center: new naver.maps.LatLng(37.3614483, 127.1114883)
};

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

var markerOptions = {
    position: map.getCenter(),
    map: map
};

var marker = new naver.maps.Marker(markerOptions);

var listener = naver.maps.Event.addListener(marker, 'click', function() {
    map.setZoom(8);
    map.setCenter(marker.getPosition());

    naver.maps.Event.removeListener(listener);
});

Access an event argument

When a UI event occurs, the NAVER Maps API v3 usually passes event arguments, which you can access with the added listener. For example, a Map object passes arguments of a PointerEvent object for several events including the click event.

The following code example places a marker at the click position when the map is clicked.

var mapOptions = {
    zoom: 4,
    center: new naver.maps.LatLng(37.3614483, 127.1114883)
};

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

var listener = naver.maps.Event.addListener(map, 'click', function(e) {
    var marker = new naver.maps.Marker({
        position: e.coord,
        map: map
    });
});

+Examples: Basic events
+Examples: Overlay’s events