이때까지 친절한답변 정말감사합니다 !! 마지막으로 한가지만여쭤봐도될까요…
[35.958783, 126.957487, '<div class="infowindow_box">' +
'<div class="infowindow_title">test03</div>' +
'<div class="infowindow_font">· 주소</div>' +
'<div class="infowindow_font">· TEL</div>' +
'<div class="infowindow_font">· 영업시간</div>' +
'</div>',
],
기존에 이런식으로 안에서 클래스를만들어서 인포윈도우를디자인했는대 알려주시예시대로 바꾸고난뒤 title안에 div가 들어가면 정상작동이안되서요… 다른방법으로 넣어야하는건가요?;;
{ title: '<div class="infowindow_box">' +
'<div class="infowindow_title">test01</div>' +
'<div class="infowindow_font">· 주소</div>' +
'<div class="infowindow_font">· TEL </div>' +
'<div class="infowindow_font">· OPEN</div>' +
'</div>',
latlng: new kakao.maps.LatLng(37.495081, 127.035395)
},
//마커 및 인포윈도우 생성과정입니다.
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>'+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 === 'test01') {
dom = document.getElementById('btn01');
} else if(title === 'test02') {
dom = document.getElementById('btn02');
}
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);
}
// 컨트롤러
var zoomControl = new kakao.maps.ZoomControl();
map.addControl(zoomControl, kakao.maps.ControlPosition.RIGHT);
현재사용하고있는 소스입니다…
인포윈도우에서 문자열을 content로하여 DOM Element를 만들어내는 시점은
infowindow.open(map, marker) 입니다.
document.getElementById('id-for-something') 를 호출하는 시점에는
아직 인포윈도우의 Element가 DOM 트리에 속해있지 않기 때문에
셀렉팅이 불가능한 상태입니다.
질문자분의 코드는
예제 코드에 살을 붙여가다보니 전체적으로 어려운 방향으로 나아가고 있습니다.
아래에 조금 더 정제된 예제 코드를 첨부합니다.
돌아가는지는 검증을 하지 않아서 모르겠고,
대충 컨셉으로 이해해 주시고 참고 부탁드립니다.
var infos = [];
positions.forEach(function(data, idx) {
var marker = new kakao.maps.Marker(/*...*/);
var info = new kakao.maps.InfoWindow( /*...*/ );
infos.push(info);
var openInfo = function() {
infos.forEach(function(each) { each.close(); }); // close all infos
info.open(map, marker); // open target info
};
// 여기까진 기존과 유사합니다.
kakao.maps.event.addListener(marker, 'click', openInfo);
// 여기서 직접 버튼을 만들고
var btn = document.createElement('button');
// 원하는 곳(여기서는 document.body에 해당하는)에 추가하세요.
document.body.appendChild(btn);
// 혹은 idx값을 사용하여 이미 만들어진 btn을 셀렉팅 할 수도 있습니다.
// var btn = document.getElementById('btn0' + (idx + 1)); // idx는 0번부터 시작하므로...
// 그리고 이벤트를 등록하세요.
btn.onclick = openInfo;
});
넓게 보면 API의 기능에 관한 질문이라고 볼 수 있겠지만
이미 몇개의 답변을 받으셨고, 기본 로직은 문서/샘플에 모두 나와 있으니
아마 그걸 응용하신다면 충분히 구현 가능한 로직입니다. 화이팅
1개의 좋아요
말씀하신대로 구현을했는대 처음과똑같이 마커를클릭시 인포윈도우가 실행되네요;;
var infos = [];
positions.forEach(function(data, idx) {
// 마커를 생성합니다
var marker = new kakao.maps.Marker({
position: data.latlng,
map: map
});
// 인포윈도우를 생성합니다
var info = new kakao.maps.InfoWindow({
position : marker.getPosition(),
removable : true,
content : '<div>'+data.title+'</div>'
});
infos.push(info);
var openInfo = function() {
infos.forEach(function(each) { each.close(); }); // close all infos
info.open(map, marker); // open target info
};
kakao.maps.event.addListener(marker, 'click', openInfo);
// 여기서 직접 버튼을 만들고
var btn = document.createElement('btn01');
// 원하는 곳(여기서는 document.body에 해당하는)에 추가하세요.
document.body.appendChild(btn);
// 그리고 이벤트를 등록하세요.
btn.onclick = openInfo;
});
버튼을 직접만들고 거기에 body에있는 id를 입력하는게 아닌가요?;;
맨 처음 질문으로 주신 코드를 보면
마커를 클릭해도 인포윈도우가 나오고
버튼을 클릭해도 인포윈도우가 나오는 로직입니다.
저는 원래 로직을 최대한 유지한 채로 버튼을 추가(혹은 기존 버튼에 이벤트 바인딩)하는 코드를 알려드린 것입니다.
필요하지 않은 이벤트 바인딩 코드는 삭제하시면 됩니다.
document.createElement는 HTML Element를 만드는 API입니다.
보통 매개변수로는 ‘div’, ‘button’, ‘input’, ‘span’ 등, HTML tag name을 넣습니다
말씀하신 id 입력해야 하는 API는 document.getElementById 입니다.
아하…
var btn = document.getElementById('btn01' + (idx + 1));
(id + (인포윈도우 idx+1 ~2)) 이렇게 들어가는게 맞는건가요? 넣어도동작이안되서…
아이디가 btn01인 버튼 Element를 찾는다면 아래와 같이 선언하시면 됩니다.
var btn = document.getElementById('btn01');
var infos = [];
positions.forEach(function(data, idx) {
// 마커를 생성합니다
var marker = new kakao.maps.Marker({
position: data.latlng,
map: map
});
// 인포윈도우를 생성합니다
var info = new kakao.maps.InfoWindow({
position : marker.getPosition(),
removable : true,
content : '<div>'+data.title+'</div>'
});
infos.push(info);
var openInfo = function() {
infos.forEach(function(each) { each.close(); }); // close all infos
info.open(map, marker); // open target info
};
kakao.maps.event.addListener(marker, 'click', openInfo);
// id로 인포윈도우를 지정합니다.
var btn = document.getElementById('btn01');
var bbq = document.getElementById('bbq02');
// 그리고 이벤트를 등록합니다.
btn.onclick = openInfo;
bbq.onclick = openInfo;
});
getElementById 쪽에 id를 입력하고 id클릭시
onclick으로 인포를 불러오는형식이아닌가요?;; 제가 아직개발쪽에는 이해가부족해서 많이힘든부분이있네요;;
전에답변해주신부분에서는 ID 클릭시 인포가뜨긴떳는대 title에 클래스가안먹혔는대 이코드부분에서는 클래스는 다들어가는대 클릭시 인포가뜨질않네요…
1개의 좋아요
이전 답변드린 로직이 빠져있습니다.
버튼을 클릭하고 open 할 인포윈도우를 배열에서 찾아야 합니다.
배열에서 찾으려면 배열에 담긴 인포윈도우의 index 번호를 HTML Element가 알아야겠죠.
현재 info.open(map, marker)는 info를 못 찾아서 인포윈도우 자체가 안 뜰 거에요.
전에 드린 코드와 해당 내용 참고하셔서 구현하시면 될 것 같습니다.
윗분이 알려주신 로직이랑 조금달라서 어떻게 같이써야하는지 많이햇갈리네요
lea 분께서 알려주신 로직은 인포윈도우를 setDomindex에 저장해서 document.getElementById id로 클릭시 title에 써있는 인포윈도우를 불러오는형식인거 같은대
doji 분께서 알려주신 로직은 어떤식으로 저장되어 클릭시 표출되는지 이해를잘못했습니다…
lea 분께서 전에알려주신 로직에 title내에 div만 먹히면 되는상황이였는대 다시 다른로직으로 사용할려니 이것저것 햇갈리는것같아요…
제 코드에 대한 답변으로해서 더 혼동을 드렸네요.
죄송합니다.
@doji.doo가 알려드린 방법으로 적용하시려면 아래 코드 참고해주세요.
<!-- 지도를 표시할 div 입니다 -->
<div id="map" style="width:100%;height:350px;"></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 infos = [];
positions.forEach(function(data) {
// 마커를 생성합니다
var marker = new kakao.maps.Marker({
position: data.latlng,
map: map
});
// 인포윈도우를 생성합니다
var info = new kakao.maps.InfoWindow({
position : marker.getPosition(),
removable: true,
content : '<div style="padding:5px;">'+data.title+'</div>'
});
// 생성된 인포윈도우를 배열에 담아줍니다.
infos.push(info);
var openInfo = function() {
infos.forEach(function(each) {
each.close();
}); // close all infos
info.open(map, marker); // open target info
};
// 여기서 직접 버튼을 만들고
var btn = document.createElement('button');
btn.innerText = data.title;
// 원하는 곳(여기서는 document.body에 해당하는)에 추가하세요.
document.body.appendChild(btn);
// 그리고 이벤트를 등록하세요.
btn.onclick = openInfo;
});
</script>
만약 제가 드린 코드를 이해하고 의도를 파악하셨다면
애초에 어떤 기능을 원하셨든 간에 이렇게 헤멜 이유가 없을 것 같습니다.
lea.ju와 제가 알려드린 코드가 설령 다르다고 해도
그 접근법이나 일반적인 솔루션 용도로는 충분하고도 남는 답변입니다.
실제 클라이언트 레벨에서 작성하신 코드를 봤을 때,
질문자 분의 '직접 구현’이라 불릴 만 한 부분은 거의 없습니다.
예제 코드 베이스에 답변받은 내용을 넣은 것 뿐인걸요.
지금까지 작성된 코드를 이해하셨다면 위와 같은 질문을 하지 않으셨을 것이라 생각됩니다.
해당 기능 구현에 필요한 코드나 지침은 모두 알려 드렸습니다.
만약 다 이해하지 못하셨다면 차근히 기본부터 이해하는 단계를 먼저 진행하시는게 맞습니다.
동작한다/안한다 수준의 질문/답변은 더 이상 의미가 없습니다.
질문자분의 실력 향상에 도움도 안 될 뿐더러
저희 또한 어디서 부터 모르시는지 모르니 알려드리는데 한계가 있습니다.
이렇게 질답을 계속하게 되면 질문자 본인이 생각하는 시간은 적어지게 되며
결국 저희가 모든 코딩을 해 드리는 결과가 나오게 될 겁니다.
그리고 이 이상은 지도 API 와 직접적으로 연관된 질문이 아니라고 판단됩니다.
지도 API와 관련된 질문은 환영입니다만
최초 질문으로부터 계속 이어지는 질문들에 대한 답변은 드리지 않을 것이니 양해 부탁드립니다.
