for (var i = 0; i < positions.length; i ++) {
// 마커 이미지의 이미지 주소입니다
if(positions[i].category == ‘관광지’) var imageSrc = “https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/markerStar.png”;
else if(positions[i].category == ‘숙박시설’) var imageSrc = “https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/markerStar.png”;
else var imageSrc = “https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/markerStar.png”;
// 마커 이미지의 이미지 크기 입니다
var imageSize = new kakao.maps.Size(24, 35);
// 마커 이미지를 생성합니다
var markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize);
// 마커를 생성합니다
var marker = new kakao.maps.Marker({
map: map, // 마커를 표시할 지도
position: positions[i].latlng, // 마커를 표시할 위치
title : positions[i].title, // 마커의 타이틀, 마커에 마우스를 올리면 타이틀이 표시됩니다
image : markerImage, // 마커 이미지
clickable: true // 마커를 클릭했을 때 지도의 클릭 이벤트가 발생하지 않도록 설정합니다
});
markers.push(marker);
var content = '<div class="wrap">' +
' <div class="info">' +
' <div class="title">' + positions[i].title +
' <div class="close" onclick="closeOverlay()" title="닫기"></div>' +
' </div>' +
' <div class="body">' +
' <div class="img">' +
' <img src="image/contents/hyattseoul1.PNG" width="73" height="70">' +
' </div>' +
' <div class="desc">' +
' <div class="ellipsis">' + positions[i].address + '</div>' +
' </div>' +
' </div>' +
' </div>' +
' </div>';
contents.push(content);
}
// 마커 위에 커스텀오버레이를 표시합니다
// 마커를 중심으로 커스텀 오버레이를 표시하기위해 CSS를 이용해 위치를 설정했습니다
for (var i = 0; i < positions.length; i++) {
var overlay = new kakao.maps.CustomOverlay({
content: contents[i],
map: map,
position: markers[i].getPosition()
});
overlays.push(overlay);
}
// 마커를 클릭했을 때 커스텀 오버레이를 표시합니다
for (var i = 0; i < positions.length; i++) {
kakao.maps.event.addListener(markers[i], 'click', function() {
overlays[i].setMap(map);
});
}
// 커스텀 오버레이를 닫기 위해 호출되는 함수입니다
function closeOverlay() {
for (var i = 0; i < positions.length; i++) {
overlays[i].setMap(null);
}
}
마커에 클릭 이벤트를 주고 클릭했을때만 오버레이를 띄우고싶은데 페이지 실행하자마자 오버레이가 떠있습니다.
오버레이를 끄고 다시 마커를 클릭하면
Cannot read property ‘setMap’ of undefine setMap 요소를 읽을 수 없다고 나오는데…
찾아보니까 클로저를 만들어야된다고 하는데 클로저를 어떻게 만들어야되는지 감이 안잡힙니다ㅜㅜ