<!DOCTYPE html>
<html lang="en" xmlns:th=http://www.thymeleaf.org>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width,initial-scale=1"/>
    <meta name="theme-color" content="#000000"/>
    <meta name="description" content="포항시 교통정보센터입니다"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <title>포항시 교통정보센터</title>
    <th:block th:include="/include/head.html"></th:block>
    <script th:src="@{${@environment.getProperty('kakao-url')}}"></script>
    <link rel="stylesheet" th:href="@{/css/center.css}">
</head>
<body id="body">
<th:block th:include="/include/header.html"></th:block>
<div class="centerWrap">
    <div class="container way">
        <h2 class="header">오시는 길</h2>
        <div class="way-content">
            <div>
                <div id="map"></div>
            </div>
            <div>
                <h2>센터정보</h2>
                <p>
                    경상북도 포항시 남구 시청로 1<br>
                    (2층 포항시청 어린이집 맞은편)
                </p>
                <h2>버스노선 안내</h2>
                <p>
                    <a href="javascript:openBusSite(0)">포항시 버스정보시스템 <img src="/images/icon/direction.png"></a>
                </p>
            </div>
        </div>
    </div>
</div>
<th:block th:include="/include/footer.html"></th:block>
</body>
</html>

<script th:inline="javascript">
    const container = document.getElementById('map'); //지도를 담을 영역의 DOM 레퍼런스
    const position = new kakao.maps.LatLng(36.01899593392164, 129.34316182110044);
    const options = { //지도를 생성할 때 필요한 기본 옵션
        // center: new kakao.maps.LatLng(36.0191816, 129.3432983), //지도의 중심좌표.
        center: position, //지도의 중심좌표.
        level: 2,
        maxLevel: 9,
        minLevel: 1,
        disableDoubleClickZoom: true
    };
    _Map = new kakao.maps.Map(container, options);
    _Map.setCursor('default');
    const marker = new kakao.maps.Marker({
        position : position,
        title : '포항시청 - 버스노선 안내 바로가기',
        cursor : 'pointer',
    })

    marker.setMap(_Map);

    new kakao.maps.event.addListener(marker, 'click', function() {
        openBusSite(0);
    });

    const infoWindow = new kakao.maps.InfoWindow({
        position : position,
        content : '<div onclick="openBusSite(0)" title="포항시청 - 버스노선 안내 바로가기" style="cursor:pointer; display: flex; align-items: center; justify-content: center; width: 220px;">경상북도 포항시 남구 시청로 1</div>',
    })

    infoWindow.open(_Map, marker);
</script>