Info Windows

InfoWindow object defines an info window that displays content in a speech bubble.

You can use the default style provided by the NAVER Maps API v3, as well as specify custom styles, including borders, background colors and speech bubble tails, with style options.

As the content in an info window is composed of DOM elements, you can style your info window rather than using the default style.

Add info windows on top of markers

To display an info window on your map, call the open(map, anchor) method. The first parameter, map, specifies a Map object to add an info window on. The second parameter, anchor, specifies the location of an info window on the map.

If you specify coordinates with the LatLng or Point object in in anchor parameter, an info window is placed at the coordinates. The anchor parameter can be also specified with a KVO object containing the coordinate property and the anchor property, which is an offset at the coordinates, like a Marker object.

In the object, the getPosition and getAnchor methods should be implemented, and the InfoWindow object gets position and anchor with these methods to display the info window on the proper location.

The following code example displays an info window on a marker.

var cityhall = new naver.maps.LatLng(37.5666805, 126.9784147);

var map = new naver.maps.Map('map', {
    center: new naver.maps.LatLng(37.5698411, 126.9783927),
    zoom: 10
});

var contentString = [
    '<div class="iw_inner">',
    '   <h3>Seoul City Hall</h3>',
    '   <p>31, Taepyeongno 1-ga, Jung-gu, Seoul | Seoul City Hall, 110, Sejong-daero, Jung-gu, Seoul<br>',
    '       <img src="./img/hi-seoul.jpg" width="55" height="55" alt="Seoul City Hall" class="thumb" /><br>',
    '       02-120 | Public,Social Institute > Metropolitan City Hall<br>',
    '       <a href="http://www.seoul.go.kr" target="_blank">www.seoul.go.kr/</a>',
    '   </p>',
    '</div>'
].join('');

var marker = new naver.maps.Marker({
    map: map,
    position: cityhall
});

var infowindow = new naver.maps.InfoWindow({
    content: contentString
});

naver.maps.Event.addListener(marker, "click", function(e) {
    if (infowindow.getMap()) {
        infowindow.close();
    } else {
        infowindow.open(map, marker);
    }
});

This example contains jQuery code.

Examples: Displaying an info window

Style an info window

When creating an InfoWindow, you should specify InfoWindowOptions in a constructor. InfoWindowOptions specifies the border, background color and speech bubble tail of an info window. By specifying these options, you can style your info window.

The following code example specifies style options to style an info window.

var cityhall = new naver.maps.LatLng(37.5666805, 126.9784147);

var map = new naver.maps.Map('map', {
    center: new naver.maps.LatLng(37.5698411, 126.9783927),
    zoom: 10
});

var contentString = [
    '<div class="iw_inner">',
    '   <h3>Seoul City Hall</h3>',
    '   <p>31, Taepyeongno 1-ga, Jung-gu, Seoul | Seoul City Hall, 110, Sejong-daero, Jung-gu, Seoul<br>',
    '       <img src="./img/hi-seoul.jpg" width="55" height="55" alt="Seoul City Hall" class="thumb" /><br>',
    '       02-120 | Public,Social Institute > Metropolitan City Hall<br>',
    '       <a href="http://www.seoul.go.kr" target="_blank">www.seoul.go.kr/</a>',
    '   </p>',
    '</div>'
].join('');

var marker = new naver.maps.Marker({
    map: map,
    position: cityhall
});

var infowindow = new naver.maps.InfoWindow({

    content: contentString,

    maxWidth: 140,
    backgroundColor: "#eee",
    borderColor: "#2db400",
    borderWidth: 5,
    anchorSize: new naver.maps.Size(30, 30),
    anchorSkew: true,
    anchorColor: "#eee",

    pixelOffset: new naver.maps.Point(20, -20)
});

naver.maps.Event.addListener(marker, "click", function(e) {
    if (infowindow.getMap()) {
        infowindow.close();
    } else {
        infowindow.open(map, marker);
    }
});

This example contains jQuery code.

Examples: Using info window options

Custom info window

Rather than using the styles provided by the InfoWindow object, you can define a custom info window.

1. Set borderWidth of InfoWindowOptions to 0 to ignore the border design.
2. Set backgroundColor to transparent to ignore the background color.
3. Set disableAnchor to false to remove the tail of the speech bubble.
4. Specify the CSS style to design elements of the info window.

The following code example creates a custom info window by specifying the CSS style.

var map = new naver.maps.Map('map', {
    center: new naver.maps.LatLng(37.5698411, 126.9783927),
    zoom: 10
});

// Pin element
var infoWindowElement = $([
    '<div class="pin_nation">',
    '   <a href="http://www.naver.com/" target="_blank" class="pin_a">',
    '       <img src="./img/hi-seoul.jpg" width="38" height="26" alt="" class="pin_flag_m">',
    '       <span class="pin_txt"><em>Canada</em> <span class="spr spr_arrow"></span></span>',
    '       <span class="spr spr_arr"></span>',
    '   </a>',
    '   <div class="pin"><span class="pin_blur"></span></div>',
    '</div>'].join(''));

var infowindow = new naver.maps.InfoWindow({

    content: infoWindowElement[0],

    borderWidth: 0,
    disableAnchor: true,
    backgroundColor: 'transparent',

    pixelOffset: new naver.maps.Point(0, -28),
});

naver.maps.Event.addListener(map, "click", function(e) {

    var latlng = e.latlng;

    infoWindowElement.find("em").text(latlng.toString());
    infowindow.open(map, latlng);
});

This example contains jQuery code.