<ul class="fran-list">
    <?php for ($i=0; $i < 3; $i++) { ?>
    <li>
        <a href="#" class="link"></a>
        <strong>충북1급자동차공업사</strong>
        <span class="add">충북 청주시 흥덕구 송절로 37</span>
        <span class="tel">00-000-0000</span>
    </li>
    <?php } ?>
</ul>
<div id="map"></div>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=<?=$config_daum_map_key?>"></script>

#map {width:100%;height:650px;}
.wrap {position: relative;z-index: 77;}
.wrap .marker {border: 0px;padding: 0;background: none;margin: 0 auto;display: block;}
.wrap .info {display: none;width: 280px;height: 130px;border-radius: 10px;padding: 17px 20px;border: 1px solid #ddd;background: #fff;position: absolute;bottom: 57px;left: 50%;transform: translateX(-50%);box-shadow: 0 0 15px rgba(0,0,0,0.2);box-sizing: border-box;}
.wrap .info:after {display: block;content: '';width: 18px;height: 14px;position: absolute;top: 100%;left: 50%;transform: translateX(-50%);background: url('../images/main/overlay-box-arrow.png') no-repeat 50% 50%;background-size: contain;}
.layOn {z-index: 78 !important;}
.layOn > .wrap .info {display: block;}
.info .close {position: absolute;top: 5px;right: 5px;font-size: 22px;color: #444;width: 30px;height: 30px;line-height: 30px;text-align: center;}
.info .close:hover {cursor: pointer;}
.info .tit {display: block;margin-bottom: 10px;font-size: 18px;color: #333333;font-weight: 700;letter-spacing: -0.05em;line-height: 30px;}
.info .add,
.info .tel {display: block;font-size: 15px;color: #666666;line-height: 26px;letter-spacing: -0.05em;padding-left: 22px;position: relative;background-repeat: no-repeat;background-position: 0 3px;}
.info .add:before,
.info .tel:before {display: block;font-family: 'axicon';font-size: 16px;color: #2f880e;position: absolute;top: 0;left: 0;}
.info .add:before {content: '\e779';}
.info .tel:before {content: '\e77d';}
.fran-list li {position: relative;z-index: 0;}
.fran-list li .link {position: absolute;top: 0;bottom: 0;left: 0;right: 0;z-index: 11;}

var mapContainer = document.getElementById('map'), // 지도의 중심좌표
    mapOption = {
        center: new kakao.maps.LatLng(37.481510, 126.881393), // 지도의 중심좌표
        level: 11 // 지도의 확대 레벨
    };
var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
var markerImg = '/images/main/icon-marker.png';
// 마커를 표시할 위치와 title 객체 배열입니다
var positions = [
    {
        title: '충북1급자동차공업사',
        add : '충북 청주시 흥덕구 송절로 37',
        tel : '043-263-4002',
        latlng: new kakao.maps.LatLng(37.481510, 126.881393),
        pos : [37.481510, 126.881393]
    },
    {
        title: '충북1급자동차공업사2',
        add : '충북 청주시 흥덕구 송절로 37',
        tel : '02-523-2020',
        latlng: new kakao.maps.LatLng(37.841510, 126.881393),
        pos : [37.841510, 126.881393]
    },
    {
        title: '충북1급자동차공업사3',
        add : '충북 청주시 흥덕구 송절로 37',
        tel : '02-523-2020',
        latlng: new kakao.maps.LatLng(37.481510, 126.818393),
        pos : [37.481510, 126.818393]
    },
];
for (var i = 0; i < positions.length; i ++) {
    // 커스텀 오버레이에 표시할 컨텐츠 입니다
    // 커스텀 오버레이는 아래와 같이 사용자가 자유롭게 컨텐츠를 구성하고 이벤트를 제어할 수 있기 때문에
    // 별도의 이벤트 메소드를 제공하지 않습니다
    var overlay = [];
    var content = '<div class="wrap lay'+i+'" data-num="'+i+'">' +
                '    <button type="button" class="marker"><img src="'+ markerImg +'" alt=""></button>' +
                '    <div class="info">' +
                '        <div class="close" title="닫기"><i class="axi axi-close"></i></div>' +
                '        <strong class="tit">'+ positions[i].title +'</strong>' +
                '        <p class="add">'+ positions[i].add +'</p>' +
                '        <p class="tel">'+ positions[i].tel +'</p>' +
                '    </div>' +    
                '</div>';
    // 마커 위에 커스텀오버레이를 표시합니다
    // 마커를 중심으로 커스텀 오버레이를 표시하기위해 CSS를 이용해 위치를 설정했습니다
    overlay[i] = new kakao.maps.CustomOverlay({
        content: content,
        map: map,
        position: positions[i].latlng
    });
}


//open
function mapOpen(idxNum){
    $('.lay'+idxNum).parent('div').addClass('layOn')
        .siblings().removeClass('layOn');
}
//click on list
function panTo(){
    $('.fran-list .link').on({
        'click' : function(e){
            e.preventDefault();
            idxNum = $(this).parent('li').index();
            // 이동할 위도 경도 위치를 생성합니다
            var moveLatLon = positions[idxNum].latlng;
           
            // 지도 중심을 부드럽게 이동시킵니다
            // 만약 이동할 거리가 지도 화면보다 크면 부드러운 효과 없이 이동합니다
            map.panTo(moveLatLon);
            //open
            mapOpen(idxNum);
        }
    })
}
panTo();
//overlay close
function layClose(){
    $(document).on('click', '.wrap .info .close', function(){
        $(this).closest('.wrap').parent('div').removeClass('layOn');
    })
}
layClose();
//overlay open
function layOpen(){
    $('.wrap .marker').on({
        'click' : function(e){
            idxNum = $(this).closest('.wrap').parent('div').index();
            console.log(idxNum);
            // 이동할 위도 경도 위치를 생성합니다
            var moveLatLon = positions[idxNum].latlng;
           
            // 지도 중심을 부드럽게 이동시킵니다
            // 만약 이동할 거리가 지도 화면보다 크면 부드러운 효과 없이 이동합니다
            map.panTo(moveLatLon);
            //open
            mapOpen(idxNum);
        }
    })
}
layOpen();