닫기가 가능한 커스텀 오버레이 (특정 마크만 표시되는 문제)

카카오맵 API (지도/로컬)
1

지도/로컬 API에 대한 문의게시판입니다.

제가 참고한 예제는 다음과 같습니다.
(http://apis.map.daum.net/web/sample/removableCustomOverlay/)

저는 여러개의 마커를 만든 후 여러개 마커 모두 '닫기가 가능한 커스텀 오버레이’로 만들고 싶습니다.
충분히 많이 고민을 해보았고, 많은 시도를 해보았습니다.
제 지식선에서 할 수 있는 시도는 다 해본 것같아 마지막 지푸라기 심정으로 글을 남겨봅니다.

현재에러
"어떤 마크를 클릭해도 특정 마크만 오버레이 됩니다."
map: map 코드를 할 경우에는 모든 마크가 정상적으로 뜹니다.

49

그러나, 기본값을 닫기로 하고 싶어서 null로 변경할 경우,
특정 오버레이만 됩니다.
해당 예제 웹사이트는 다음과 같습니다.
(http://220.67.127.177/0521_kakao.php)
저의 코드가 실행되는 페이지입니다.

어떻게 코드를 수정해야 하는지 도저히 모르겠습니다.

코드는 다음과 같습니다.

var positions_1 = [];
var positions_2 = [];

<?php
$con = mysqli_connect($db_host,$db_user,$db_passwd,$db_name);

mysqli_set_charset($con, "utf8");

$result = mysqli_query($con, "select * from StoreTable");

$n = 1;
while($row = mysqli_fetch_array($result)){
  $lat = $row['lat'];
  $lon = $row['lon'];
  $name = $row['name'];
  $add = $row['add'];
  ?>
  positions_2.push({ latlng: new daum.maps.LatLng(<?= $lat; ?>, <?= $lon; ?>)});
  <?
$n++;
}
?>

// 마커 이미지의 이미지 주소입니다
var imageSrc = "http://hufs4tmi.dothome.co.kr//image/NEW_markerS.png";

for (var i = 0; i < positions_2.length; i ++) {

  <?
  $con = mysqli_connect($db_host,$db_user,$db_passwd,$db_name);

  mysqli_set_charset($con, "utf8");

  $result = mysqli_query($con, "select * from StoreTable");

  $m = 1;
    while($row = mysqli_fetch_array($result)){
      ?>
      positions_1.push({ content:
        '<div class="wrap">' +
                '    <div class="info">' +
                '        <div class="title">' +
                '            <?= $name; ?>' +
                '            <div class="close" onclick="closeOverlay()" title="닫기"></div>' +
                '        </div>' +
                '        <div class="body">' +
                '            <div class="img">' +
                '                <img src="http://hufs4tmi.dothome.co.kr//image/yongin.png" width="73" height="70">' +
                '           </div>' +
                '            <div class="desc">' +
                '                <div class="jibun ellipsis"><?= $add; ?></div>' +
                '                <div><a href="http://220.67.127.177/TMI/Yongin_market_sub.php" target="_blank" class="link">상세페이지</a></div>' +
                '            </div>' +
                '        </div>' +
                '    </div>' +
                '</div>'

      });
      <?
    $m++;
    }
    ?>

    // 마커 이미지의 이미지 크기 입니다
    var imageSize = new daum.maps.Size(24, 35);

    // 마커 이미지를 생성합니다
    var markerImage = new daum.maps.MarkerImage(imageSrc, imageSize);

    // 마커를 생성합니다
    var marker = new daum.maps.Marker({
        map: map, // 마커를 표시할 지도
        position: positions_2[i].latlng, // 마커의 위치
        image : markerImage // 마커 이미지
    });

    var overlay = new daum.maps.CustomOverlay({
    content: positions_1[i].content,
    map: map,
    position: marker.getPosition()
});

// 마커를 클릭했을 때 커스텀 오버레이를 표시합니다
daum.maps.event.addListener(marker, 'click', function() {
    overlay.setMap(map);
});

// 커스텀 오버레이를 닫기 위해 호출되는 함수입니다
function closeOverlay() {
    overlay.setMap(null);
}

}
2

추가합니다.

(http://220.67.127.177/0521_ver3.php)
위 페이지를 참고해주세요.

이번에는 클릭은 원하는 것이 클릭되는데 닫기는 특정 하나의 마크가 보이고 닫아지고 합니다.
정말 미칠거같습니다.
여러분들의 도움이 필요합니다.

for (var i = 0; i < positions_2.length; i ++) {

// 마커 이미지의 이미지 크기 입니다
var imageSize = new daum.maps.Size(24, 35);

// 마커 이미지를 생성합니다
var markerImage = new daum.maps.MarkerImage(imageSrc, imageSize);

// 마커를 생성합니다
var marker = new daum.maps.Marker({
    map: map, // 마커를 표시할 지도
    position: positions_2[i].latlng, // 마커의 위치
    image : markerImage // 마커 이미지
});

// 마커에 표시할 인포윈도우를 생성합니다
var infowindow = new daum.maps.InfoWindow({
    content: positions_1[i].content // 인포윈도우에 표시할 내용
});

var overlay = new daum.maps.CustomOverlay({
    content: positions_1[i].content,
    map:null,
    position: positions_2[i].latlng
});

// 마커에 이벤트를 등록하는 함수 만들고 즉시 호출하여 클로저를 만듭니다
// 클로저를 만들어 주지 않으면 마지막 마커에만 이벤트가 등록됩니다
(function(marker, infowindow) {
    // 마커에 mouseover 이벤트를 등록하고 마우스 오버 시 인포윈도우를 표시합니다
    daum.maps.event.addListener(marker, 'mouseover', function() {
        infowindow.open(map, marker);
    });

    // 마커에 mouseout 이벤트를 등록하고 마우스 아웃 시 인포윈도우를 닫습니다
    daum.maps.event.addListener(marker, 'mouseout', function() {
        infowindow.close();
    });

    daum.maps.event.addListener(marker, 'click', function() {
        overlay.setMap(map);
    });
})(marker, infowindow);

(function(marker, overlay) {
    daum.maps.event.addListener(marker, 'click', function() {
        overlay.setMap(map);
    });
})(marker, overlay);
}


// 커스텀 오버레이를 닫기 위해 호출되는 함수입니다
function closeOverlay() {
    overlay.setMap(null);
}
3

그렇게하면 각 마커 클릭 시 setMap(map) 할때의 overlay 랑
x 버튼으로 setMap(null) 할 떄의 overlay 가 다른 걸 바라보지 않나요?
(null 시에 바라보는 overlay 는 가장 마지막으로 추가한 overlay)

아래 글을 참고해보시면 도움이 될 듯합니다.