여러개 마커를 띄우고 해당 마커를 클릭 했을 경우 커스텀 오버레이를 open 하려고 합니다.
addListener를 사용하여 클릭시 open 하도록 함수를 만들고
해당 닫기 버튼을 클릭하면 커스텀 오버레이가 닫히는 함수를 만들었는데
둘다 적용이 되지 않네요,
var map = new kakao.maps.Map(mapContainer, mapOption);
var positions = [
{
address:'충남 부여군 부여읍 석탑로 49 문광사서점',
regName: '문광사서점',
businessLineType:'서비스'
},
{
address:'충남 부여군 부여읍 성왕로 215 카페써니',
regName: '카페써니',
businessLineType:'기타'
},
{
address:'충남 부여군 부여읍 중앙로 10 추성희헤어스투디오',
regName: '추성희헤어스투디오',
businessLineType:'서비스'
}
,{
address:'충남 부여군 부여읍 중앙로 7 리헤어리더',
regName:'리헤어리더',
businessLineType:'서비스'
}
];
for (let i = 0; i < positions.length; i ++) {
// 주소-좌표 변환 객체를 생성합니다
var geocoder = new kakao.maps.services.Geocoder();
// 주소로 좌표를 검색합니다
geocoder.addressSearch(positions[i].address, function(result, status) {
// 정상적으로 검색이 완료됐으면
if (status === kakao.maps.services.Status.OK) {
var coords = new kakao.maps.LatLng(result[0].y, result[0].x);
// 결과값으로 받은 위치를 마커로 표시합니다
var marker = new kakao.maps.Marker({
map: map,
position: coords
});
var contents = '<div class="wrap">' +
' <div class="info">' +
' <div class="title">' + positions[i].regName+
' <div class="close" onclick="closeOverlay()" title="닫기"></div>' +
' </div>' +
' <div class="body">' +
' <div class="img">' +
' <img src="https://cfile181.uf.daum.net/image/250649365602043421936D" width="73" height="70">' +
' </div>' +
' <div class="desc">' +
' <div class="ellipsis">'+positions[i].regName+'</div>' +
' <div class="jibun ellipsis">'+positions[i].address+'</div>' +
' </div>' +
' </div>' +
' </div>' +
'</div>';
// 마커 위에 커스텀오버레이를 표시합니다
// 마커를 중심으로 커스텀 오버레이를 표시하기위해 CSS를 이용해 위치를 설정했습니다
var overlay = new kakao.maps.CustomOverlay({
content: contents,
map: map,
position:coords
});
// 마커를 클릭했을 때 커스텀 오버레이를 표시합니다
/*kakao.maps.event.addListener(marker, 'click', function() {
overlay.setMap(map);
});*/
kakao.maps.event.addListener(marker, 'click', openOverlay(map, marker, overlay));
}
});
}
// 커스텀 오버레이 열기
function openOverlay(map, marker, overlay){
overlay.setMap(map);
}
// 커스텀 오버레이를 닫기 위해 호출되는 함수입니다
function closeOverlay() {
overlay.setMap(null);
}