-
div/class를 클릭 할 때 해당 객체에 infowindow의 인덱스를 알아야 배열에서 찾을 수 있기 때문에
attributes 또는 편한 방식으로 값을 담아주세요. -
제가 링크 드린 소스에서
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>