정보 창
InfoWindow는 지도 위에 말풍선 모양의 콘텐츠를 표시할 수 있는 정보 창을 정의하는 객체입니다.
정보 창의 디자인은 NAVER 지도 API v3에서 제공하는 스타일을 사용할 수 있고, 스타일 관련 옵션으로 정보 창 테두리, 배경색, 말풍선 꼬리의 스타일을 설정할 수 있습니다.
정보 창 내부의 콘텐츠는 DOM 요소로 구성되므로 NAVER 지도 API v3에서 제공하는 스타일을 무시하고 사용자가 원하는 디자인으로 정보 창을 꾸밀 수도 있습니다.
마커 위에 정보 창 올리기
정보 창을 지도 위에 노출하려면 open(map, anchor)
메서드를 호출합니다. 첫 번째 파라미터인 map
은 정보 창을 올릴 Map 객체를 설정합니다. 두 번째 파라미터인 anchor
는 지도 위에서 정보 창의 위치를 결정하는 인자입니다.
anchor
에 LatLng 또는 Point 객체로 지도 좌표를 설정하면 해당 좌표를 가리키도록 정보 창을 위치시킵니다. anchor
는 지도 좌표뿐만 아니라 Marker 객체와 같이 객체 내부에 지도 좌표 속성과 해당 지도 좌표 위치에서의 오프셋값인 anchor
속성을 포함하는 KVO 객체로도 설정할 수 있습니다.
해당 객체는 getPosition
과 getAnchor
메서드가 구현되어 있어야 하고, InfoWindow 객체는 이를 이용해 position
과 anchor
값을 계산하여 적절한 위치에 정보 창을 노출합니다.
다음은 마커 위에 정보 창을 노출하는 예제입니다.
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>서울특별시청</h3>',
' <p>서울특별시 중구 태평로1가 31 | 서울특별시 중구 세종대로 110 서울특별시청<br>',
' <img src="./img/hi-seoul.jpg" width="55" height="55" alt="서울시청" class="thumb" /><br>',
' 02-120 | 공공,사회기관 > 특별,광역시청<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);
}
});
위 예제는 jQuery 구문을 포함하고 있습니다.
Examples: 정보 창 표시하기
정보 창 디자인 스타일 옵션 조정하기
InfoWindow를 생성할 때 생성자에 InfoWindowOptions를 설정해야 합니다. InfoWindowOptions에는 정보 창의 테두리, 배경색, 말꼬리 등의 모양을 결정하는 스타일 옵션이 포함되어 있습니다. 이를 조정하여 사용자는 원하는 모양대로 정보 창을 노출할 수 있습니다.
다음은 스타일 옵션값을 조절하여 정보 창 모양을 설정하는 예제입니다.
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>서울특별시청</h3>',
' <p>서울특별시 중구 태평로1가 31 | 서울특별시 중구 세종대로 110 서울특별시청<br>',
' <img src="./img/hi-seoul.jpg" width="55" height="55" alt="서울시청" class="thumb" /><br>',
' 02-120 | 공공,사회기관 > 특별,광역시청<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);
}
});
위 예제는 jQuery 구문을 포함하고 있습니다.
Examples: 정보 창 옵션 사용하기
사용자 정의 정보 창
InfoWindow 객체에서 제공하는 정보 창 모양을 무시하고 사용자가 원하는 대로 정보 창 디자인을 꾸밀 수 있습니다.
- InfoWindowOptions의
borderWidth
를0
으로 설정하여 테두리 디자인을 무시합니다. backgroundColor
를transparent
로 설정하여 배경색을 무시합니다.- 말꼬리를 없애기 위해
disableAnchor
를false
로 설정합니다.disableAnchor
속성은 기본 말풍선 꼬리의 사용 여부입니다. - CSS 스타일을 설정해 원하는 대로 정보 창 요소를 디자인합니다.
다음은 NAVER 지도 API v3에서 제공하는 정보 창 디자인을 무시하고 CSS를 설정해 정보 창 디자인을 적용한 예제입니다.
var map = new naver.maps.Map('map', {
center: new naver.maps.LatLng(37.5698411, 126.9783927),
zoom: 10
});
// 핀 요소
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>캐나다</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);
});
위 예제는 jQuery 구문을 포함하고 있습니다.