안녕하세요.
카카오지도 api 보면서 여러개 기능 짜집기 하고있어요.
지금 마커 이미지 변경 + 다중 마커 + 클릭시 커스텀레이아웃
기능을 하고 있는데요
마커이미지변경 + 다중마커까지는 했습니다.
근데 클릭시 커스텀레이아웃 띄우는거와, 닫기버튼을 누르면 닫아지는 기능이 안되네요.
여기에 웬만한 커스텀레이아웃 관련 글을 다 봤는데…
제가 개발자가 아니라서 이해가 잘 안되네요.
닫기버튼을 content 안에 onclick 이벤트로 주지 말고
document.createElement 로 주라고 해서 거기까지는 적용을 했는데
2번째 레이아웃 버튼을 눌러도 첫번째꺼만 닫힙니다…
<script>
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng(35.173613, 126.872732), // 지도의 중심좌표
level: 5 // 지도의 확대 레벨
};
var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
// 빨강색 마커가 표시될 좌표 배열입니다
var redPositions = [
{
title: '123',
address: '광주 서구 동림2지구길 45',
website: 'https://www.web778.com/wp_main/index.html',
logo: '../wp_images/map03_wp.png',
latlng: new kakao.maps.LatLng(35.17092531225699, 126.87376226314855)
},
{
title: '대자중학교',
address: '광주 서구 하남대로680번길 27 대자중학교',
website: 'https://school.iamservice.net/organization/11169',
logo: '../wp_images/map03_deaja.png',
latlng: new kakao.maps.LatLng(35.173613, 126.872732)
}
];
for (var i = 0; i < redPositions.length; i ++) {
var imageSrc = '../wp_images/map_red.png'; // 마커이미지의 주소입니다
var imageSize = new kakao.maps.Size(34, 54); // 마커이미지의 크기입니다
// 마커의 이미지정보를 가지고 있는 마커이미지를 생성합니다
var markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize);
// 마커를 생성합니다
var marker = new kakao.maps.Marker({
map: map,
position: redPositions[i].latlng,
title: redPositions[i].title,
image: markerImage // 마커이미지 설정
});
var content = document.createElement('div');
content.className = 'overlay_box5';
content.innerHTML = "박스입니다.";
var jbBtn = document.createElement( 'button' );
jbBtn.className = 'close';
jbBtn.innerHTML = "닫기";
jbBtn.onclick= function(){ customOverlay.setMap(null); };
content.appendChild(jbBtn);
// 커스텀 오버레이를 생성합니다
var customOverlay = new kakao.maps.CustomOverlay({
map: map,
position: redPositions[i].latlng,
content: content
});
kakao.maps.event.addListener(marker, 'click', function(){
customOverlay.setMap(map);
});
}
</script>
이게 제가 api 샘플 보고 만든거에요.
2개 이상 하려면 배열도 들어가니 머리가 아프네요…