thymeleaf로 카카오맵 연동

jsp/jstl에 이어 thymeleaf로도 카카오맵 연동해봤다.
출력할 정보가 db에 없기에 ctrl & front에서만 작성하면 된다.

Ctrl

	@GetMapping("/offlineStore")
	public String offlineStore(Model model) {
		System.out.println("offlineStore");		

        model.addAttribute("appkey", "[key]");
        model.addAttribute("storeAddr", "서울 서초구 방배동 산 43-6");
        model.addAttribute("storeName", "밍키몰");
		
		return "common/offlineStore";
	}

html

<h1>매장정보</h1>
<div>오프라인 매장도 방문해보세요~</div>

<div style="width: 500px; display: flex; justify-content: flex-start; 
flex-wrap: wrap; flex-direction: column; align-items: left;">    
     <div class="form-group">
         <label>매장명:</label>
         <span th:utext="'<strong>'+${storeName}+'</strong>'"></span>

         <label>주소:</label>
         <span th:utext="'<strong>'+${storeAddr}+'</strong>'"></span>
     </div>	
</div>

<div id="map" style="width: 700px; height: 400px; border-radius: 10px; border: 1px solid #e7e7e7;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.24);"></div>

js

<!-- Thymeleaf에서 appkey와 storeAddr 값을 JavaScript로 전달 -->
<script th:inline="javascript">
	// Thymeleaf에서 모델 속성을 문자열로 전달
    var appkey = /*[[${appkey}]]*/ '[[${appkey}]]';
    var storeAddr = /*[[${storeAddr}]]*/ '[[${storeAddr}]]';
    var storeName = /*[[${storeName}]]*/ '[[${storeName}]]';
</script>

<!-- 카카오 지도 API 로드 -->
<script type="text/javascript" th:src="'//dapi.kakao.com/v2/maps/sdk.js?appkey='+${appkey}+'&libraries=services'"></script>

<script>
    var mapContainer = document.getElementById('map'), // 지도를 표시할 div 
        mapOption = {
            center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
            level: 8 // 지도의 확대 레벨
        };  

    // 지도를 생성합니다    
    var map = new kakao.maps.Map(mapContainer, mapOption); 

    // 주소-좌표 변환 객체를 생성합니다
    var geocoder = new kakao.maps.services.Geocoder();

    // 주소로 좌표를 검색합니다
    geocoder.addressSearch(storeAddr, function(result, status) {
        // 정상적으로 검색이 완료됐으면 
        if (status === kakao.maps.services.Status.OK) {
            var coords = new kakao.maps.LatLng(result[0].y, result[0].x);

            // 결과값으로 받은 위치를 마커로 표시합니다
            var marker = new kakao.maps.Marker({
                map: map,
                position: coords
            });

            // 인포윈도우로 장소에 대한 설명을 표시합니다
            var infowindow = new kakao.maps.InfoWindow({
                content: '<div style="width:200px;text-align:center;padding:3px 0; position: relative;">' + storeName + '</div>'
            });
            infowindow.open(map, marker);

            // 지도의 중심을 결과값으로 받은 위치로 이동시킵니다
            map.setCenter(coords);
        } 
    });
</script>