여러개 마커에서 인포윈도우 질문입니다

dlfldk01 · 3월 9, 2020, 4:54오전

//kakaomap 연동

var mapContainer = document.getElementById('map'), // 지도를 표시할 div  
    mapOption = { 
        center: new kakao.maps.LatLng(37.495081, 127.035395), // 지도의 중심좌표
        level: 3 // 지도의 확대 레벨
    };

var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
 
// 지도확대축소 코드
map.setZoomable(false);

// 마커가 표시될 위치입니다
var positions = [
    {
        content: '<div>test</div>', 
        latlng: new kakao.maps.LatLng(37.495081, 127.035395)
    },
    {
        content: '<div>test</div>', 
        latlng: new kakao.maps.LatLng(37.548345, 127.061305)
    },
    {
        content: '<div>test</div>', 
        latlng: new kakao.maps.LatLng(37.464012, 126.672587)
    },
    {
        content: '<div>test</div>', 
        latlng: new kakao.maps.LatLng(35.227406, 128.910075)
    },
    {
        content: '<div>test</div>', 
        latlng: new kakao.maps.LatLng(35.214539, 128.586417)
    },
    {
        content: '<div>test</div>', 
        latlng: new kakao.maps.LatLng(34.895128, 128.625762)
    },
    {
        content: '<div>test</div>', 
        latlng: new kakao.maps.LatLng(35.054016, 128.967956)
    },
    {
        content: '<div>test</div>', 
        latlng: new kakao.maps.LatLng(35.822750, 127.122306)
    },
    {
        content: '<div>test</div>', 
        latlng: new kakao.maps.LatLng(35.958783, 126.957487)
    },
    {
        content: '<div>test</div>', 
        latlng: new kakao.maps.LatLng(35.490359, 129.425336)
    },
];




// 클릭시 해당위치로 이동
function panTo01() {            
    // test 로 이동할 위도 경도 위치를 생성합니다 
    var moveLatLon = new kakao.maps.LatLng(37.495081, 127.035395);
    
    // 지도 중심을 이동 시킵니다
    map.panTo(moveLatLon);
}

function panTo02() {
    // test로 이동할 위도 경도 위치를 생성합니다 
    var moveLatLon = new kakao.maps.LatLng(37.548345, 127.061305);

    // 지도 중심을 부드럽게 이동시킵니다
    map.panTo(moveLatLon);            
}    

function panTo03() {
    // test 로 이동할 위도 경도 위치를 생성합니다 
    var moveLatLon = new kakao.maps.LatLng(37.464012, 126.672587);
    
    // 지도 중심을 부드럽게 이동시킵니다
    map.panTo(moveLatLon);            
}    

function panTo04() {
    // test 로 이동할 위도 경도 위치를 생성합니다 
    var moveLatLon = new kakao.maps.LatLng(35.227406, 128.910075);

    // 지도 중심을 부드럽게 이동시킵니다
    map.panTo(moveLatLon);            
}   

function panTo05() {
    // test 로 이동할 위도 경도 위치를 생성합니다 
    var moveLatLon = new kakao.maps.LatLng(35.214539, 128.586417);

    // 지도 중심을 부드럽게 이동시킵니다
    map.panTo(moveLatLon);            
}   

function panTo06() {
    // test 로 이동할 위도 경도 위치를 생성합니다 
    var moveLatLon = new kakao.maps.LatLng(34.895128, 128.625762);

    // 지도 중심을 부드럽게 이동시킵니다
    map.panTo(moveLatLon);            
}   

function panTo07() {
    // test 로 이동할 위도 경도 위치를 생성합니다 
    var moveLatLon = new kakao.maps.LatLng(35.054016, 128.967956);

    // 지도 중심을 부드럽게 이동시킵니다
    map.panTo(moveLatLon);            
}   

function panTo08() {
    // test 로 이동할 위도 경도 위치를 생성합니다 
    var moveLatLon = new kakao.maps.LatLng(35.822750, 127.122306);

    // 지도 중심을 부드럽게 이동시킵니다
    map.panTo(moveLatLon);            
}

function panTo09() {
    // test 로 이동할 위도 경도 위치를 생성합니다 
    var moveLatLon = new kakao.maps.LatLng(35.958783, 126.957487);

    // 지도 중심을 부드럽게 이동시킵니다
    map.panTo(moveLatLon);            
}

function panTo10() {
    // test 로 이동할 위도 경도 위치를 생성합니다 
    var moveLatLon = new kakao.maps.LatLng(35.490359, 129.425336);

    // 지도 중심을 부드럽게 이동시킵니다
    map.panTo(moveLatLon);            
}

//마커 및 인포윈도우 생성과정입니다.
for (var i = 0; i < positions.length; i ++) {
    // 마커를 생성합니다
    var marker = new kakao.maps.Marker({
        map: map, // 마커를 표시할 지도
        position: positions[i].latlng // 마커의 위치
    });
    
    // 인포윈도우를 생성합니다
	var infowindow = new kakao.maps.InfoWindow({
    	content: positions[i].content, // 인포윈도우에 표시할 내용
        removable : true
    });
	
    kakao.maps.event.addListener(marker,'click',makeClick(map, marker, infowindow));
}

// 인포윈도우를 표시하는 클로저를 만드는 함수입니다.
function makeClick(map, marker, infowindow){
    return function(){
        infowindow.open(map, marker);
    };
};

사용한 소스내용입니다. 마커를 클릭시 인포윈도우가 나오는게아닌 body에있는 div 나 class 를 클릭했을시 나오게할수가있나요?

lea.ju · 3월 9, 2020, 5:50오전

아래 링크로 답변드렸습니다.
https://devtalk.kakao.com/t/topic/99587/5?u=lea.ju

dlfldk01 · 3월 9, 2020, 6:26오전

감사합니다 !! ㅠ

dlfldk01 · 3월 9, 2020, 9:27오전

추가적으로 몆가지 질문좀부탁드려도될까요?;; 이해가잘되지않아서…

// 마커에 해당하는 인포윈도우 index를 저장합니다.
marker.infowindowIdx = infowindows.length - 1;

kakao.maps.event.addListener(marker, 'click', function(mouseEvent) {
    allInfowindowClose();

마커가 아닌 div dom값이 어떤것인지;; index를 저장하는부분 또는 click 앞에 마커를 div id 나 class로 바꾸면된다는뜻인가요?
바꾸기전에는 x버튼으로 닫는기능이있었는대 이렇게바꾸니 없어서 removable : true 를 넣어봤는대 지도가뜨질않내요; 닫기버튼을 따로넣는방법이있을까요? 닫기가가능한 커스텀오버레이에 있는 닫기버튼을 응용해볼려고해도 잘되지가 않네요;;

lea.ju · 3월 10, 2020, 12:49오전

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>

dlfldk01 · 3월 10, 2020, 5:08오전

친절한답변 정말감사합니다 !! 마지막으로 한가지만여쭤봐도될까요…

[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);

현재사용하고있는 소스입니다…