펄스나인님 다중마커 지도 스킨 질문입니다.

</p>

<p><?php

if (!defined('_GNUBOARD_')) exit;

include_once(G5_LIB_PATH.'/thumbnail.lib.php');

 

function get_board_sfl_select_options2($sfl){

    global $is_admin;

    $str = '';

 

    $str .= '<option value="wr_subject||wr_3||wr_4" '.get_selected($sfl, 'wr_subject||wr_3||wr_4').'>업체명+주소</option>';

    $str .= '<option value="wr_subject" '.get_selected($sfl, 'wr_subject', true).'>업체명</option>';

    $str .= '<option value="wr_3||wr_4" '.get_selected($sfl, 'wr_3||wr_4').'>주소</option>';

    $str .= '<option value="wr_2" '.get_selected($sfl, 'wr_2', true).'>대표전화</option>';

   

    return run_replace('get_board_sfl_select_options2', $str, $sfl);

}

 

$colspan = 5;

 

if ($is_checkbox) $colspan++;

if ($is_good) $colspan++;

if ($is_nogood) $colspan++;

 

add_stylesheet('<link rel="stylesheet" href="'.$board_skin_url.'/style.css">', 0);</p>

<p> 

$lat = 36.556400714093284; // 초기 및 리셋 중심좌표

$lng = 126.9785391897507; // 초기 및 리셋 중심좌표

?></p>

<p> 

<!-- 게시판 목록 시작 { -->

<div id="bo_list">

 

    <div id="map" data-aos="fade-up" data-aos-delay="0" data-aos-offset="0"></div>

 

    <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=<?php echo $board['bo_1'] ?>&libraries=services"></script>

    <!-- } -->

 

    <script>

        var mapContainer = document.getElementById('map'), // 지도를 표시할 div

        mapOption = {

            center: new kakao.maps.LatLng(<?php echo $lat ?: '36.556400'; ?>, <?php echo $lng ?: '126.978539'; ?>), // 지도의 중심좌표 (기본값 추가)

            level: 13 // 지도 초기 확대레벨

        };

 

        var map = new kakao.maps.Map(mapContainer, mapOption);

        

        // 마커와 오버레이를 저장할 배열

        var markers = [];

        var overlays = [];</p>

<p>        <?php

        $gu = htmlspecialchars(str_replace("/", "", $_GET['gubun']), ENT_QUOTES, 'UTF-8'); // XSS 방지

     

        if ($_GET['gubun'] == "") {

            $sql = "SELECT * FROM g5_write_" . $bo_table . " ORDER BY wr_id ASC";

        } else {

            $sql = "SELECT * FROM g5_write_" . $bo_table . " WHERE ca_name='" . $gu . "' ORDER BY wr_id ASC";

        }

     

        $result = sql_query($sql);

        $cnt = 0;

        $marker_data = array(); // 마커 데이터를 저장할 배열

        

        while ($row = sql_fetch_array($result)) {

            if ($row['wr_5'] && $row['wr_6']) {

                $thumb = get_list_thumbnail($board['bo_table'], $row['wr_id'], $board['bo_gallery_width'], $board['bo_gallery_height'], false, true);

                $img_content = $thumb['src'] ?: '';

                

                // 마커 이미지 결정

                $marker_img = 'markerStar6.png'; // 기본값

                if (in_array($row['wr_1'], ['markerStar1', 'markerStar2', 'markerStar3', 'markerStar4', 'markerStar5'])) {

                    $marker_img = $row['wr_1'] . '.png';

                }

                

                // 마커 데이터 배열에 추가

                $marker_data[] = array(

                    'id' => $row['wr_id'],

                    'lat' => $row['wr_5'],

                    'lng' => $row['wr_6'],

                    'image' => $marker_img,

                    'subject' => addslashes($row['wr_subject']),

                    'addr1' => addslashes($row['wr_3']),

                    'addr2' => addslashes($row['wr_4']),

                    'phone' => addslashes($row['wr_2']),

                    'link' => addslashes($row['wr_link1'])

                );

                $cnt++;

            }

        }

        ?>

        

        // 마커 데이터를 JavaScript로 전달

        var markerData = <?php echo json_encode($marker_data, JSON_UNESCAPED_UNICODE); ?>;

        

        // 오버레이 닫기 함수

        function closeOverlay(index) {

            if (overlays[index]) {

                overlays[index].setMap(null);

            }

        }

        

        // 마커 클릭 핸들러 함수

        function createMarkerClickHandler(markerIndex) {

            return function() {

                // 다른 오버레이들 닫기

                overlays.forEach(function(ov) {

                    ov.setMap(null);

                });

                // 현재 오버레이 표시

                overlays[markerIndex].setMap(map);

            };

        }

        

        // 마커 생성 함수

        function createMarkers() {

            markerData.forEach(function(data, index) {

                // 마커 이미지 설정

                var imageSrc = '<?php echo $board_skin_url ?>/img/' + data.image;

                var imageSize = new kakao.maps.Size(24, 35);

                var imageOption = { offset: new kakao.maps.Point(12, 35) };

                

                // 마커 이미지 생성

                var markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize, imageOption);

                var markerPosition = new kakao.maps.LatLng(data.lat, data.lng);

                

                // 마커 생성

                var marker = new kakao.maps.Marker({

                    position: markerPosition,

                    image: markerImage,

                    clickable: true

                });

                

                // 마커를 지도에 표시

                marker.setMap(map);

                

                // 커스텀 오버레이 컨텐츠 생성

                var content = '<div class="wrap">' +

                    '<div class="info">' +

                        '<div class="body">' +

                            '<div class="desc" style="margin-left:10px;">' +

                                '<img src="<?php echo $board_skin_url ?>/img/close_black_24dp.svg" class="close" onclick="closeOverlay(' + index + ')" title="닫기">' +

                                '<div class="titles cut80"><a href="<?php echo G5_BBS_URL ?>/board.php?bo_table=<?php echo $bo_table ?>&wr_id=' + data.id + '">' + data.subject + '</a></div>' +

                                '<div class="sub1 cut90">' + data.addr1 + ' ' + data.addr2 + '</div>';

                

                if (data.phone) {

                    content += '<div class="sub3 cut90"><a href="tel:' + data.phone + '">' + data.phone + '</a></div>';

                } else if (data.link) {

                    content += '<div class="sub2 cut90"><a href="' + data.link + '" target="_blank">' + data.link + '</a></div>';

                }

                

                content += '</div></div></div></div>';

                

                // 커스텀 오버레이 생성

                var overlay = new kakao.maps.CustomOverlay({

                    content: content,

                    map: null,

                    position: markerPosition,

                    yAnchor: 1

                });

                

                // 배열에 저장

                markers.push(marker);

                overlays.push(overlay);

                

                // 마커 클릭 이벤트 등록

                kakao.maps.event.addListener(marker, 'click', createMarkerClickHandler(index));

            });

        }

        

        // 마커 생성 실행

        createMarkers();

        

    </script>

</div></p>

<p>