jsp 코드야. 해석하고 기억해놔.
<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="ui" uri="http://egovframework.gov/ctl/ui"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<meta http-equiv="Content-Language" content="ko">
<title>병원을 찾아드려요</title>
<link href="<c:url value='/'/>css/styles.css" rel="stylesheet"
	type="text/css">
<script src="https://use.fontawesome.com/releases/v6.3.0/js/all.js"
	crossorigin="anonymous"></script>
</head>

<body>
	<noscript>자바스크립트를 지원하지 않는 브라우저에서는 일부 기능을 사용하실 수 없습니다.</noscript>
	<!-- 전체 레이어 시작 -->

	<div id="wrap">
		<!-- container 시작 -->
		<div id="main_container">

			<!-- hospital 섹션 -->
			<section class="page-section hospital" id="hospital">
			<div class="container">
				<br>

				<div class="row justify-content-center">

					<div class="col-md-6 col-lg-4 mb-5"
						style="position: relative; display: flex; justify-content: center; align-items: center; height: 100%; transform: translateY(-25px);">


						<!-- 인체 모양-->
						<c:url value='/images/human.png' var="imgSrc" />
						<img src="${imgSrc}" alt="Alternative Text"
							style="width: 90%; height: 90%;" />

						<!-- 전면 버튼 시작-->

						<!-- 머리 버튼 -->
						<div id="head-btn" class="position-absolute translate-middle"
							style="top: 7%; left: 49.9%;">
							<button class="btn btn-primary btn-opacity"
								style="width: 70px; height: 90px; border-radius: 50%;"
								data-bs-toggle="modal" data-bs-target="#hospitalModal1"></button>
						</div>

					</div>

				</div>
			</div>
			</section>

			<!-- 병원 위치 지도 섹션-->
			<section class="page-section hospital"
				style="height: 1000px;">
			<div class="row justify-content-center" style="width: 99%;">
				<div class="col-md-6 col-lg-4 mb-5"
					style="position: relative; display: flex; justify-content: center; align-items: center;">
					<h1>지도가 나오는 부분</h1>
				</div>
			</div>
			<div style= "position: relative; display: flex; justify-content: center; align-items: center;"  >
				<div style="width:1000px; height:500px;" id="map"></div>
			</div>
			</section>

		<!-- 모달창 구간 -->

		<!-- 머리 -->
		<div class="hospital-modal modal fade" id="hospitalModal1"
			tabindex="-1" aria-labelledby="hospitalModal1" aria-hidden="true">
			<div class="modal-dialog modal-xl">
				<div class="modal-content">
					<div style="position: relative;">
						<button class="btn-close" type="button" data-bs-dismiss="modal"
							aria-label="Close" style="position: absolute; right: 0;"></button>
					</div>
					<div class="modal-body text-center pb-5">
						<div class="container">
							<div class="row justify-content-center">
								<div class="col-lg-8">
									<h2
										class="hospital-modal-title text-secondary text-uppercase mb-0">머리</h2>
									<div class="divider-custom">
										<div class="divider-custom-line"></div>
										<div class="divider-custom-icon">
											<i class="fas fa-star"></i>
										</div>
										<div class="divider-custom-line"></div>
									</div>
									<button class="btn btn-primary"
										onclick="closeModalAndScrollToSection(); getUserLocation();">
										<i class="fas fa-xmark fa-fw"></i> 완료
									</button>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- Bootstrap core JS-->
		<script
			src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
		<!-- Core theme JS-->
		<script src="js/scripts.js"></script>
		<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *-->
		<!-- * *                               SB Forms JS                               * *-->
		<!-- * * Activate your form at https://startbootstrap.com/solution/contact-forms * *-->
		<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *-->
		<script src="https://cdn.startbootstrap.com/sb-forms-latest.js"></script>
		<!-- 스크립트 부분 -->
		<script type="text/javascript"
			src="//dapi.kakao.com/v2/maps/sdk.js?appkey=5aedc9bc48ee8cf5b21c312d3905ad16&libraries=services"></script>
		<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
		<!--자바 스크립트  -->
		<script>
		var geocoder = new kakao.maps.services.Geocoder();
		// 지도 표시
		var mapContainer = document.getElementById('map'); // 지도를 표시할 div
		var mapOption = {
			center : new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
			level : 7 // 지도의 확대 레벨
		};
		
		// 지도를 표시할 div와 지도 옵션으로 지도를 생성합니다
		var map = new kakao.maps.Map(mapContainer, mapOption);
		
		if (navigator.geolocation) {
		    navigator.geolocation.getCurrentPosition(function(position) {
		      var lat = position.coords.latitude; // 위도
		      var lon = position.coords.longitude; // 경도

		      var locPosition = new kakao.maps.LatLng(lat, lon); // 마커가 표시될 위치를 geolocation으로 얻어온 좌표로 생성합니다
		      var message = '<div style="padding:5px;">여기에 계신가요?!</div>'; // 인포윈도우에 표시될 내용입니다

		      // 마커와 인포윈도우를 표시합니다
		      displayMarker(locPosition, message);
		    });
		}
		// 병원 위치 정보 확인
		function getUserLocation() {
			  if (navigator.geolocation) {
			    navigator.geolocation.getCurrentPosition(function(position) {
			      var lat = position.coords.latitude; // 위도
			      var lon = position.coords.longitude; // 경도

			      var locPosition = new kakao.maps.LatLng(lat, lon); // 마커가 표시될 위치를 geolocation으로 얻어온 좌표로 생성합니다
			      var message = '<div style="padding:5px;">여기에 계신가요?!</div>'; // 인포윈도우에 표시될 내용입니다

			      // 마커와 인포윈도우를 표시합니다
			      displayMarker(locPosition, message);

			      // 이제 lat과 lon을 사용할 수 있으므로 geocoder.coord2RegionCode와 console.log에서 사용할 수 있습니다
			      geocoder.coord2RegionCode(lon, lat, function(result, status) {
			        if (status === kakao.maps.services.Status.OK) {
			          var fullAddress = result[0].address_name;
			          console.log('전체 주소: ' + fullAddress);

			          // 여기에서 슬라이싱을 통해 원하는 부분의 주소를 얻어냅니다.
			          var slicedAddress = fullAddress.slice(0, 12); // 예: 주소의 처음 12글자 ex(경산북도 경산시 하양읍)
			          console.log('슬라이싱된 주소: ' + slicedAddress);

			          // 그리고 나서 이 주소를 API에 전달합니다.
			          $.ajax({
			            url: '/hbz/Hospital.do',  // 요청을 보낼 API의 URL을 적어주세요.
			            type: 'GET',
			            data: {address: slicedAddress},
			            dataType: 'html', // 서버로 보내는 데이터의 타입을 'json'으로 지정합니다
			            success: function(response) {
			              // 서버로부터 응답이 올 경우 실행할 함수
			              // 'response' 변수에는 서버로부터 받은 응답이 들어있습니다.
			              console.log(response);
			              $('body').html(response);
			              // 사용자 위치를 사용하는 코드를 여기에 위치시킵니다.
			              // 예: 위치에 따른 마커 표시 등
			            },
			            error: function(jqXHR, textStatus, errorThrown) {
			              console.log("AJAX 요청 실패: " + textStatus);
			              console.log("에러 내용: " + errorThrown);
			            }
			          });
			        }
			      });
			    });
			  } else {
			    // HTML5의 GeoLocation을 사용할 수 없을 때 처리
			    console.log('Geolocation을 지원하지 않는 브라우저입니다.');
			  }
			}

		// 현재위치 마커 및 정보 
		function displayMarker(locPosition, message) {
			var marker = new kakao.maps.Marker({
				map : map,
				position : locPosition
			});

			var iwContent = message;
			var iwRemoveable = true;

			var infowindow = new kakao.maps.InfoWindow({
				content : iwContent,
				removable : iwRemoveable
			});

			infowindow.open(map, marker);
			map.setCenter(locPosition);
		}
		
		// 위치 지역 마킹 찍는 함수
		var positions = [
	    <c:forEach var="hospital" items="${hospitalList}" varStatus="status">
	        {
	            title: '${hospital.yadmNm}',
	            ykiho: '${hospital.ykiho}',
	            latlng: new kakao.maps.LatLng(${hospital.YPos}, ${hospital.XPos})
	        },
	        <c:if test="${!status.last}"></c:if>
	    </c:forEach>
		];
		
		
		for (var i = 0; i < positions.length; i ++) {
		    // 마커 이미지의 이미지 크기 입니다
		    var imageSize = new kakao.maps.Size(24, 35); 
		    
		    var imageSrc = "https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/markerStar.png"; 
		    
		    // 마커 이미지를 생성합니다    
		    var markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize); 
		    
		 // 마커를 생성합니다
		    var marker = new kakao.maps.Marker({
		        map: map, // 마커를 표시할 지도
		        position: positions[i].latlng, // 마커를 표시할 위치
		        title : positions[i].title, // 마커의 타이틀, 마커에 마우스를 올리면 타이틀이 표시됩니다
		        image : markerImage // 마커 이미지 
		    });

		    // 마커를 클릭했을 때 마커 위에 표시할 인포윈도우를 생성합니다
		    var iwContent = positions[i].title;
		    var iwRemoveable = true; // removeable 속성을 ture 로 설정하면 인포윈도우를 닫을 수 있는 x버튼이 표시됩니다
		        
		    // 인포윈도우를 생성합니다
		    var infowindow = new kakao.maps.InfoWindow({
		        content : iwContent,
		        removable : iwRemoveable
		    });
		        
		    // 마커에 클릭이벤트를 등록합니다
		    kakao.maps.event.addListener(marker, 'click', (function(marker, infowindow, ykiho) {
		        return function() {
		            // 마커 위에 인포윈도우를 표시합니다
		            infowindow.open(map, marker);  
		            console.log(ykiho);
		            $.ajax({
		                url: '/hbz/HospitalInfo.do', // API 경로
		                type: 'GET', // 요청 방식
		                data: {
		                	ykiho: ykiho
		                },
		                success: function(data) {
		                	console.log(data);
		                	$('body').html(data);
		                },
		                error: function(error) {
		                	console.log("실패");
		                }
		            });
		        };
		    })(marker, infowindow, positions[i].ykiho));
		    
		    // 사용자의 위치를 API부분으로 옮긴다
		    var userPosition;
			
		    if (navigator.geolocation) {
		        navigator.geolocation.getCurrentPosition(function(position) {
		            userPosition = {
		                latitude: position.coords.latitude,
		                longitude: position.coords.longitude
		            };
		        });
		    }
		}
		</script>
		<script type="text/javascript">

            function closeModalAndScrollToSection() {
                // 모달들을 선택
                var modals = document.querySelectorAll(".hospital-modal");

                modals.forEach(function (modal) {
                    // 모달 인스턴스 가져오기
                    var modalInstance = bootstrap.Modal.getInstance(modal);

                    // 모달을 닫음
                    if (modalInstance) {
                        modalInstance.hide();
                    }

                    // 모달이 완전히 닫힌 후에 실행될 이벤트 리스너
                    modal.addEventListener('hidden.bs.modal', function onModalHidden() {
                        // 이 이벤트 리스너를 제거함으로써 다시는 실행되지 않음
                        modal.removeEventListener('hidden.bs.modal', onModalHidden);

                        const mapElement = document.getElementById('map');
                        if (mapElement) {
                            // 'map' 섹션의 시작 부분으로 스크롤
                            mapElement.scrollIntoView({
                                behavior: 'smooth',
                                block: 'start'
                            });
                        }
                    });
                });
            }
        </script>
</body>

</html>