카카오맵 첫번째 커스텀오버레이만 먼저 보여지게 하고 싶습니다

처음엔 마커 첫번째에 있는 제제게스트하우스의 커스텀인포는 먼저 보여지고 나머지는 가려진 상태에서 클릭하면 클릭한 마커의 커스텀인포가 나오게 만들고 싶습니다 도와주세요 ㅠㅠㅠ

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
    });
}

displayMaker 함수에서 조건문을 추가해서 구현해주세요.
data.title === '제제게스트하우스' 인 경우
overlay.setMap(map); clickOVerlay=overlay; 을 선언하면 됩니다.

1개의 좋아요

감사합니다!! 덕분에 해결 했습니다!!!