인포윈도우 데이터변경 문의드립니다

카카오맵 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>
<script>


 </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;

var loc = "";
var tloc_Lng="";
var tloc_Lat="";
var loc_Lat="";
var loc_Lng="";

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: coffeePositions,
        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.getLat(), cof.getLng()),		        
		        image: markerImage,
		      });
		    kakao.maps.event.addListener(marker,'click', function() {
		        if (clickedOverlay){
							loc_Lat = cof.getLat();
							tloc_Lng = cof.getLng();
							console.log(loc_Lng);
							$.ajax( {
								   url  :  'Test32'  ,  
								    data :  {tloc_Lng  : tloc_Lng}, 
							    method   : "POST"
							} )
							.done(function( result, textStatus, xhr ) {
								   console.log( result );
								   var resultStr = JSON.stringify( result ); // JSOn -> string
								   
								    var s_name       = result.s_name;
								   var s_date       = result.s_date;
								   var s_address       = result.s_address;
								   var s_fee       = result.s_fee;
								   var s_tel       = result.s_tel;
								   var s_hp       = result.s_hp;
								   var html      = "<div>";
								   html         += "<div>아이디:" + uid    + "</div>";
								   html         += "<div>이름:"   + uname  + "</div>";
								   html         += "</div>"; 
								   $('#result1').html( html );
							})
							.fail(function(error, textStatus, errorThrown ) {
								   console.log ( error );
								   alert('Error:' + error)
							});
		        }
			});
		 
	    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){
	        	clickedOverlay.setMap(null);
	        
				        	/* loc = clickedOverlay.getPosition();
				        	console.log(loc);
				        	loc_Lat=loc.getLat();
				        	loc_Lng=loc.getLng();
				        	tloc_Lng=String(loc_Lng).substring(0,11);
				       
				        	console.log(loc_Lng); */
	        			  /*  $.ajax( {
	        				   url  :  'Test32'  ,  
	        				    data :  {tloc_Lng  : tloc_Lng}, 
	        			       method   : "POST"
	        			   } )
	        			   .done(function( result, textStatus, xhr ) {
	        				   console.log( result );
	        				   var resultStr = JSON.stringify( result ); // JSOn -> string
	        				   
	        				   var uid       = result.userid;
	        				   var uname     = result.username;
	        				   var html      = "<div>";
	        				   html         += "<div>아이디:" + uid    + "</div>";
	        				   html         += "<div>이름:"   + uname  + "</div>";
	        				   html         += "</div>";
	        				   $('#result1').html( html );
	        			   })
	        			   .fail(function(error, textStatus, errorThrown ) {
	        				   console.log ( error );
	        				   alert('Error:' + error)
	        			   }); */
	        			   
	        	
	        } 
	        overlay.setMap(map);
	        clickedOverlay = overlay;
	    
	});
		 
		 
		 
  })
}

원하는 바는 ajax로 받아온 데이터를 content안에 집어넣고 싶습니다. 이래저래해도 잘안되네요 알려주시면 감사드리겠습니다.

2

첨부한 코드에 마커 클릭 이벤트가 중복되는데 코드 정리해서 이벤트는 한번만 등록해주세요.
커스텀 오버레이 content 적용 방법은 2가지가 있을 것 같습니다.
아래 방법 참고해주세요.

  1. done콜백 함수에서 overlay.setContent(content); API로 content를 새로 적용하는 방법
    Kakao 지도 Web API Documentation 
$.ajax({…}).done(function (result, textStatus, text) {
    var html = "<div>";
    html += "<div>아이디:" + uid    + "</div>";
    html += "<div>이름:"   + uname  + "</div>";
    html += "</div>";
    overlay.setContent(html);
})
  1. content를 HTMLElement로 구성하고 append시키는 방법
const content = document.createElement(‘div’);
content.className = wrap; 
//TODO: 현재 코드의 content 문자열을 document.createElement로 만들어서 content를 적용해주세요.


$.ajax({…}).done(function (result, textStatus, text) {
    const content = overlay.getContent();
    //TODO:content에 구성된 class, id등으로 추가할 요소 위치를 찾고 append
    const html = document.creatElement(‘div’);
    const idDiv = document.createElement(‘div’);
    idDiv.innerText = `아이디: ${uid}`;

    html.appendChild(idDiv);
	
    content.appendChild(html);
});
1개의 좋아요
3

감사합니다 해결했습니다!! 좋은하루 보내세요!

1개의 좋아요