안녕하세요~ 선배님들~~

만년 좌충우돌  세네기 입니다~~

지도 게시판 사용하려고

선배님들이 만들어놓으신

다음지도 게시판 스킨 올려져있는들 참고하여 

https://sir.kr/g5_skin/25403?sfl=wr_subject%7C%7Cwr_content&stx=%EC%A7%80%EB%8F%84&page=2

일부 다른 게시판 스킨에 있는 것도 조금 짜집기하여~

다음지도 마커 클러스터러를 만들어보고 있는데

저장해놓은 내용을  list  게시판에  가져와서 지도에 뿌려주지 못하네요~

지도는 정상적으로 잘~ 나옵니다.

그러나 DB에 저장되어있는 지도내용 값은 불러오지 못합니다 ( 다른 지도 스킨 사용하면 잘~ 보입니다)

아는게 없다보니까  어떻게 수습해야 될지 막막하네요~ 초보의 길은 멀고 멀게만 느껴지네요~

http://apis.map.kakao.com/web/sample/addClustererClickEvent/

https://ygh6577.tistory.com/27#recentComments

내용도 참고해서 같이 적용해 보고있는데~ 출구가 안보이네요~ 

$.get("http://apis.map.daum.net/download/web/data/chicken.json", function(data)

부분도 어떻게 처리해야할지 막막하구요~~

선배님들~ 어떻게 해결해야 할지 조언 부탁드립니다~~

list.skin.php   윗쪽에서부터 지도 있는 부분까지 긁어서 올려봅니다~

(소스 내용이 많이 지저분합니다. 이해해주세요 ~.~ )

감사합니다~~~ [꾸벅]

<?php
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
unset($list);
include_once(G5_LIB_PATH.'/thumbnail.lib.php');
include_once($board_skin_path."/_arr.php"); // 여분필드 배열 담긴 파일

$sfl_t = "내용검색";
$sfl_v = "wr_content";

if($write[wr_8] == null){$write[wr_8] =  37.566400714093284;}
if($write[wr_9] == null){$write[wr_9] = 126.9785391897507;}
?>
<script>
// 데이터 처리하는 파일경로
var data_url = "<?php echo $board_skin_url; ?>/list_data.php";

// 데이터 처리하는 파일경로 (일괄삭제)
var delete_url = "<?php echo $board_skin_url; ?>/delete_data.php?bo_table=<?php echo $bo_table;?>";

// PDF 파일 경로
var board_skin_url = "<?php echo $board_skin_url; ?>";
</script>
<link rel="stylesheet" href="<?php echo $board_skin_url; ?>/jquery-ui-1.12.1/jquery-ui.css">
<script type="text/ecmascript" src="<?php echo $board_skin_url; ?>/jquery-ui-1.12.1/jquery-ui.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>    <!-- ★ 추가 ★-->
<link rel="stylesheet" href="<?php echo $board_skin_url; ?>/style.css">
<script>
jQuery(function($){
    $.datepicker.regional["ko"] = {
        closeText: "닫기",
        prevText: "이전달",
        nextText: "다음달",
        currentText: "오늘",
        monthNames: ["1월(JAN)","2월(FEB)","3월(MAR)","4월(APR)","5월(MAY)","6월(JUN)", "7월(JUL)","8월(AUG)","9월(SEP)","10월(OCT)","11월(NOV)","12월(DEC)"],
        monthNamesShort: ["1월","2월","3월","4월","5월","6월", "7월","8월","9월","10월","11월","12월"],
        dayNames: ["일","월","화","수","목","금","토"],
        dayNamesShort: ["일","월","화","수","목","금","토"],
        dayNamesMin: ["일","월","화","수","목","금","토"],
        weekHeader: "Wk",
        dateFormat: "yymmdd",
        firstDay: 0,
        isRTL: false,
        showMonthAfterYear: true,
        yearSuffix: ""
    };
    $.datepicker.setDefaults($.datepicker.regional["ko"]);
});

jQuery.browser = {};
(function () {
    jQuery.browser.msie = false;
    jQuery.browser.version = 0;
    if (navigator.userAgent.match(/MSIE ([0-9]+)\./)) {
        jQuery.browser.msie = true;
        jQuery.browser.version = RegExp.$1;
    }
})();

</script>
<link rel="stylesheet" type="text/css" media="screen" href="<?php echo $board_skin_url; ?>/grid/css/ui.jqgrid.css" />
<script type="text/ecmascript" src="<?php echo $board_skin_url; ?>/grid/js/i18n/grid.locale-kr.js"></script>
<script type="text/javascript">
    $.jgrid.no_legacy_api = true;
    $.jgrid.useJSON = true;
</script>
<script type="text/ecmascript" src="<?php echo $board_skin_url; ?>/grid/js/jquery.jqGrid.min.js"></script>
<script type="text/ecmascript" src="<?php echo $board_skin_url; ?>/list.js"></script>

<style>
.ui-jqgrid .ui-jqgrid-view { z-index:1; }
#list2_cb { width:34px !important; } /* 전체선택-해제 체크박스 TD 크기 (1픽셀 밀리거나 당겨지는 경우 수정 */
</style>

<!-- 다음지도 추가 -->
<div id="map" style="width:100%;height:350px;"></div>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은APP KEY입력했습니다&libraries=clusterer"></script>

<script>

    var map = new daum.maps.Map(document.getElementById('map'), { // 지도를 표시할 div
        center : new daum.maps.LatLng(37.566400714093284, 126.9785391897507), // 지도의 중심좌표
        level : 10 // 지도의 확대 레벨
    });

var map = new daum.maps.Map(mapContainer, mapOption); // 지도를 생성합니다

// 일반 지도와 스카이뷰로 지도 타입을 전환할 수 있는 지도타입 컨트롤을 생성합니다
var mapTypeControl = new daum.maps.MapTypeControl();

// 지도에 컨트롤을 추가해야 지도위에 표시됩니다
// daum.maps.ControlPosition은 컨트롤이 표시될 위치를 정의하는데 TOPRIGHT는 오른쪽 위를 의미합니다
map.addControl(mapTypeControl, daum.maps.ControlPosition.TOPRIGHT);

// 지도 확대 축소를 제어할 수 있는  줌 컨트롤을 생성합니다
var zoomControl = new daum.maps.ZoomControl();
map.addControl(zoomControl, daum.maps.ControlPosition.RIGHT);

    // 마커 클러스터러를 생성합니다
    // 마커 클러스터러를 생성할 때 disableClickZoom 값을 true로 지정하지 않은 경우
    // 클러스터 마커를 클릭했을 때 클러스터 객체가 포함하는 마커들이 모두 잘 보이도록 지도의 레벨과 영역을 변경합니다
    // 이 예제에서는 disableClickZoom 값을 true로 설정하여 기본 클릭 동작을 막고
    // 클러스터 마커를 클릭했을 때 클릭된 클러스터 마커의 위치를 기준으로 지도를 1레벨씩 확대합니다
    var clusterer = new daum.maps.MarkerClusterer({
        map: map, // 마커들을 클러스터로 관리하고 표시할 지도 객체
        averageCenter: true, // 클러스터에 포함된 마커들의 평균 위치를 클러스터 마커 위치로 설정
        minLevel: 10, // 클러스터 할 최소 지도 레벨
        disableClickZoom: true // 클러스터 마커를 클릭했을 때 지도가 확대되지 않도록 설정한다
    });

<?
$sql = " select * from {$write_table} order by wr_id asc ";
$result = sql_query($sql);
$cnt = 0;
while ($row = sql_fetch_array($result))
{ 
    if($row[wr_8] && $row[wr_9]) {
    ?>

        // 데이터에서 좌표 값을 가지고 마커를 표시합니다
        // 마커 클러스터러로 관리할 마커 객체는 생성할 때 지도 객체를 설정하지 않습니다
        var markers = $(data.positions).map(function(i, position) {
            return new daum.maps.Marker({
                position : new daum.maps.LatLng(<?=$row[wr_8]?>, <?=$row[wr_9]?>)
            });
        });

        // 클러스터러에 마커들을 추가합니다
        clusterer.addMarkers(markers);

    // 마커에 mouseover 이벤트와 mouseout 이벤트를 등록합니다
    // 이벤트 리스너로는 클로저를 만들어 등록합니다 
    // for문에서 클로저를 만들어 주지 않으면 마지막 마커에만 이벤트가 등록됩니다
    daum.maps.event.addListener(marker, 'mouseover', makeOverListener(map, marker, infowindow));
    daum.maps.event.addListener(marker, 'mouseout', makeOutListener(infowindow));    
        
    // 마커 클러스터러에 클릭이벤트를 등록합니다
    // 마커 클러스터러를 생성할 때 disableClickZoom을 true로 설정하지 않은 경우
    // 이벤트 헨들러로 cluster 객체가 넘어오지 않을 수도 있습니다
    daum.maps.event.addListener(clusterer, 'clusterclick', function(cluster) {

        // 현재 지도 레벨에서 1레벨 확대한 레벨
        var level = map.getLevel()-1;

        // 지도를 클릭된 클러스터의 마커의 위치를 기준으로 확대합니다
        map.setLevel(level, {anchor: cluster.getCenter()});
        
        window.open("./board.php?bo_table=<?=$bo_table?>&wr_id="+<?=$row[wr_id]?>);     // 새로운창에서 띄우기        
    });    
    
    
    
<?
    $cnt++;
}
}

?>

// 인포윈도우를 표시하는 클로저를 만드는 함수입니다 
function makeOverListener(map, marker, infowindow) {
    return function() {
        infowindow.open(map, marker);
    };
}

// 인포윈도우를 닫는 클로저를 만드는 함수입니다 
function makeOutListener(infowindow) {
    return function() {
        infowindow.close();
    };
}

</script>
<!-- //다음지도 추가 -->