현재 마커별로 인포 윈도우에 다른 내용을 담고 있습니다.
다른 마커를 클릭하게 되면 기존 마커의 인포 윈도우가 닫혔으면 하는데 어떤식으로 해야 할지 모르겠습니다…ㅠㅠ
작업한 코드는 아래와 같습니다.
var placeOverlay = new kakao.maps.CustomOverlay({zIndex:1}),
contentNode = document.createElement(‘div’),
markers = [],
currCategory = ‘’;
var mapContainer = document.getElementById('map'),
mapOption = {
center: new kakao.maps.LatLng(36.533672, 127.270254),
level: 8,
mapTypeId : kakao.maps.MapTypeId.ROADMAP
};
var map = new kakao.maps.Map(mapContainer, mapOption);
var clusterer = new kakao.maps.MarkerClusterer({
map: map,
averageCenter: true,
minLevel: 6,
styles: [{
width : '60px', height : '60px',
background: 'rgba(75, 175, 75, .8)',
borderRadius: '30px',
color: 'white',
textAlign: 'center',
fontWeight: 'bold',
lineHeight: '61px'
}]
});
// 지도 타입 변경 컨트롤을 생성한다
var mapTypeControl = new kakao.maps.MapTypeControl();
// 지도의 상단 우측에 지도 타입 변경 컨트롤을 추가한다
map.addControl(mapTypeControl, kakao.maps.ControlPosition.TOPRIGHT);
// 지도에 확대 축소 컨트롤을 생성한다
var zoomControl = new kakao.maps.ZoomControl();
// 지도의 우측에 확대 축소 컨트롤을 추가한다
map.addControl(zoomControl, kakao.maps.ControlPosition.RIGHT);
var imageSrc = 'https://img.icons8.com/clouds/100/000000/hospital.png',
imageSize = new kakao.maps.Size(60, 60),
imageOption = {offset: new kakao.maps.Point(27, 69)};
var markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize, imageOption);
var markers = [];
var 데이터 = [
<c:forEach items="${organes}" var="organ">
[ 배열로 값 가져옴
],
</c:forEach>
];
for (var i = 0; i < 데이터.length; i++ ) {
// 지도에 마커를 생성하고 표시한다.
var marker = new kakao.maps.Marker({
position: new kakao.maps.LatLng(데이터[i][0], 데이터[i][1]), // 마커의 좌표
map: map, // 마커를 표시할 지도 객체
image: markerImage // 마커에 이미지 추가
});
iwPosition = new kakao.maps.LatLng(데이터[i][0], 데이터[i][1]),
iwRemoveable = true; // removeable 속성을 ture 로 설정하면 인포윈도우를 닫을 수 있는 x버튼이 표시됩니다
// 인포윈도우를 생성하고 지도에 표시합니다
var infowindow = new kakao.maps.InfoWindow({
//map: map, // 인포윈도우가 표시될 지도
position : iwPosition,
content : 데이터[i][2],
removable : iwRemoveable
});
// 생성된 마커를 마커 저장하는 변수에 넣음
markers.push(marker);
// 마커에 mouseover 이벤트와 mouseout 이벤트를 등록합니다
// 이벤트 리스너로는 클로저를 만들어 등록합니다
// for문에서 클로저를 만들어 주지 않으면 마지막 마커에만 이벤트가 등록됩니다
kakao.maps.event.addListener(
marker,
'click',
makeClickListener(map, marker, infowindow)
);
}
// 클러스터러에 마커들을 추가합니다
clusterer.addMarkers(markers);
// 인포윈도우를 표시하는 클로저를 만드는 함수입니다
function makeClickListener(map, marker, infowindow) {
// 마커 위에 인포윈도우를 표시합니다
return function() {
infowindow.open(map, marker);
};
}
// 지도 위에 표시되고 있는 마커를 모두 제거합니다
function removeMarker() {
for ( var i = 0; i < markers.length; i++ ) {
markers[i].setMap(null);
}
markers = [];
}