항상 친절하게 답변해주셔서 감사합니다.
마커에 클릭 이벤트 등록하기 예제와 여러개 마커 제어하기 활용해 실습하던 중 전체 버튼을 첫번째로 클릭 할 시 인포윈도우가 제주도 해안가에 뿌려지는 상황이 발생합니다.
생각한 기능은 구현이 됐으나 위에 에러 때문에 많이 당황스럽네요
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>여러개 마커 제어하기</title>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 앱키"></script>
</head>
<body>
<div id="root"></div>
<div id="map" style="width:100%;height:350px;"></div>
<p>
<button onclick="showMarkers()">전체</button>
<button onclick="hideMarkers()">채용중</button>
</p>
<script>
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
level: 3 // 지도의 확대 레벨
};
var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
var hireMarkers = [];
var position = new kakao.maps.LatLng(33.450701, 126.570667);
// 마커를 생성합니다
var marker = new kakao.maps.Marker({
position: position,
clickable: true // 마커를 클릭했을 때 지도의 클릭 이벤트가 발생하지 않도록 설정합니다
});
// 아래 코드는 위의 마커를 생성하는 코드에서 clickable: true 와 같이
// 마커를 클릭했을 때 지도의 클릭 이벤트가 발생하지 않도록 설정합니다
// marker.setClickable(true);
// 마커를 지도에 표시합니다.
marker.setMap(map);
hireMarkers.push(marker);
function setMarkers(map) {
for (var i = 0; i < hireMarkers.length; i++) {
hireMarkers[i].setMap(map);
}
}
function showMarkers() {
setMarkers(map)
infowindow.setMap(map);
}
function hideMarkers() {
setMarkers(null);
infowindow.setMap(null);
}
// 마커를 클릭했을 때 마커 위에 표시할 인포윈도우를 생성합니다
var iwContent = '<div style="padding:5px;">Hello World!</div>', // 인포윈도우에 표출될 내용으로 HTML 문자열이나 document element가 가능합니다
iwRemoveable = true; // removeable 속성을 ture 로 설정하면 인포윈도우를 닫을 수 있는 x버튼이 표시됩니다
// 인포윈도우를 생성합니다
var infowindow = new kakao.maps.InfoWindow({
content : iwContent,
removable : iwRemoveable
});
// 마커에 클릭이벤트를 등록합니다
kakao.maps.event.addListener(marker, 'click', function() {
// 마커 위에 인포윈도우를 표시합니다
infowindow.open(map, marker);
});
</script>
</body>
</html>