다중마커 다중오버레이 질문입니다

카테고리별로 다중마커 표시후 해당하는 위치에 다중 오버레이를 올리고 싶은데 가능할까요
기본적으로
다양한 이미지 마커 표시하기 - Kakao 지도 Web API(다양한 이미지 마커 표시하기)
위에
닫기가 가능한 커스텀 오버레이 - Kakao 지도 Web API(닫기가 가능한 커스텀 오버레이)
를 올리고싶어서 문의드립니다. 도움주시면 감사드리겠습니다

가능합니다. 각 카테고리의 마커를 생성할 때 커스텀 오버레이도 같이 생성해주세요.
map 옵션을 적용해서 오버레이를 생성해서 바로 지도에 표시하거나
마커 클릭 이벤트를 등록해서 마커 클릭 시 overlay.setMap(map); API를 호출해서 커스텀 오버레이를 지도에 표시해주세요.

주의하실 점은 커스텀 오버레이 생성 시 content는 문자열이 아닌 HTMLElement로 생성해서 이벤트를 등록해주시고
스코프 유지를 위해 forEach 반복문을 사용하거나
for 반복문 내 변수를 ES6let 또는 const로 선언해주세요.

아래 답변 함께 참고해주세요.
https://devtalk.kakao.com/t/topic/103147/2?u=lea.ju

좋아요 1

답변 감사합니다.
현재 진행중인 코드인데 마커생성할때 오버레이 같이 생성했구 content생성했는데 이게 HTMLElement 인지는 잘모르겠습니다.

// 커피숍 마커를 생성하고 커피숍 마커 배열에 추가하는 함수입니다
function createCoffeeMarkers() {
    
    for (var i = 0; i < coffeePositions.length; i++) {  
        
        var imageSize = new kakao.maps.Size(22, 26),
            imageOptions = {  
                spriteOrigin: new kakao.maps.Point(10, 0),    
                spriteSize: new kakao.maps.Size(36, 98),
           		};     
        
        // 마커이미지와 마커를 생성합니다
        var markerImage = createMarkerImage(markerImageSrc, imageSize, imageOptions),    
            marker = createMarker(coffeePositions[i], 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);
        infowindowcontent.push(overlay);
         
  }
};    
  
// 커피숍 마커들의 지도 표시 여부를 설정하는 함수입니다
function setCoffeeMarkers(map) {        
    for (var i = 0; i < coffeeMarkers.length; i++) { 
    	coffeeMarkers[i].setMap(map);
    }        
}
function setinfowindowcontent(map) {        
    for (var i = 0; i < coffeeMarkers.length; i++) {
    	kakao.maps.event.addListener(marker, 'click', function() {
   		 
    		infowindowcontent[i].setMap(map);
		});
    
    }        
}

말씀하신 자료 읽어봤습니다.
document.createElement 로 HTMLElement 를 구성후 다시 content로 넘겨준다는것은 알겠으나

var content = document.createElement(‘div’); 이 div안에 content내용을 넣으라는 말씀인지 잘모르겠습니다.

또한 foreach 사용시 오류가 발생합니다.
알려주신예제보며 조금더 붙혀 봤습니다.`// 마커이미지의 주소와, 크기, 옵션으로 마커 이미지를 생성하여 리턴하는 함수입니다
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() {

for (var i = 0; i < coffeePositions.length; i++) {  
    
    var imageSize = new kakao.maps.Size(22, 26),
        imageOptions = {  
            spriteOrigin: new kakao.maps.Point(10, 0),    
            spriteSize: new kakao.maps.Size(36, 98),
       		};     
    
    // 마커이미지와 마커를 생성합니다
    var markerImage = createMarkerImage(markerImageSrc, imageSize, imageOptions),    
        marker = createMarker(coffeePositions[i], markerImage);  
    
   
    // 생성된 마커를 커피숍 마커 배열에 추가합니다
    coffeeMarkers.push(marker);

}
};
/*
coffeeMarkers.forEach(function(cof){
var overlay = new kakao.maps.CustomOverlay({
content: content,
position: coffeeMarkers
});

var content = document.createElement('div');

var closeBtn = document.createElement('button');
  closeBtn.appendChild(document.createTextNode('닫기'));
  closeBtn.onclick = function() { customOverlay.setMap(null); };
  content.appendChild(closeBtn);
  
  overlay.setContent(content);
  overlay.setMap(map);

});
*/
for(var i=0; i<coffeeMarkers.length; i++){
//오버레이 생성
var overlay = new kakao.maps.CustomOverlay({
zindex:1,
content: content,
position: coffeeMarkers[i].getPosition()
});

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

overlay.setContent(content);

kakao.maps.event.addListener(coffeeMarkers[i], 'click', function(o) {
	return function() {
		o.setMap(map);
	}
}(overlay));

}
function closeOverlay() {
overlay.setMap(null);
}

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

forEach문에서 CustomOverlay생성 시
content 변수 선언 전에 content를 적용하고 있으며
position 값도 잘못 설정하고 있습니다.

마커를 모두 생성한 다음 오버레이를 생성할 수 있게 구현해주시고
아래 코드 참고해주세요.

coffeeMarkers.forEach(function(cof){
    var overlay = new kakao.maps.CustomOverlay({
        position: cof.getPosition()
        // content: content,
        // position: coffeeMarkers
    });

    var content = document.createElement('div');
    var closeBtn = document.createElement('button');
    closeBtn.appendChild(document.createTextNode('닫기'));
    closeBtn.onclick = function() { overlay.setMap(null); };
    content.appendChild(closeBtn);

    overlay.setContent(content);
    overlay.setMap(map);
});

해결되었습니다 감사합니다!!! 건강하세요!

좋아요 1