if ($("#range").val() == “종로”) {
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng(37.57366022871447, 126.97417536971453), // 지도의 중심좌표
level: 3 // 지도의 확대 레벨
};
var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
// 마커 이미지의 이미지 주소입니다
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 data = [
[37.57366022871447, 126.97417536971453, '<div style="padding:3px;">미트러스 <br><a href="https://map.naver.com/v5/entry/place/37611389?c=14134693.5474278,4519373.8385667,16,0,0,0,dh&placePath=%2Fhome%3Fentry=pll" >정보</a></div>'],
[37.57332696962825, 126.9730787981214, '<div style="padding:3px;">형제네고기마을<br> <a href="https://map.naver.com/v5/search/%EC%A2%85%EB%A1%9C%20%ED%98%95%EC%A0%9C%EB%84%A4%EA%B3%A0%EA%B8%B0%EB%A7%88%EC%9D%84/place/31390893?c=14134433.1053673,4519343.4775110,16,0,0,0,dh" >정보</a></div>'], //맞춰 주는건 굵은 글씨
[37.57844158822745, 126.98222879812157, '<div style="padding:3px;">닭칼 <br><a href="https://map.naver.com/v5/search/%EC%A2%85%EB%A1%9C%20%EB%8B%AD%EC%B9%BC/place/1644588906?c=14135476.9485348,4520081.5725654,16,0,0,0,dh&placePath=%3F%2526" >정보</a></div>']
]
for (var i = 0; i < data.length; i++) { // 마커를 생성합니다
var marker = new kakao.maps.Marker({
map: map, // 마커를 표시할 지도
position: new kakao.maps.LatLng(data[i][0], data[i][1]), // 마커를 표시할 위치
title: data[i][2], // 마커의 타이틀, 마커에 마우스를 올리면 타이틀이 표시됩니다
image: markerImage // 마커 이미지
});
// 마커를 클릭했을 때 마커 위에 표시할 인포윈도우를 생성합니다
var iwContent = data[i][2],
iwRemoveable = true; // removeable 속성을 ture 로 설정하면 인포윈도우를 닫을 수 있는 x버튼이 표시됩니다
// 인포윈도우를 생성합니다
var infowindow = new kakao.maps.InfoWindow({
content: iwContent,
removable: iwRemoveable
});
// 마커에 클릭이벤트를 등록합니다
kakao.maps.event.addListener(marker, 'click', function () {
// 마커 위에 인포윈도우를 표시합니다
infowindow.open(map, marker);
});
}
}
여러개의 마커를 띄운 뒤, 이들을 클릭했을 때 각각 인포윈도우가 열리도록 하는 것을 구현 중인데요, 반복문을 이용해 각 마커들의 위치와 타이틀을 띄우는 것은 구현했는데, 각 마커에 클릭이벤트를 적용하는 것이 문제가 됩니다. markers 라는 배열을 만들어 markers.push(marker); 이용하면 될 것 같기도 한데 계속 실패하네요ㅜ 답변 해주시면 감사하겠습니다.