24.02.05

프로젝트 초반에 구현했었던 카카오지도 api
아직까진 좌표가 카카오회사에 고정되있었는데
이번엔 산 마다 좌표가 다르게 적용될수있도록 script에 db값을 불러오는 방법을 찾아보려고 한다

기존의 mountain.jsp

<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=166cb8c90554b8d95c8841917a09a6fb"></script>
<script>
	var container = document.getElementById('map');
	var options = {
		center: new kakao.maps.LatLng(33.450701, 126.570667),
		level: 3
	};

	var map = new kakao.maps.Map(container, options);
	
	// 마커가 표시될 위치
	var markerPosition  = new kakao.maps.LatLng(33.450701, 126.570667); 

	// 마커를 생성
	var marker = new kakao.maps.Marker({
	    position: markerPosition
	});

	// 마커가 지도 위에 표시되도록 설정
	marker.setMap(map);
</script>

mountain 테이블의 내용을 어떻게 가져올까 고민하다가

<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=166cb8c90554b8d95c8841917a09a6fb"></script>
<script>
    var mountainsList = [
        <c:forEach var="mountain" items="${mountainsList}">
            { mtLat: ${mountain.mtLat}, mtLot: ${mountain.mtLot} },
            <c:if test="${not empty mountain}">
                ,
            </c:if>
        </c:forEach>
    ];

    //지도 표시할 div
    var container = document.getElementById('map');
    var options = {
        center: new kakao.maps.LatLng(mountainsList[0].mtLat, mountainsList[0].mtLot),
        level: 3
    };

  	//지도 생성
    var map = new kakao.maps.Map(container, options);

    mountainsList.forEach(function(mountain) {
  
      // 마커가 표시될 위치      
      var markerPosition = new kakao.maps.LatLng(mountain.mtLat, mountain.mtLot);
		
      // 마커를 생성
      var marker = new kakao.maps.Marker({
            position: markerPosition
	  });

      // 마커가 지도 위에 표시되도록 설정
      marker.setMap(map);
   });
</script>

Uncaught TypeError: Cannot read properties of undefined (reading 'mtLat')

오류가 생겼다
이 오류는 객체가 정의되지 않았을 때 객체의 속성이나 메서드에 접근하려고 시도하면 발생한다고 한다