처음엔 마커 첫번째에 있는 제제게스트하우스의 커스텀인포는 먼저 보여지고 나머지는 가려진 상태에서 클릭하면 클릭한 마커의 커스텀인포가 나오게 만들고 싶습니다 도와주세요 ㅠㅠㅠ
var mapContainer = document.getElementById('map'), // 지도의 중심좌표
mapOption = {
center: new kakao.maps.LatLng(35.8177293,127.1499602), // 지도의 중심좌표
level: 3 // 지도의 확대 레벨
};
var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
var clickedOverlay = null;
var positions = [
{
title: '제제게스트하우스',
latlng: new kakao.maps.LatLng(35.817754, 127.149434)
},
{
title: '제제의 미학',
latlng: new kakao.maps.LatLng(35.817661, 127.149137)
},
{
title: '주차장',
latlng: new kakao.maps.LatLng(35.817789, 127.148945)
},
];
for(let i=0; i < positions.length; i++){
var data = positions[i];
displayMarker(data);
}
// 지도에 마커를 표시하는 함수입니다
function displayMarker(data) {
var marker = new kakao.maps.Marker({
map: map,
position: data.latlng
});
var overlay = new kakao.maps.CustomOverlay({
yAnchor: 3,
position: marker.getPosition()
});
var content = document.createElement('div');
content.innerHTML = data.title;
content.style.cssText = 'background: white; border: 1px solid black; width:150px; text-align:center; font-size:14px';
// var closeBtn = document.createElement('button');
// closeBtn.innerHTML = '닫기';
// closeBtn.onclick = function () {
// overlay.setMap(null);
// };
// content.appendChild(closeBtn);
overlay.setContent(content);
kakao.maps.event.addListener(marker, 'click', function() {
if(clickedOverlay){
clickedOverlay.setMap(null);
}
overlay.setMap(map)
clickedOverlay = overlay
});
}