지도에 여러마커 찍고 인포윈도우만들어서 데이터 집어넣기 질문입니다

카카오맵 API (지도/로컬)
1 
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>다양한 이미지 마커 표시하기</title>
    <style>
#mapwrap{position:relative;overflow:hidden;}
.category, .category *{margin:0;padding:0;color:#000;}   
.category {position:absolute;overflow:hidden;top:10px;left:10px;width:150px;height:50px;z-index:10;border:1px solid black;font-family:'Malgun Gothic','맑은 고딕',sans-serif;font-size:12px;text-align:center;background-color:#fff;}
.category .menu_selected {background:#FF5F4A;color:#fff;border-left:1px solid #915B2F;border-right:1px solid #915B2F;margin:0 -1px;} 
.category li{list-style:none;float:left;width:50px;height:45px;padding-top:5px;cursor:pointer;} 
.category .ico_comm {display:block;margin:0 auto 2px;width:22px;height:26px;background:url('https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/markerStar.png') no-repeat;} 
.category .ico_coffee {background-size: 20px 28px; background-position:0px 0px;}  
.category .ico_store {background-size: 20px 28px; background-position:0px 0px;}   
.category .ico_carpark {background-size: 20px 28px; background-position:0px 0px;} 

.wrap {position: absolute;left: 0;bottom: 40px;width: 288px;height: 132px;margin-left: -144px;text-align: left;overflow: hidden;font-size: 12px;font-family: 'Malgun Gothic', dotum, '돋움', sans-serif;line-height: 1.5;}
.wrap * {padding: 0;margin: 0;}
.wrap .info {width: 286px;height: 120px;border-radius: 5px;border-bottom: 2px solid #ccc;border-right: 1px solid #ccc;overflow: hidden;background: #fff;}
.wrap .info:nth-child(1) {border: 0;box-shadow: 0px 1px 2px #888;}
.info .title {padding: 5px 0 0 10px;height: 30px;background: #eee;border-bottom: 1px solid #ddd;font-size: 18px;font-weight: bold;}
.info .close {position: absolute;top: 10px;right: 10px;color: #888;width: 17px;height: 17px;background: url('https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/overlay_close.png');}
.info .close:hover {cursor: pointer;}
.info .body {position: relative;overflow: hidden;}
.info .desc {position: relative;margin: 13px 0 0 90px;height: 75px;}
.desc .ellipsis {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.desc .jibun {font-size: 11px;color: #888;margin-top: -2px;}
.info .img {position: absolute;top: 6px;left: 5px;width: 73px;height: 71px;border: 1px solid #ddd;color: #888;overflow: hidden;}
.info:after {content: '';position: absolute;margin-left: -12px;left: 50%;bottom: 0;width: 22px;height: 12px;background: url('https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/vertex_white.png')}
.info .link {color: #5085BB;}
</style>

<script src ="http://code.jquery.com/jquery-3.6.1.min.js"></script>
</head>

<body>
<div id="mapwrap"> 
    <!-- 지도가 표시될 div -->
    <div id="map" style="width:100%;height:100vh;"></div>
    <!-- 지도 위에 표시될 마커 카테고리 -->
    <div class="category">
        <ul>
            <li id="coffeeMenu" onclick="changeMarker('coffee')">
                <span class="ico_comm ico_coffee"></span>
                명소
            </li>
            <li id="storeMenu" onclick="changeMarker('store')">
                <span class="ico_comm ico_store"></span>
                축제
            </li>
            <li id="carparkMenu" onclick="changeMarker('carpark')">
                <span class="ico_comm ico_carpark"></span>
                전체
            </li>
        </ul>
    </div>
</div>

<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=da4df8479f2b43832aaba6ccb6bc108c"></script>
<script>
var mapContainer = document.getElementById('map'), // 지도를 표시할 div  
    mapOption = { 
        center: new kakao.maps.LatLng(35.173988, 129.080555), // 지도의 중심좌표 
        level: 8 // 지도의 확대 레벨 
    }; 

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

var mapTypeControl = new kakao.maps.MapTypeControl();
// 커피숍 마커가 표시될 좌표 배열입니다
var coffeePositions = [ 
	new kakao.maps.LatLng(35.1295178,129.094151),
	new kakao.maps.LatLng(35.1019518,129.0345919),
	new kakao.maps.LatLng(35.076122,129.017298),
	new kakao.maps.LatLng(35.17827,129.199126),
	new kakao.maps.LatLng(35.097635,129.120893),
	new kakao.maps.LatLng(35.1547966,129.144653),
	new kakao.maps.LatLng(35.1769907,129.1154605),
	new kakao.maps.LatLng(35.154865,129.062732),
	new kakao.maps.LatLng(35.1211379,129.0167921),
	new kakao.maps.LatLng(35.1710871,129.1139105),
	new kakao.maps.LatLng(35.2510047,129.0427975),
	new kakao.maps.LatLng(35.1681608,129.0573853),
	new kakao.maps.LatLng(35.1006536,129.0326226),
	new kakao.maps.LatLng(35.1687484,128.9735403),
	new kakao.maps.LatLng(35.1545716,129.1329907),
	new kakao.maps.LatLng(35.1706486,129.1254273),
	new kakao.maps.LatLng(35.1100718,129.0280727),
	new kakao.maps.LatLng(35.1846343,129.0434794),
	new kakao.maps.LatLng(35.1641542,129.0648058),
	new kakao.maps.LatLng(35.2057006,129.2276931),
	new kakao.maps.LatLng(35.2201331,129.0738073),
	new kakao.maps.LatLng(35.1599375,129.1698125),
	new kakao.maps.LatLng(35.172711,128.9853636),
	new kakao.maps.LatLng(35.0973904,129.0105924),
	new kakao.maps.LatLng(35.1883491,129.2233197),
	new kakao.maps.LatLng(35.0783256,129.0798565),
	new kakao.maps.LatLng(35.2839899,129.0687639),
	new kakao.maps.LatLng(35.1031252,129.0274609),
	new kakao.maps.LatLng(35.1198148,129.029509),
	new kakao.maps.LatLng(35.1711778,129.1271956),
	new kakao.maps.LatLng(35.1689766,129.1360411),
	new kakao.maps.LatLng(35.1940316,129.0615183),
	new kakao.maps.LatLng(35.301617,129.185367),
	new kakao.maps.LatLng(35.272772,129.137896),
	new kakao.maps.LatLng(35.061884,129.022211),
	new kakao.maps.LatLng(35.360046,129.239801),
	new kakao.maps.LatLng(35.158601,129.160001),
	new kakao.maps.LatLng(35.078255,129.045316),
	new kakao.maps.LatLng(35.046999,128.966551),
	new kakao.maps.LatLng(35.046999,128.966551),
	new kakao.maps.LatLng(35.052544,128.960647),
	new kakao.maps.LatLng(35.152813,129.118218),
	new kakao.maps.LatLng(35.0930473,129.0374683),
	new kakao.maps.LatLng(35.1249213,129.0743458),
	new kakao.maps.LatLng(35.1039739,129.0346464),
	new kakao.maps.LatLng(35.1026721,129.031176),
	new kakao.maps.LatLng(35.1042116,129.0191299),
	new kakao.maps.LatLng(35.2101539,129.0894131),
	new kakao.maps.LatLng(35.2083599,129.0914505),
	new kakao.maps.LatLng(35.1034532,129.0174521),
	new kakao.maps.LatLng(35.1279039,129.0961877)
               
];

// 편의점 마커가 표시될 좌표 배열입니다
var storePositions = [
	new kakao.maps.LatLng(35.1711778,129.1271956),
	new kakao.maps.LatLng(35.2118622,129.0899982),
	new kakao.maps.LatLng(35.0966394,129.0305933),
	new kakao.maps.LatLng(35.1142633,129.0380202),
	new kakao.maps.LatLng(35.0457857,128.968704),
	new kakao.maps.LatLng(35.1537821,129.1185399),
	new kakao.maps.LatLng(35.0990683,129.031487),
	new kakao.maps.LatLng(35.1582327,129.1615639),
	new kakao.maps.LatLng(35.1582327,129.1615639),
	new kakao.maps.LatLng(35.1582327,129.1615639),
	new kakao.maps.LatLng(35.1687484,128.9735403),
	new kakao.maps.LatLng(35.1687484,128.9735403),
	new kakao.maps.LatLng(35.056739,129.086336),
	new kakao.maps.LatLng(35.171074,129.126709),
	new kakao.maps.LatLng(35.158367,129.159007),
	new kakao.maps.LatLng(35.152502,129.118065),
	new kakao.maps.LatLng(35.046338,128.967912),
	new kakao.maps.LatLng(35.076122,129.017298),
	new kakao.maps.LatLng(35.17827,129.199126),
	new kakao.maps.LatLng(35.2048909,128.982775),
	new kakao.maps.LatLng(35.0961559,129.0089071),
	new kakao.maps.LatLng(35.209882,128.972345),
	new kakao.maps.LatLng(35.2247703,129.2301119),
	new kakao.maps.LatLng(35.2722418,129.245967),
	new kakao.maps.LatLng(35.1537821,129.1185399),
	new kakao.maps.LatLng(35.1173881,129.0487465),
	new kakao.maps.LatLng(35.1899786,129.0582686),
	new kakao.maps.LatLng(35.220095,128.9994207),
	new kakao.maps.LatLng(35.1006536,129.0326226),
	new kakao.maps.LatLng(35.1754288,129.0433882),
	new kakao.maps.LatLng(35.2755,129.0575042),
	new kakao.maps.LatLng(35.158697,129.1603842)
];

// 주차장 마커가 표시될 좌표 배열입니다
var carparkPositions = [
	new kakao.maps.LatLng(35.1295178,129.094151),
	new kakao.maps.LatLng(35.1019518,129.0345919),
	new kakao.maps.LatLng(35.076122,129.017298),
	new kakao.maps.LatLng(35.17827,129.199126),
	new kakao.maps.LatLng(35.097635,129.120893),
	new kakao.maps.LatLng(35.1547966,129.144653),
	new kakao.maps.LatLng(35.1769907,129.1154605),
	new kakao.maps.LatLng(35.154865,129.062732),
	new kakao.maps.LatLng(35.1211379,129.0167921),
	new kakao.maps.LatLng(35.1710871,129.1139105),
	new kakao.maps.LatLng(35.2510047,129.0427975),
	new kakao.maps.LatLng(35.1681608,129.0573853),
	new kakao.maps.LatLng(35.1006536,129.0326226),
	new kakao.maps.LatLng(35.1687484,128.9735403),
	new kakao.maps.LatLng(35.1545716,129.1329907),
	new kakao.maps.LatLng(35.1706486,129.1254273),
	new kakao.maps.LatLng(35.1100718,129.0280727),
	new kakao.maps.LatLng(35.1846343,129.0434794),
	new kakao.maps.LatLng(35.1641542,129.0648058),
	new kakao.maps.LatLng(35.2057006,129.2276931),
	new kakao.maps.LatLng(35.2201331,129.0738073),
	new kakao.maps.LatLng(35.1599375,129.1698125),
	new kakao.maps.LatLng(35.172711,128.9853636),
	new kakao.maps.LatLng(35.0973904,129.0105924),
	new kakao.maps.LatLng(35.1883491,129.2233197),
	new kakao.maps.LatLng(35.0783256,129.0798565),
	new kakao.maps.LatLng(35.2839899,129.0687639),
	new kakao.maps.LatLng(35.1031252,129.0274609),
	new kakao.maps.LatLng(35.1198148,129.029509),
	new kakao.maps.LatLng(35.1711778,129.1271956),
	new kakao.maps.LatLng(35.1689766,129.1360411),
	new kakao.maps.LatLng(35.1940316,129.0615183),
	new kakao.maps.LatLng(35.301617,129.185367),
	new kakao.maps.LatLng(35.272772,129.137896),
	new kakao.maps.LatLng(35.061884,129.022211),
	new kakao.maps.LatLng(35.360046,129.239801),
	new kakao.maps.LatLng(35.158601,129.160001),
	new kakao.maps.LatLng(35.078255,129.045316),
	new kakao.maps.LatLng(35.046999,128.966551),
	new kakao.maps.LatLng(35.046999,128.966551),
	new kakao.maps.LatLng(35.052544,128.960647),
	new kakao.maps.LatLng(35.152813,129.118218),
	new kakao.maps.LatLng(35.0930473,129.0374683),
	new kakao.maps.LatLng(35.1249213,129.0743458),
	new kakao.maps.LatLng(35.1039739,129.0346464),
	new kakao.maps.LatLng(35.1026721,129.031176),
	new kakao.maps.LatLng(35.1042116,129.0191299),
	new kakao.maps.LatLng(35.2101539,129.0894131),
	new kakao.maps.LatLng(35.2083599,129.0914505),
	new kakao.maps.LatLng(35.1034532,129.0174521),
	new kakao.maps.LatLng(35.1279039,129.0961877),
	new kakao.maps.LatLng(35.1711778,129.1271956),
	new kakao.maps.LatLng(35.2118622,129.0899982),
	new kakao.maps.LatLng(35.0966394,129.0305933),
	new kakao.maps.LatLng(35.1142633,129.0380202),
	new kakao.maps.LatLng(35.0457857,128.968704),
	new kakao.maps.LatLng(35.1537821,129.1185399),
	new kakao.maps.LatLng(35.0990683,129.031487),
	new kakao.maps.LatLng(35.1582327,129.1615639),
	new kakao.maps.LatLng(35.1582327,129.1615639),
	new kakao.maps.LatLng(35.1582327,129.1615639),
	new kakao.maps.LatLng(35.1687484,128.9735403),
	new kakao.maps.LatLng(35.1687484,128.9735403),
	new kakao.maps.LatLng(35.056739,129.086336),
	new kakao.maps.LatLng(35.171074,129.126709),
	new kakao.maps.LatLng(35.158367,129.159007),
	new kakao.maps.LatLng(35.152502,129.118065),
	new kakao.maps.LatLng(35.046338,128.967912),
	new kakao.maps.LatLng(35.076122,129.017298),
	new kakao.maps.LatLng(35.17827,129.199126),
	new kakao.maps.LatLng(35.2048909,128.982775),
	new kakao.maps.LatLng(35.0961559,129.0089071),
	new kakao.maps.LatLng(35.209882,128.972345),
	new kakao.maps.LatLng(35.2247703,129.2301119),
	new kakao.maps.LatLng(35.2722418,129.245967),
	new kakao.maps.LatLng(35.1537821,129.1185399),
	new kakao.maps.LatLng(35.1173881,129.0487465),
	new kakao.maps.LatLng(35.1899786,129.0582686),
	new kakao.maps.LatLng(35.220095,128.9994207),
	new kakao.maps.LatLng(35.1006536,129.0326226),
	new kakao.maps.LatLng(35.1754288,129.0433882),
	new kakao.maps.LatLng(35.2755,129.0575042),
	new kakao.maps.LatLng(35.158697,129.1603842)
                                    
];  


var markerImageSrc = 'https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/markerStar.png';  // 마커이미지의 주소입니다. 스프라이트 이미지 입니다
    coffeeMarkers = [], // 커피숍 마커 객체를 가지고 있을 배열입니다
    storeMarkers = [], // 편의점 마커 객체를 가지고 있을 배열입니다
    carparkMarkers = []; // 주차장 마커 객체를 가지고 있을 배열입니다

 let Overlay=[],
     Overlay2=[],
     Overlay3=[];
var clickedOverlay=null;
    
createCoffeeMarkers(); // 커피숍 마커를 생성하고 커피숍 마커 배열에 추가합니다
createStoreMarkers(); // 편의점 마커를 생성하고 편의점 마커 배열에 추가합니다
createCarparkMarkers(); // 주차장 마커를 생성하고 주차장 마커 배열에 추가합니다

changeMarker(); // 지도에 커피숍 마커가 보이도록 설정합니다    


// 마커이미지의 주소와, 크기, 옵션으로 마커 이미지를 생성하여 리턴하는 함수입니다
function createMarkerImage(src, size, options) {
    var markerImage = new kakao.maps.MarkerImage(src, size, options);
    return markerImage;            
}

// 좌표와 마커이미지를 받아 마커를 생성하여 리턴하는 함수입니다
function createMarker(position, image) {
    var marker = new kakao.maps.Marker({
        position: position,
        image: image
    });
    
    return marker;  
}   
   

// 커피숍 마커를 생성하고 커피숍 마커 배열에 추가하는 함수입니다

function createCoffeeMarkers() {
    
	coffeePositions.forEach(function(cof){
		
		
		
		var imageSize = new kakao.maps.Size(28, 30),
	    imageOptions = {  
	        spriteOrigin: new kakao.maps.Point(0,0),    
	        spriteSize: new kakao.maps.Size(20, 30),
	   		};     
		 
		 // 마커이미지와 마커를 생성합니다
		 var markerImage = createMarkerImage(markerImageSrc, imageSize, imageOptions);    
		 var marker = new kakao.maps.Marker({
		        position: new kakao.maps.LatLng(cof.Ma, cof.La),
		        image: markerImage,
		      });
		 
		 var content = '<div class="wrap">' + 
		    '    <div class="info">' + 
		    '        <div class="title">' + 
		    '            ㅋ카카카카' + 
		    '            <div class="close" onclick="closeOverlay()" title="닫기"></div>' + 
		    '        </div>' + 
		    '        <div class="body">' + 
		    '            <div class="img">' +
		    '                <img src="https://cfile181.uf.daum.net/image/250649365602043421936D" width="73" height="70">' +
		    '           </div>' + 
		    '            <div class="desc">' + 
		    '                <div class="ellipsis">제주특별자치도 제주시 첨단로 242</div>' + 
		    '                <div class="jibun ellipsis">(우) 63309 (지번) 영평동 2181</div>' + 
		    '                <div><a href="https://www.kakaocorp.com/main" target="_blank" class="link">홈페이지</a></div>' + 
		    '            </div>' + 
		    '        </div>' + 
		    '    </div>' +    
		    '</div>';
		 
		var overlay = new kakao.maps.CustomOverlay({
			content: content,
		    position: marker.getPosition()
		});
		coffeeMarkers.push(marker);
		
		Overlay.push(overlay);
		
		kakao.maps.event.addListener(marker, 'click', function() {
	        if (clickedOverlay){
	        	clickedOverlay.setMap(null);
	        }
	        overlay.setMap(map);
	        clickedOverlay = overlay;
	});
  })
}

function closeOverlay() {
    for(let i=0; i<Overlay.length; i++){
      Overlay[i].setMap(null);
    }
  }





// 커피숍 마커들의 지도 표시 여부를 설정하는 함수입니다
function setCoffeeMarkers(map) {        
    for (var i = 0; i < coffeeMarkers.length; i++) { 
    	coffeeMarkers[i].setMap(map);
    }        
}




// 편의점 마커를 생성하고 편의점 마커 배열에 추가하는 함수입니다
function createStoreMarkers() {
	storePositions.forEach(function(sof){
		var imageSize = new kakao.maps.Size(28, 30),
	    imageOptions = {  
	        spriteOrigin: new kakao.maps.Point(0,0),    
	        spriteSize: new kakao.maps.Size(20, 30),
	   		};     
		 
		 var markerImage = createMarkerImage(markerImageSrc, imageSize, imageOptions);  
		 var marker = new kakao.maps.Marker({
		        position: new kakao.maps.LatLng(sof.Ma, sof.La),
		        image: markerImage,
		      }); 
		 
		 var content = '<div class="wrap">' +
         '    <div class="info">' +
         '        <div class="title">' +
         '            카카오 스페이스닷원' +
         '            <div class="close" onclick="closeOverlay2()" title="닫기"></div>' +
         '        </div>' +
         '        <div class="body">' +
         '            <div class="img">' +
         '                <img src="http://cfile181.uf.daum.net/image/250649365602043421936D" width="73" height="70">' +
         '           </div>' +
         '            <div class="desc">' +
         '                <div class="ellipsis">제주특별자치도 제주시 첨단로 242</div>' +
         '                <div class="jibun ellipsis">(우) 63309 (지번) 영평동 2181</div>' +
         '                <div><a href="https://www.kakaocorp.com/main" target="_blank" class="link">홈페이지</a></div>' +
         '            </div>' +
         '        </div>' +
         '    </div>' +
         '</div>';
         
		 var overlay2 = new kakao.maps.CustomOverlay({
		        content: content,
		        position: marker.getPosition()
		      });
		// 생성된 마커를 편의점 마커 배열에 추가합니다
	        storeMarkers.push(marker);    
		    Overlay2.push(overlay2);
		    
		kakao.maps.event.addListener(marker, 'click', function() {
			  if (clickedOverlay){
		        	clickedOverlay.setMap(null);
		        }
		        overlay2.setMap(map);
		        clickedOverlay = overlay2;
	});        
  })        
}

function closeOverlay2() {
    for(let i=0; i<Overlay2.length; i++){
      Overlay2[i].setMap(null);
    }
  }


// 편의점 마커들의 지도 표시 여부를 설정하는 함수입니다
function setStoreMarkers(map) {        
    for (var i = 0; i < storeMarkers.length; i++) {  
        storeMarkers[i].setMap(map);
    }        
}

// 주차장 마커를 생성하고 주차장 마커 배열에 추가하는 함수입니다
function createCarparkMarkers() {
	carparkPositions.forEach(function(pof){
		var imageSize = new kakao.maps.Size(28, 30),
	    imageOptions = {  
	        spriteOrigin: new kakao.maps.Point(0,0),    
	        spriteSize: new kakao.maps.Size(20, 30),
	   		};     
		var markerImage = createMarkerImage(markerImageSrc, imageSize, imageOptions);    
		 var marker = new kakao.maps.Marker({
		        position: new kakao.maps.LatLng(pof.Ma, pof.La),
		        image: markerImage,
		      });
		 var content = '<div class="wrap">' +
         '    <div class="info">' +
         '        <div class="title">' +
         '            카카오 스페이스닷원' +
         '            <div class="close" onclick="closeOverlay3()" title="닫기"></div>' +
         '        </div>' +
         '        <div class="body">' +
         '            <div class="img">' +
         '                <img src="http://cfile181.uf.daum.net/image/250649365602043421936D" width="73" height="70">' +
         '           </div>' +
         '            <div class="desc">' +
         '                <div class="ellipsis">제주특별자치도 제주시 첨단로 242</div>' +
         '                <div class="jibun ellipsis">(우) 63309 (지번) 영평동 2181</div>' +
         '                <div><a href="https://www.kakaocorp.com/main" target="_blank" class="link">홈페이지</a></div>' +
         '            </div>' +
         '        </div>' +
         '    </div>' +
         '</div>';
		
         var overlay3 = new kakao.maps.CustomOverlay({
		        content: content,
		        position: marker.getPosition()
		      });
         // 생성된 마커를 주차장 마커 배열에 추가합니다
         carparkMarkers.push(marker);       
 
         Overlay3.push(overlay3);
         kakao.maps.event.addListener(marker, 'click', function() {
        	  if (clickedOverlay){
  	        	clickedOverlay.setMap(null);
  	        }
  	        overlay3.setMap(map);
  	        clickedOverlay = overlay3;
	});
   })               
}


  function closeOverlay3() {
  for(let i=0; i<Overlay3.length; i++){
    Overlay3[i].setMap(null);
  }
}

// 주차장 마커들의 지도 표시 여부를 설정하는 함수입니다
function setCarparkMarkers(map) {        
    for (var i = 0; i < carparkMarkers.length; i++) {  
        carparkMarkers[i].setMap(map);
    }        
}

// 카테고리를 클릭했을 때 type에 따라 카테고리의 스타일과 지도에 표시되는 마커를 변경합니다
function changeMarker(type){
	closeOverlay3();
	closeOverlay2();
	closeOverlay();
    var coffeeMenu = document.getElementById('coffeeMenu');
    var storeMenu = document.getElementById('storeMenu');
    var carparkMenu = document.getElementById('carparkMenu');
    
    // 커피숍 카테고리가 클릭됐을 때
    if (type === 'coffee') {
    
        // 커피숍 카테고리를 선택된 스타일로 변경하고
        coffeeMenu.className = 'menu_selected';
        
        // 편의점과 주차장 카테고리는 선택되지 않은 스타일로 바꿉니다
        storeMenu.className = '';
        carparkMenu.className = '';
        
        // 커피숍 마커들만 지도에 표시하도록 설정합니다
        setCoffeeMarkers(map);
        setStoreMarkers(null);
        setCarparkMarkers(null);
        
        
    } else if (type === 'store') { // 편의점 카테고리가 클릭됐을 때
    
        // 편의점 카테고리를 선택된 스타일로 변경하고
        coffeeMenu.className = '';
        storeMenu.className = 'menu_selected';
        carparkMenu.className = '';
        
        // 편의점 마커들만 지도에 표시하도록 설정합니다
        setCoffeeMarkers(null);
        setStoreMarkers(map);
        setCarparkMarkers(null);
        
    } else if (type === 'carpark') { // 주차장 카테고리가 클릭됐을 때
     
        // 주차장 카테고리를 선택된 스타일로 변경하고
        coffeeMenu.className = '';
        storeMenu.className = '';
        carparkMenu.className = 'menu_selected';
        
        // 주차장 마커들만 지도에 표시하도록 설정합니다
        setCoffeeMarkers(null);
        setStoreMarkers(null);
        setCarparkMarkers(map);  
    }    
   
}

// 지도에 컨트롤을 추가해야 지도위에 표시됩니다
// kakao.maps.ControlPosition은 컨트롤이 표시될 위치를 정의하는데 TOPRIGHT는 오른쪽 위를 의미합니다
map.addControl(mapTypeControl, kakao.maps.ControlPosition.TOPRIGHT);

//지도 확대 축소를 제어할 수 있는  줌 컨트롤을 생성합니다
var zoomControl = new kakao.maps.ZoomControl();
map.addControl(zoomControl, kakao.maps.ControlPosition.RIGHT);
</script>
</body>
</html>

위의 코드대로 실행하면 마커잘찍히고 찍히는곳으로 인포윈도우는 찍히는데 여기에 데이터를 넣으려고 ajax로 시도해보았는데 잘안됩니다 다른방법이 있을까요??
다른문의도 읽어보았는데 데이터가 많아 다른방법을 찾는중입니다. 도와주시면 감사하겠습니다.

2

반복문에서 데이터를 호출해서 content를 설정하려면 $.ajax의 success 함수에서 마커와 오버레이를 생성해주세요.
그리고 Lat, Lng 좌표 정보를 가져올 때는 속성에 직접 접근해서 사용하지 마시고
getLat(), getLng() API를 호출해서 사용해주세요.

var marker = new kakao.maps.Marker({
    position: new kakao.maps.LatLng(cof.getLat(), cof.getLng()),
    image: markerImage
});

https://apis.map.kakao.com/web/documentation/#LatLng

3

어렵게 진행중입니다`$( function() {
$(’’).on(‘click’, function() {
$.ajax( {
url : ‘Test32’ ,
data : {loc_Lat : loc_Lat},
method : “POST”
} )
.done(function( result, textStatus, xhr ) {
console.log( result );
var resultStr = JSON.stringify( result ); // JSOn → string
alert(resultStr);
var uid = result.userid;
var uname = result.username;
var html = “

”;
html += “
아이디:” + uid + “
”;
html += “
이름:” + uname + “
”;
html += “
”;
$(’#result1’).html( html );
})
.fail(function(error, textStatus, errorThrown ) {
console.log ( error );
alert(‘Error:’ + error)
});

   }) // btnok Click end

})`
ajax 호출완료했는데 마커클릭시 ajax로 데이터를 넣고싶은데 마커클릭함수가뭔지몰라서 여쭤봅니다! 감사합니다!

function createCoffeeMarkers() {
    
	coffeePositions.forEach(function(cof){
		
		
		var imageSize = new kakao.maps.Size(28, 30),
	    imageOptions = {  
	        spriteOrigin: new kakao.maps.Point(0,0),    
	        spriteSize: new kakao.maps.Size(20, 30),
	   		};     
		 // 마커이미지와 마커를 생성합니다
		 var markerImage = createMarkerImage(markerImageSrc, imageSize, imageOptions);    
		 var marker = new kakao.maps.Marker({
		        position: new kakao.maps.LatLng(cof.Ma, cof.La),
		        image: markerImage,
		      });
		 var content = '<div class="wrap">' + 
		    '    <div class="info">' + 
		    '        <div class="title">' + 
		    '            sight.s_name' + 
		    '            <div class="close" onclick="closeOverlay()" title="닫기"></div>' + 
		    '        </div>' + 
		    '        <div class="body">' + 
		    '            <div class="img">' +
		    '                <img src="https://cfile181.uf.daum.net/image/250649365602043421936D" width="73" height="70">' +
		    '           </div>' + 
		    '            <div class="desc">' + 
		    '                <div class="ellipsis">제주특별자치도 제주시 첨단로 242</div>' + 
		    '                <div class="jibun ellipsis">(우) 63309 (지번) 영평동 2181</div>' + 
		    '                <div><a href="https://www.kakaocorp.com/main" target="_blank" class="link">홈페이지</a></div>' + 
		    '            </div>' + 
		    '        </div>' + 
		    '    </div>' +    
		    '</div>';
		 
		var overlay = new kakao.maps.CustomOverlay({
			content: content,
		    position: marker.getPosition()
		});
		coffeeMarkers.push(marker);
		Overlay.push(overlay);
		
		kakao.maps.event.addListener(marker, 'click', function() {
	        if (clickedOverlay){
	        	loc = clickedOverlay.getPosition();
	        	loc_Lat=loc.getLat();
	        	loc_Lng=loc.getLng();
	        	clickedOverlay.setMap(null);
	        }
	        overlay.setMap(map);
	        clickedOverlay = overlay;
	 
	      
	        
	    
	});
  })
}

행복한 하루 되세요