다음지도 api : 마우스오버시, 다른 info 창닫고, 해당 info창만 열기 > 소스코드

• 목록

<?php

// 사이트정보 가져오기
$sql = "select * from site_info order by si_code desc ";
$site_info = $dbcon_base->fetchAllAssociative($sql);

// 첫번째로 보여질 위치 잡기
foreach ($site_info as $key => $value) {
    if ($value["si_id"] == $si_info["si_id"]) {
        $first_key = $key;
    }
}
//echo $first_key;
?>


<style>
    .loc_title {
        width:200px;padding:10px 20px;
        text-align:center;font-size:20px;font-weight:bold;
    }

    .loc_cont {
        padding:10px;
        text-align:center;
    }
</style>

    <div class="box">
        <div id="map" style="width:100%;height:700px;"></div>

    <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=<?php echo $baseInfo["daum_api_key"];?>"></script>
    <script>
        var container = document.getElementById('map');
        var options = {
            center: new kakao.maps.LatLng(33.3829026935118, 126.54363266903036),
            level: 5
        };
        var map = new kakao.maps.Map(container, options);
        //===============================================================================
        // 마커를 표시할 위치와 내용을 가지고 있는 객체 배열입니다
        var positions = [

            <?php
            foreach ($site_info as $key => $value) {
                $info_center = "";

                $content = "<div class=\"loc_title\">" . $value["si_name"] . "</div>";
                $content .= "<div class=\"loc_cont\" style=\"\">";
                $content .= "<input type=button name=btn_link onclick=\"func_link(\'" . $value["si_id"] . "\');\" value=\"상세보기\" style=\"padding:2px 10px;\" />";
                $content .= "<input type=button name=btn_close onclick=\"func_allclose(\'\');\" value=\"닫기\" style=\"padding:2px 10px;\" />";
                $content .= "</div>";
                ?>
                {
                    title: "<?=$value["si_name"];?>",
                    content: '<?=$content;?>',
                    latlng: new kakao.maps.LatLng(<?=$value["si_y"];?> , <?=$value["si_x"];?>)
                },
            <?php } ?>
        ];

        // 마커에 표시할 인포윈도우를 생성합니다
        var infowindow = [];
        <?php foreach ($site_info as $key => $value) { ?>
            infowindow[<?=$key;?>] = new kakao.maps.InfoWindow({
                content: positions[<?=$key;?>].content // 인포윈도우에 표시할 내용
            });
        <?php } ?>

        // 마커 생성
        var imageSrc = "https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/markerStar.png";
        var imageSize = new kakao.maps.Size(24, 35);
        var markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize);

        for (var i = 0; i < positions.length; i ++) {
            // 마커를 생성합니다
            var marker = new kakao.maps.Marker({
                map: map, // 마커를 표시할 지도
                //image: markerImage,
                //title: positions[i].title,
                position: positions[i].latlng // 마커의 위치

            });

            if (i == <?=$first_key;?>) {       // 첫번째 보여질 인포윈도우
                marker_first = marker;
            }

            // 마커에 mouseover 이벤트와 mouseout 이벤트를 등록합니다
            // 이벤트 리스너로는 클로저를 만들어 등록합니다
            // for문에서 클로저를 만들어 주지 않으면 마지막 마커에만 이벤트가 등록됩니다
            kakao.maps.event.addListener(marker, 'mouseover', makeOverListener(map, marker, infowindow[i]));
            //kakao.maps.event.addListener(marker, 'mouseout', makeOutListener(infowindow));
        }

        infowindow[<?=$first_key;?>].open(map, marker_first);      // 첫번째 보여질 인포윈도우 보이기
        map.setCenter( positions[<?=$first_key;?>].latlng );       // 중심자표 이동하기


        function func_allclose() {
            <?php foreach ($site_info as $key => $value) { ?>
            infowindow[<?=$key;?>].close();
            <?php } ?>;
        }

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

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

        function func_link( choice_id ) {
            location.href="dashboard.php?ser_site=" + choice_id;
        }
        //===============================================================================
        //===============================================================================
        // 지도에 추가된 지도타입정보를 가지고 있을 변수입니다
        var currentTypeId;

        // 버튼이 클릭되면 호출되는 함수입니다
        function setOverlayMapTypeId(maptype) {
            var changeMaptype;

            // maptype에 따라 지도에 추가할 지도타입을 결정합니다
            if (maptype === 'roadmap') {
                changeMaptype = kakao.maps.MapTypeId.ROADMAP;

            } else if (maptype === 'skyview') {
                changeMaptype = kakao.maps.MapTypeId.SKYVIEW;

            } else if (maptype === 'hybrid') {
                changeMaptype = kakao.maps.MapTypeId.HYBRID;

            } else if (maptype === 'traffic') {

                // 교통정보 지도타입
                changeMaptype = kakao.maps.MapTypeId.TRAFFIC;

            } else if (maptype === 'roadview') {

                // 로드뷰 도로정보 지도타입
                changeMaptype = kakao.maps.MapTypeId.ROADVIEW;

            } else if (maptype === 'terrain') {

                // 지형정보 지도타입
                changeMaptype = kakao.maps.MapTypeId.TERRAIN;

            } else if (maptype === 'use_district') {

                // 지적편집도 지도타입
                changeMaptype = kakao.maps.MapTypeId.USE_DISTRICT;
            }

            // 이미 등록된 지도 타입이 있으면 제거합니다
            if (currentTypeId) {
                map.removeOverlayMapTypeId(currentTypeId);
            }

            // maptype에 해당하는 지도타입을 지도에 추가합니다
            map.addOverlayMapTypeId(changeMaptype);

            // 지도에 추가된 타입정보를 갱신합니다
            currentTypeId = changeMaptype;
        }
        //===============================================================================
    </script>