인포윈도우창에 스타일을 적용했는데 기존창이 사라지지 않습니다

안녕하세요.
클러스터러를 사용하여 마지막 마커에 해당 장소 정보를 인포윈도우창에 보여주려고 합니다.

디자인된 인포윈도우 창을 적용했더니

인포윈도우테스트

이렇게 기본창이 사라지지않습니다.

iwRemoveable = true때문인줄알고 false로 변경해도 엑스만 사라질뿐 달라지는거 없더라구요.

----- 해당 소스 (소스가 안보여 부득이하게 <를 (로 수정하였습니다)—

var iwContent = ‘(div class=“modal_wrap”>(div class=“bg”>(/div>(div class=“modal_box”>(div class=“tit”> (h4>선택정보 자세히보기(/h4>(button class=“btn_close” type=“button”>(span class=“sr-only”>닫기(/span>(/button>(/div>’+
‘(div class=“jobpost_wrap”>(h5>기관명(/h5>(div class=“jobpost_left”>(div class=“logo”> (img src="/images/user/assets/defalt.jpg" alt=""> (/div>’+
’(div class=“job_post”>(/div>(/div>(div class=“jobpost_right”>(div class=“job_sider”>(/div>(/div> (/div>(/div> (/div>’,

                             iwRemoveable = false; // removeable 속성을 ture 로 설정하면 인포윈도우를 닫을 수 있는 x버튼이 표시됩니다

                             // 인포윈도우를 생성합니다
                             var infowindow = new kakao.maps.InfoWindow({
                                 content : iwContent,
                                 removable : iwRemoveable
                             });

제가 어떤 부분을 잘 못 썼는지 알려주시면 감사하겠습니다.

https://devtalk.kakao.com/t/ajax/81700/2?u=doji.doo

참고하세요.

답변 주신대로

var $body = $(’(div class=“modal_wrap”>(div class=“bg”>(/div>(div class=“modal_box”>(div class=“tit”> (h4>선택정보 자세히보기(/h4>(/div>(/div>(/div>’);

var iwContent = $body[0];

                             iwRemoveable = false; // removeable 속성을 ture 로 설정하면 인포윈도우를 닫을 수 있는 x버튼이 표시됩니다

                             // 인포윈도우를 생성합니다
                             var infowindow = new kakao.maps.InfoWindow({
                                 content : iwContent,
                                 removable : iwRemoveable
                             });

이런식으로 변경해 보았는데 똑같은 현상이 나타납니다.
이미지를 넣어보면 하얀 네모 박스 안에 이미지가 들어갑니다.
커스텀오버레이로 해야하는것인가요 ㅠㅠ…?

어떤 점이 잘못되었는지 잘 모르겠습니다 ㅠㅠ…

일단 커스텀 오버레이로 진행해 보세요.

아래와 같이 커스텀 오버레이를 작성하였습니다만

마커클러스터가 작동되질 않습니다.

콘솔에는 커스텀오버레이에 문제가 있다고 에러가 납니다.

어떤점을 수정해야하는지 알려주시면 감사하겠습니다.

Uncaught TypeError: Failed to execute ‘appendChild’ on ‘Node’: parameter 1 is not of type ‘Node’.
at I.c.Ud (kakao.js:128)
at new I (kakao.js:27)
at Object. (mapList.do:565) ->커스텀오버레이 생성부분.
at jquery-1.11.0.min.js:2
at Function.map (jquery-1.11.0.min.js:2)
at n.fn.init.map (jquery-1.11.0.min.js:2)
at Object.success (mapList.do:556)
at j (jquery-1.11.0.min.js:2)
at Object.fireWith [as resolveWith] (jquery-1.11.0.min.js:2)
at x (jquery-1.11.0.min.js:4)

---- 해당 소스 -----

//마커들을 저장할 변수
var markers = $(data.position).map(function(i, position) {

                            var marker = new kakao.maps.Marker({
                                 position : new kakao.maps.LatLng(data.position[i].latitudeAz,data.position[i].longitudeAz),
                                 clickable : true
                             });
                            
                            var content = $('<div class ="overlaybox"><span class="left"></span><span class="center")><h5 class="sidoCd">111</h5></span><span class="right"></span></div>');
                            
                            var overlay = new kakao.maps.CustomOverlay({
                                content: content,
                                map: map,
                                position: marker.getPosition()       
                            });

                            // 마커를 클릭했을 때 커스텀 오버레이를 표시합니다
                            kakao.maps.event.addListener(marker, 'click', function() {
                                overlay.setMap(map);
                            });
                            
                             //생성된 마커를 반환합니다.
                            return marker;
                             
                     });
                      
                        // 마커 클러스터러에 클릭이벤트를 등록합니다
                        // 마커 클러스터러를 생성할 때 disableClickZoom을 true로 설정하지 않은 경우
                        // 이벤트 헨들러로 cluster 객체가 넘어오지 않을 수도 있습니다
                        kakao.maps.event.addListener(clusterer, 'clusterclick', function(cluster) {

                            // 현재 지도 레벨에서 1레벨 확대한 레벨
                            var level = map.getLevel()-1;

                            // 지도를 클릭된 클러스터의 마커의 위치를 기준으로 확대합니다
                            map.setLevel(level, {anchor: cluster.getCenter()});
                        });
                    
                       //클러스터에 마커들을 저장합니다.
     			   clusterer.addMarkers(markers);

markers 배열에는 marker만 생성, 관리를 해주시고
customerOverlay 생성 부분은 따로 관리해주세요.

아래 링크 참고해주세요.

customerOverlay 를 따로 관리하라는 말씀이 잘 이해가 가지 않습니다.

커스텀오버레이를 따로 관리하면 포지션은 markers에 있는 포지션을 갖다써야하는것인지…

개념이 잘 서지 않습니다 ㅠㅠ…

마커를 클릭하면 디자인된 인포윈도우를 띄우고 싶었던것인데

클러스터러의 마커에 인포윈도우로는 구현하기 힘든것인가요?

이미 인포윈도의 기본 디자인이 존재하므로
인포윈도로 띄우시려면 이 인포윈도의 기본 디자인을 삭제하는 로직이 추가로 들어가야 합니다.
이렇게 귀찮은 짓을 할 바에는 커스텀 오버레이를 사용하시길 권하는 것이고요.

위의 코드에서 문제가 되는 부분은

var overlay = new kakao.maps.CustomOverlay({
     content: content[0], // <= 이 부분
     map: map,
     position: marker.getPosition()       
});

우선 인포윈도우에 삭제하는 로직이 들어가야 한다 하셔서

닫기가 가능한 커스텀 오버레이 샘플로 테스트를 하려고 합니다.

커스텀 오버레이에 포지션을 어떻게 잡아줘야할지 잘 모르겠습니다.

콘솔에 markers는 뜨는데

markers.get은 안된다고 떠서요ㅠㅠㅠㅠㅠㅠㅠㅠ

markers안에 넣으면 클러스터러 생성과 동시에 오버레이 수백개가 겹쳐나오네요…;;;

자꾸 번거롭게 해드려 죄송합니다…

---- 해당 소스 -----

//마커들을 저장할 변수
var markers = $(data.position).map(function(i, position) {
//마커를 하나 새로 만드는데, 위치값을 지정하고 클릭이 가능하게 설정함.
var marker = new kakao.maps.Marker({
position : new kakao.maps.LatLng(data.position[i].latitudeAz,data.position[i].longitudeAz),
clickable : true
});

                             //생성된 마커를 반환합니다.
                            return marker;
                             
                     });
                        console.log(markers);
                        
                     // 커스텀 오버레이에 표시할 컨텐츠 입니다
                     // 커스텀 오버레이는 아래와 같이 사용자가 자유롭게 컨텐츠를 구성하고 이벤트를 제어할 수 있기 때문에
                     // 별도의 이벤트 메소드를 제공하지 않습니다 
                     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="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="http://www.kakaocorp.com/main" target="_blank" class="link">홈페이지</a></div>' + 
                                 '            </div>' + 
                                 '        </div>' + 
                                 '    </div>' +    
                                 '</div>';

                     // 마커 위에 커스텀오버레이를 표시합니다
                     // 마커를 중심으로 커스텀 오버레이를 표시하기위해 CSS를 이용해 위치를 설정했습니다
                     var overlay = new kakao.maps.CustomOverlay({
                         content: content,
                         map: map,
                         position: markers.getPosition()       
                     });

                     // 마커를 클릭했을 때 커스텀 오버레이를 표시합니다
                     kakao.maps.event.addListener(marker, 'click', function() {
                         overlay.setMap(map);
                     });
1개의 좋아요

map 함수 안에서 return marker; 하기 전,
커스텀 오버레이도 만들고 이벤트도 걸어주셔야 합니다.

return marker; 는 markers 안에 있어서
이 전에 만들면 클러스터러 생성과 동시에
모든마커에 커스텀오버레이가 마커갯수만큼 겹쳐 나옵니다…ㅠㅠ

그걸 의도한 것이니 당연히 그 만큼 생성되는게 맞는거고요.

var overlay = new kakao.maps.CustomOverlay({
    content: content,
    // map: map, <= 이 옵션을 지워주세요. overlay.setMap(map) 한 코드와 같은 의미입니다.
    position: markers.getPosition()       
});

최적화를 하기 위해서는
커스텀 오버레이를 하나만 만들어서
내부 컨텐츠만 바꿔 사용하는 방법도 있습니다.

혹시 몰라서 이 링크도 첨부해드려요.
윗 댓글처럼 하나의 overlay를 전역으로 두고
marker가 클릭될 때 위치와 내용을 바꿔 사용할 수 있습니다.

https://devtalk.kakao.com/t/topic/70729/2

아 map:map을 지우니 잘 뜹니다^^!!!
언제나 친절한 답변 진심으로 감사합니다.
좋은 주말 보내세요^^

1개의 좋아요

커스텀 오버레이를 마커에 올리니
마커 아래에 붙고 있습니다.
마커 윗부분으로 올릴수는 없는지요?
오버레이가 너무 커서 그런걸까요 ㅠㅠ…

두번째 마커를 선택하였습니다…

커스텀오버레이테스트

문서를 살펴보세요.

그리고 해당 정보 창이 매우 크다면
굳이 커스텀 오버레이를 쓸 필요가 있을지에 대해 고민해 보세요.
그냥 고정된 위치에 모달뷰를 띄우는게 나을 수 있습니다.