다중 마커,인포윈도우 문의

// 마커를 표시할 위치와 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

이부분인데 원인을 알수 있을까요?

for문을 forEach로 바꾸는 작업을 해 주세요.

for문 안에서 스코프를 유지시키지 않고 쓰는 increment 값은(var i)
위험하며, 실수하기 쉬운 부분 중 하나입니다.

정확히는 콜백 안의 로직들이 이미 모든 증가를 끝낸 i 값을 바라보고 있기에 null 참조 오류가 나는 것입니다.
자바스크립트 코드는 동적으로 동작한다는 것과
콜백이 어느 시점에 실행되는지를 생각해 보면
왜 에러가 나는지 이해가 되실 겁니다.

감사합니다. 해결했습니다. ^^

1개의 좋아요