// 마커를 표시할 위치와 title 객체 배열입니다
var positions = [
{
content: '<div class="title">1</div>',
latlng: new kakao.maps.LatLng(37.3755273,126.9267499)
},
{
content: '<div class="title">2</div>',
latlng: new kakao.maps.LatLng(37.3744145,126.9239735)
},
{
content: '<div class="title">3</div>',
latlng: new kakao.maps.LatLng(37.3341952,126.919176)
},
{
content: '<div class="title">4</div>',
latlng: new kakao.maps.LatLng(37.3637749,126.9361614)
},
{
content: '<div class="title">5</div>',
latlng: new kakao.maps.LatLng(37.3557059,126.9147031)
},
{
content: '<div class="title">6</div>',
latlng: new kakao.maps.LatLng(37.3652161,126.9195698)
},
{
content: '<div class="title">7</div>',
latlng: new kakao.maps.LatLng(37.3718539,126.9298662)
},
{
content: '<div class="title">8 </div>',
latlng: new kakao.maps.LatLng(37.3605716,126.9427042)
},
{
content: '<div class="title">9</div>' ,
latlng: new kakao.maps.LatLng(37.3522684,126.932768)
}
];
for (var i = 0; i < positions.length; i ++) {
// 마커를 생성합니다
var marker = new kakao.maps.Marker({
map: map, // 마커를 표시할 지도
position: positions[i].latlng // 마커의 위치
});
// 마커에 표시할 인포윈도우를 생성합니다
var infowindow = new kakao.maps.InfoWindow({
content: positions[i].content // 인포윈도우에 표시할 내용
});
// 마커에 mouseover 이벤트와 mouseout 이벤트를 등록합니다
// 이벤트 리스너로는 클로저를 만들어 등록합니다
// for문에서 클로저를 만들어 주지 않으면 마지막 마커에만 이벤트가 등록됩니다
kakao.maps.event.addListener(marker, 'mouseover', makeOverListener(map, marker, infowindow));
kakao.maps.event.addListener(marker, 'mouseout', makeOutListener(infowindow));
}
// 인포윈도우를 표시하는 클로저를 만드는 함수입니다
function makeOverListener(map, marker, infowindow) {
return function() {
infowindow.open(map, marker);
};
}
// 인포윈도우를 닫는 클로저를 만드는 함수입니다
function makeOutListener(infowindow) {
return function() {
infowindow.close();
};
}