its-web-server/src/main/webapp/WEB-INF/jsp/egovframework/traffic/realtime.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<style>
    .mapPop.traffic_LTC0,
    .mapPop.traffic_LTC2,
    .mapPop.traffic_LTC3,
    .mapPop.traffic_LTC1 {
        position: absolute;top:170px;left:351px;z-index:999;
    }
    @media(max-width: 1300px){
        .mapPop.traffic_LTC0,
        .mapPop.traffic_LTC2,
        .mapPop.traffic_LTC3,
        .mapPop.traffic_LTC1{
            top:240px;
        }
    }

    @media (max-width:992px) {
        .mapPop.traffic_LTC0,
        .mapPop.traffic_LTC2,
        .mapPop.traffic_LTC3,
        .mapPop.traffic_LTC1 {
            top:195px;
        }
    }

    @media (max-width: 768px) {
        .mapPop.traffic_LTC0,
        .mapPop.traffic_LTC2,
        .mapPop.traffic_LTC3,
        .mapPop.traffic_LTC1 {
            top:245px; left:0;
        }
    }
</style>

<!--contents-->
<section class="main-container">
    <!-- 좌측목록 지도 영역 -->
    <article class="left-Area traffic">
        <ul class="sub-Tab">
            <li class="on"><a href="/traffic/realtime.do">소통정보</a></li>
            <li><a href="/traffic/incd.do">돌발정보</a></li>
            <li><a href="/traffic/cctv.do">CCTV</a></li>
            <li><a href="/traffic/vms.do">VMS</a></li>
        </ul>
        <div class="left-list">
            <div class="road-list">
                <button class="list-button" type="button" id="show" onclick="dis()">
                    도로목록
                </button>
                <ul class="dis">
                    <c:forEach var="item" items="${atrdNmList }">
                        <li><a href="javascript:atrdTrfInfo('${item.atrd_id }','${item.atrd_nm }')" title="${item.atrd_nm }">${item.atrd_nm }</a></li>
                    </c:forEach>
                </ul>
            </div>
            <div class="traffic-list-select">
                <select id="atrdList" onchange="if(this.value) location.href=(this.value);">
                    <option value="">도로목록</option>
                    <c:forEach var="item" items="${atrdNmList }">
                        <option value="javascript:atrdTrfInfo('${item.atrd_id }','${item.atrd_nm }')">${item.atrd_nm }</option>
                    </c:forEach>
                </select>
                <label for="atrdList"></label>
            </div>

        </div>
    </article>
    <!-- // 좌측목록 지도 영역 -->
    <!-- 서브 지도 영역 -->
    <div id="trafficInfo"></div>
    <img alt="loading" src="/images/ajax_loading.gif" id="loading" style="display:none;position:absolute;left:50%;top:40%;z-index:10"/>
    <div class="mapArea atrd">
        <article class="searchBox">
            <div class="searchBox-cont">
                <div class="upload">
                    <span>평균속도 : 0 km</span>
                    <span>거리 : 0 m</span>
                </div>
                <div class="dnload">
                    <span>평균속도 : 0 km</span>
                    <span>거리 : 0 m</span>
                </div>
            </div>
            <div class="stmaptab">
                <a href="javascript:typeOfMap()" title="소통정보 지도에서 보기" class="bt map on mapBtn">지도</a>
                <a href="javascript:typeOfLetters()" title="소통정보 문자로 보기" class="bt roadList textBtn">문자</a>
            </div>
        </article>
        <div class="mapContent traffic map">
            <div id="map" class="atrd-map"></div>
        </div>
        <div class="mapContent traffic mapRoadList" style="display: none;">
            <div class="road_info-box sub-road_info">
                <ul class="traffic-road-list " id="mapOfLetters">
                </ul>
            </div>
        </div>
    </div>
	<img class="legend-img" alt="소통등급" src="/common/images/trafficStatus.png">
    <!-- // 서브 지도 영역 -->
</section>

<!--//contents-->

<%--<%@ include file="/WEB-INF/jsp/egovframework/include/daumApiKey.jsp" %>--%>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=${key}"></script>
<script src="/js/main.js?v=20250526" type="text/javascript"></script>
<script src="/js/common.js?v=20250526" type="text/javascript"></script>
<script src="/js/traffic.js?v=20250526" type="text/javascript"></script>
<script type="text/javascript">
    _TrafficFlag = false;
    setInterval(getVertexArr, 1000 * 60 * 5);
    getVertexArr();
    //간선도로를 선택하면 줌 레벨에 상,하향 색상을 바꿔준다..
    daum.maps.event.addListener(_Map, 'zoom_changed', function() {
        if(_AtrdId != null) showAtrdTrfInfo();
    });
    sideInfoList = true;

    $(".textBtn").on('click',function (){
        $(".textBtn").addClass("on");
        $(".mapBtn").removeClass("on");
    })
    $(".mapBtn").on('click',function (){
        $(".mapBtn").addClass("on");
        $(".textBtn").removeClass("on");
    })
</script>

</script>