여러개 마커에 인포윈도우 띄울때 다른거 클릭시 기존꺼 자동으로 꺼지는 방식

카카오맵 API (지도/로컬)
1

여러개 마커에 인포윈도우를 띄었는데 x표시를 눌러도 꺼지는 방법도 있으면 좋겠고
다른 마커를 클릭시 자동으로 기존에 눌렀던게 꺼지고 새로 누른 마커만 인포윈도우를 띄우게 하는 방법이 있을까요??

2 
    var markerImage = createMarkerImage(bungmarkerImageSrc, imageSize, imageOptions),    
        marker = createMarker(bungPositions[i], markerImage);

    daum.maps.event.addListener(marker, 'click', (function(marker, i) {
         return function() {
             var infowindow = new daum.maps.InfoWindow({
                 content: '<a href="http://tbmap.smartplan.biz:8090/map/store.php?no=1" style="color:blue" target="_blank">'+bungname[i]+'</a>',
                 removable : true
             });
           infowindow.open(map, marker);
         }
     })(marker, i));

    bungMarkers.push(marker);        
}
3

인포윈도우 함수는 위에것입니다.
그리고 혹시 인포윈도우 창의 절대적 크기를 크게 하는 방법이 있나요?

질문을 많이드려서 죄송합니다. 항상 좋은 답변 감사드립니다.

4

인포윈도우는 단순한 정보를 담아내기 위해 사용합니다.
복잡한 정보와 스타일리쉬한 스타일을 표현하기 위해서는 CustomOverlay를 사용하셔야 합니다.

닫기가 가능한 커스텀 오버레이는 아래 예제를 참조해주시고.

다른것을 클릭했을 때 기존 것이 꺼지는 기능은
http://apis.map.daum.net/web/sample/categoryFromBounds/
이것을 참고해 주세요.

두 예제를 섞어서 사용하실 때 주의하실 점이 있습니다.
첫 번째 예제에서 닫기 함수는 전역적으로 하나만 쓰는데
만들어진 CustomOverlay는 여러개이기 때문입니다.
String으로 Content를 구성하면 이런 문제가 생기게 될 겁니다.
HTMLElement로 만들어서 Content를 구성하시고 각 Element에 DOM Event를 거는 방식으로 닫기 기능을 구현하셔야 합니다.

5

여러개 오버레이는 실행하였는데
닫기는 가능합니다.
근데 다른거 클릭시 자동으로 꺼지는 방식이
두번째 예제를 보아도 이해가 안되는데 도와주실수 있나요?

6

function createtakoMarkers() {
for (var i = 0; i < takoPositions.length; i++) {

    var imageSize = new daum.maps.Size(33, 40),
        imageOptions = { };       
 
    // 마커이미지와 마커를 생성합니다
    var markerImage = createMarkerImage(takomarkerImageSrc, imageSize, imageOptions),    
        marker = createMarker(takoPositions[i], markerImage);
     //타코야끼 인포 윈도우ㅇㅇ
    daum.maps.event.addListener(marker, 'click', (function(marker, i) {
         return function() {
             var infowindow = new daum.maps.InfoWindow({
                 content: '<div class="overlay_info"><a href="http://tbmap.smartplan.biz:8090/map/store.php" style="color:#949b15"  target="_blank">'+takoname[i]+'</a></div>',
                 removable : true
             });
           infowindow.open(map, marker);
         }
     })(marker, i));


    // 생성된 마커를 타코야끼 마커 배열에 추가합니다
    takoMarkers.push(marker);    
}

}

소스는이것입니다!! 답변 감사하겠습니다!!

1개의 좋아요
7

마커에 등록하는 클릭 이벤트 핸들러에서 인포윈도우를 만드시면 아니되옵니다. ㅠㅠ

두 가지 방법이 있겠는데요.
마커 갯수만큼 인포윈도를 만들어서
각각 다른 배열에
같은 인덱스에 저장하고
각각의 마커 클릭 이벤트마다 같은 인덱스의 인포윈도우를 노출하는 방식

다른 하나는 인포윈도 하나만 만들고
마커 클릭 이벤트 핸들러에서 InfoWindow.setContent와 InfoWindow.open 함수로 위치+컨텐츠를 동시에 바꿔주는 방식

첫 번째 방식이 유용할 때가 많고 직관적이기도 해서 추천드리지만,
일단 말씀하신 구현이라면 두 번째 방식이 한 번에 해결 가능합니다.

8

답변 감사합니다!!

두 번째 방식으로 우선 할려하는데
function createtakoMarkers() {
for (var i = 0; i < takoPositions.length; i++) {

    var imageSize = new daum.maps.Size(33, 40),
        imageOptions = { };       
 
    // 마커이미지와 마커를 생성합니다
    var markerImage = createMarkerImage(takomarkerImageSrc, imageSize, imageOptions),    
        marker = createMarker(takoPositions[i], markerImage);
     //타코야끼 인포 윈도우ㅇㅇ
    daum.maps.event.addListener(marker, 'click', (function(marker, i) {
         return function() {
             var infowindow = new daum.maps.InfoWindow({
                 removable : true
             });
           infowindow.open(map, marker);
     	infowindow.setContent('<div class="overlay_info"><a href="http://tbmap.smartplan.biz:8090/map/store.php" style="color:black"  target="_blank">'+takoname[i]+'</a></div>');
         }
     })(marker, i));


    // 생성된 마커를 타코야끼 마커 배열에 추가합니다
    takoMarkers.push(marker);    
}

}

이렇게해도 안되는데 어디가 문제일까요?? infowindow.open 밑에 infowindow.setContent를 넣었는데 안됩니다 ㅠㅠ

9

아으 감사합니다 ㅠㅠ 헤매고 있었는데 시간 단축했어요