KVO State Change Notifications

Key-Value Observing (KVO) state change notification is an event that notifies observers of state changes of the observed NAVER Maps API v3 object.

Some objects of the NAVER Maps API v3 that inherit from the KVO or KVOArray class have their own states, and whenever their properties change, the NAVER Maps API v3 raises an event indicating that the property is changed.

• KVO: Provides a notification when the property (key) is changed.
• KVOArray: It is KVO in array, providing a notification when an element of the array is changed.

Each KVO state change notification is named based on the following rule.

{key}_changed

Add an event listener

Add an evet listener to receive an object’s state change notification. With the addListener method, you can add a listener that runs the handler after receiving the specified object’s notification.

The following code example displays the zoom level in an info window when the map’s zoom level is changed.

var map = new naver.maps.Map('map', {
    zoom: 4,
    center: new naver.maps.LatLng(37.3614483, 127.1114883),
    padding: { top: 100 },
    zoomControl:true,
    zoomControlOptions: {
        style: naver.maps.ZoomControlStyle.SMALL
    }
});

var contentEl = $('<div class="iw_inner" style="width:350px;position:absolute;top:0;right:0;z-index:1000;background-color:#fff;border:solid 1px #333;">'
    + '<h3>Map States</h3>'
    + '<p style="font-size:14px;">zoom : <em class="zoom">'+ map.getZoom() +'</em></p>'
    + '<p style="font-size:14px;">center : <em class="center">'+ map.getCenter() +'</em></p>'
    + '<p style="font-size:14px;">bounds : <em class="bounds">'+ map.getBounds() +'</em></p>'
    + '</div>');

contentEl.appendTo(map.getElement());

naver.maps.Event.addListener(map, 'zoom_changed', function(zoom) {
    contentEl.find('.zoom').text(zoom);
});

naver.maps.Event.addListener(map, 'bounds_changed', function(bounds) {
    contentEl.find('.center').text(map.getCenter());
    contentEl.find('.bounds').text(bounds);
});

This example contains jQuery code.

Examples: KVO events

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, KVO state change notifications are no longer received. You can remove a listener with the removeListener method.

Access an event argument

When a KVO state change notification occurs, the NAVER Maps API v3 usually passes an event argument, which you can access with the added listener.

As you can see in the example of “Add an event listener” above, when the zoom_changed notification occurs, the event listener is used to access the changed zoom level.