여러개 마커에 인포윈도우생성 도움요청합니다 ㅠ

카카오맵 API (지도/로컬)
1 
//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',(map, marker, infowindow));
}

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

이렇게사용중인대 인포윈도가안뜨내요;; 어디가잘못된걸까요… 인포윈도우넣기전에는 클릭시 다른곳에 이동하면서 마커도나왔는대 넣고나니 그것도 먹통이됩니다…

2

인포윈도우 생성하는 부분에 InfoWindow로 수정해주세요.
또한, 이벤트에 함수명이 누락되었습니다.
아래와 같이 수정 부탁드립니다.
kakao.maps.event.addListener(marker,‘click’, makeClick(map, marker, infowindow));

3

감사합니다 ㅠㅠ 글자가틀렸던거군요…

1개의 좋아요
4

죄송한대 하나만더여쭤봐도될까요? 인포윈도우가 마커를클릭하는게아닌 body에있는 div나 class를 클릭했을시 표출되게 할수가있나요?

5

네 가능합니다.
배열로 인포윈도우를 관리하여 클릭한 버튼에서 표출시킬 인포윈도우의 인덱스를 안다면
클릭시 해당 인포윈도우를 찾아 표출할 수 있습니다.

아래 링크의 소스는 마커의 객체 확장으로 인포윈도우의 인덱스를 담은 예제입니다.
마커가 아닌 div dom에 값을 담아서 이와 비슷하게 구현하면 될 것 같습니다.

https://devtalk.kakao.com/t/html/99548/2?u=lea.ju