여러개 마커에서 인포윈도우 질문입니다

  1. div/class를 클릭 할 때 해당 객체에 infowindow의 인덱스를 알아야 배열에서 찾을 수 있기 때문에
    attributes 또는 편한 방식으로 값을 담아주세요.

  2. 제가 링크 드린 소스에서 removable: true 적용해봤더니 잘 동작하네요.
    아래 소스 코드에 적용했습니다.

아래 소스코드 첨부했습니다.
여러 방법으로 기능 구현이 가능하기 때문에 참고용으로 봐주세요.

<!-- 지도를 표시할 div 입니다 -->
<div id="map" style="width:100%;height:350px;"></div>
<button id="kakao" onclick="openInfowindow(this)">카카오</div>
<button id="pond" onclick="openInfowindow(this)">생태연못</div>

<script>
var mapContainer = document.getElementById('map'), // 지도를 표시할 div 
    mapOption = { 
        center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
        level: 3 // 지도의 확대 레벨
    };

// 지도를 표시할 div와  지도 옵션으로  지도를 생성합니다
var map = new kakao.maps.Map(mapContainer, mapOption); 

var positions = [
    { title: '카카오', latlng: new kakao.maps.LatLng(33.450705, 126.570677) },
    { title: '생태연못', latlng: new kakao.maps.LatLng(33.450936, 126.569477) }
];

var markers = [];
var infowindows = [];
positions.forEach(function(data) {
	// 마커를 생성합니다
	var marker = new kakao.maps.Marker({
    	position: data.latlng,
        map: map
	});

    // 인포윈도우를 생성합니다
    var infowindow = new kakao.maps.InfoWindow({
        position : marker.getPosition(),
        removable: true,
        content : '<div style="padding:5px;">'+data.title+'</div>'
    });

    // 생성된 인포윈도우를 배열에 담아줍니다.
    infowindows.push(infowindow);
    
    // 생성된 마커를 배열에 담아줍니다.
    markers.push(marker);

    // 인포윈도우, 마커 인덱스
    var idx = infowindows.length - 1;
    
    // 마커에 해당하는 인포윈도우 index를 저장합니다.
    marker.idx = idx;
    
    // Dom에 해당하는 인포윈도우 index를 저장합니다.
    setDomIndex(data.title, idx);

	kakao.maps.event.addListener(marker, 'click', function(mouseEvent) {
        allInfowindowClose();

        // 마커에 해당되는 infowindow를 열어줍니다.
        var infowindow = infowindows[this.idx];
        infowindow.open(map, this);
    });
});

// 모든 infowindow를 닫아줍니다.
function allInfowindowClose() {
    for(var i=0; i<infowindows.length; i++) {
        var infowindow = infowindows[i];
        infowindow.close();
    }
}
function setDomIndex(title, idx) {
    var dom;
    
    if(title === '카카오') {
		dom = document.getElementById('kakao');
    } else if(title === '생태연못') {
		dom = document.getElementById('pond');
    }
    
    dom.setAttribute('idx', idx);
}
    
function openInfowindow(button) {
    allInfowindowClose();
    
    var idx = button.getAttribute('idx');
    var infowindow = infowindows[idx];
    var marker = markers[idx];
    
    // 인포윈도우를 지도에 올립니다.
    //infowindow.open(map);
    
	// 마커 위에 인포윈도우를 표시합니다. 
    // 두번째 파라미터인 marker를 넣어주지 않으면 지도 위에 표시됩니다
    infowindow.open(map, marker);
    
}

</script>
1개의 좋아요