24.02.06

어제 진행하던 script에 mountain테이블의 값을 불러오기를 마저 진행했다

여태 작성했었던 script에서는 계속 mtLat, mtLot의 값을 찾을 수 없다는 에러가 나서
고민을 하다가
MountainController에서 model에 담았던 mountain을 가져와야되지 않을까 싶었다

mountain.jsp

<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=166cb8c90554b8d95c8841917a09a6fb"></script>
<script>
	//mountain 객체가 존재하는 경우에만 지도를 표시합니다.
	if (${mountain} != null) {
	    // 지도 표시할 div의 요소를 가져옵니다.
	    var container = document.getElementById('map');
	    
	    // mountain 객체에서 mtLat과 mtLot을 가져와 LatLng 객체를 생성합니다.
	    var centerPosition = new kakao.maps.LatLng(${mountain.mtLat}, ${mountain.mtLot});
	    
	    // 지도 옵션을 설정합니다.
	    var options = {
	        center: centerPosition, // 중심 좌표 설정
	        level: 3 // 확대 수준 설정 (1:세계, 3:대한민국 수준)
	    };
	
	    // 지도를 생성하고 표시합니다.
	    var map = new kakao.maps.Map(container, options);
	
	    // 마커가 표시될 위치를 설정합니다.
	    var markerPosition = centerPosition;
	
	    // 마커를 생성합니다.
	    var marker = new kakao.maps.Marker({
	        position: markerPosition
	    });
	
	    // 마커가 지도 위에 표시되도록 설정합니다.
	    marker.setMap(map);
	} else {
	    // mountain 객체가 없는 경우 콘솔에 메시지를 출력합니다.
	    console.log("Mountain data is empty.");
	}
</script>

이 코드에서 에러가 발생했다 console에서는 Uncaught SyntaxError: missing ) after argument list sources에서는 mountain이 불러와졌지만 에러가 나타났다

다른 mt정보들을 불러오다가 특수문자때문인것 같았다
그럼 내가 필요한 정보들만 가져오도록 수정하면 되지 않을까 생각했고

<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=166cb8c90554b8d95c8841917a09a6fb"></script>
<script>
	//mountain 객체가 존재하는 경우에만 지도를 표시합니다.
	if (${mountain.mtLat} != null && ${mountain.mtLot} != null) {
	    // 지도 표시할 div의 요소를 가져옵니다.
	    var container = document.getElementById('map');
	    
	    // mountain 객체에서 mtLat과 mtLot을 가져와 LatLng 객체를 생성합니다.
	    var centerPosition = new kakao.maps.LatLng(${mountain.mtLat}, ${mountain.mtLot});
	    
	    // 지도 옵션을 설정합니다.
	    var options = {
	        center: centerPosition, // 중심 좌표 설정
	        level: 6 // 확대 수준 설정 (1:세계, 3:대한민국 수준)
	    };
	
	    // 지도를 생성하고 표시합니다.
	    var map = new kakao.maps.Map(container, options);
	
	    // 마커가 표시될 위치를 설정합니다.
	    var markerPosition = centerPosition;
	
	    // 마커를 생성합니다.
	    var marker = new kakao.maps.Marker({
	        position: markerPosition
	    });
	
	    // 마커가 지도 위에 표시되도록 설정합니다.
	    marker.setMap(map);
	} else {
	    // mountain 객체가 없는 경우 콘솔에 메시지를 출력합니다.
	    console.log("Mountain data is empty.");
	}
</script>

실행해줬더니 각 mtId 마다 위도경도가 적용되어 지도가 구현 되었다 그리고 지도의 범위를 조금 더 넓히고 싶어서 level을 6으로 변경했다