// 마커를 표시할 위치와 title 객체 배열입니다
var positions = [
{
title: '<div>세종시점</div>',
latlng: '세종특별자치시 가름로 232 (어진동, 세종비지니스센터, 세종세무서)'
},
{
title: '<div>부산서면점</div>',
latlng: '부산 부산진구 서면로 1 (부전동)'
},
{
title: '<div>수원시청역점</div>',
latlng: '경기 수원시 권선구 효원로 지하 270 (권선동, 수원시청역)'
},
{
title: '<div>광화문점</div>',
latlng: '서울 종로구 사직로 102 (필운동, 신동아 블루아 광화문의 꿈)'
},
{
title: '<div>디지털단지역점</div>',
latlng: '서울 구로구 도림천로 477 (구로동, 구로디지털단지역)'
},
{
title: '<div>역삼점</div>',
latlng: '서울 강남구 강남대로 298'
}
];
// 마커 이미지의 이미지 주소입니다
var imageSrc = “http://t1.daumcdn.net/localimg/localimages/07/mapapidoc/markerStar.png”;
for (var i = 0; i < positions.length; i ++) {
geocoder.addressSearch(positions[i].latlng, function(result, status) {
// 정상적으로 검색이 완료됐으면
if (status === daum.maps.services.Status.OK) {
var coords1 = new daum.maps.LatLng(result[0].y, result[0].x);
// 마커 이미지의 이미지 크기 입니다
var imageSize = new daum.maps.Size(24, 35);
// 마커 이미지를 생성합니다
var markerImage = new daum.maps.MarkerImage(imageSrc, imageSize);
// 결과값으로 받은 위치를 마커로 표시합니다
var marker = new daum.maps.Marker({
map: map,
position: coords1,
image : markerImage // 마커 이미지
});
// 인포윈도우로 장소에 대한 설명을 표시합니다
var infowindow = new daum.maps.InfoWindow({
content: positions[i].title
});
// 마커에 mouseover 이벤트와 mouseout 이벤트를 등록합니다
// 이벤트 리스너로는 클로저를 만들어 등록합니다
// for문에서 클로저를 만들어 주지 않으면 마지막 마커에만 이벤트가 등록됩니다
daum.maps.event.addListener(marker, 'mouseover', makeOverListener(map, marker, infowindow));
daum.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();
};
}
위 내용을 적용하면 지도에 마커는 표시 되는데 인포윈도우가 표시가 안됩니다.
콘솔 메시지 확인하면
SCRIPT5007: 정의되지 않음 또는 null 참조인 ‘title’ 속성을 가져올 수 없습니다.
content: positions[i].title
이부분인데 원인을 알수 있을까요?