// 마커 클러스터러를 생성합니다
var clusterer = new kakao.maps.MarkerClusterer({
map: map, // 마커들을 클러스터로 관리하고 표시할 지도 객체
averageCenter: true, // 클러스터에 포함된 마커들의 평균 위치를 클러스터 마커 위치로 설정
minLevel: 7 // 클러스터 할 최소 지도 레벨
});
// 데이터를 가져오기 위해 jQuery를 사용합니다
// 데이터를 가져와 마커를 생성하고 클러스터러 객체에 넘겨줍니다
$.get("db.json", function(data) {
// 데이터에서 좌표 값을 가지고 마커를 표시합니다
// 마커 클러스터러로 관리할 마커 객체는 생성할 때 지도 객체를 설정하지 않습니다
var markers = $(data.info).map(function(i, position) {
return new kakao.maps.Marker({
position : new kakao.maps.LatLng(position.latitude, position.longitude),
clickable: true
});
});
//마커 생성
clusterer.addMarkers(markers);
//커스텀 오버레이 생성
var overlay = $(data.info).map(function(i,position){
return new kakao.maps.CustomOverlay({
position : new kakao.maps.LatLng(position.latitude, position.longitude),
map: map,
clickable: true,
content:
'<div class="wrap">' +
' <div class="info">' +
' <div class="title">' +position.name+
' <div class="close" onclick="" title="닫기"></div>'+
' </div>' +
' <div class="body">' +
' <div class="desc">' +
' <div class="jibun ellipsis">' +position.tel+ '</div>' +
' </div>' +
' </div>' +
'</div>'
});
});
이런식으로 생성한 커스텀 오버레이를 각각의 마커를 클릭하면 띄우려고 하는데
for(var i=0; i<markers.length; i++){
kakao.maps.event.addListener(markers[i],'click',function(){
overlay[i].setMap(map);
});
}
이런식으로 클릭 이벤트를 만들어 마커를 클릭하면 커스텀오버레이는 뜨지않고 Cannot read property ‘setMap’ of undefined 에러가 뜨고
kakao.maps.event.addListener(markers[0],‘click’,function(){
overlay[0].setMap(map);
});
이런식으로 일일이 인덱스를 넣어줘서 이벤트를 만들면 커스텀오버레이가 제대로 뜨는데 1.그 이유가 무엇인지 알고싶습니다. 그리고 2.일일이 함수를 적어나갈 수는 없으니 for 사용해서 가능하게끔 할 수는 없는지 해결 방법좀 알고 싶습니다!