안녕하세요 카카오맵 html 질문입니다

카카오맵 API (지도/로컬)
2

첫 번째 방법으로는 마커 개수만큼 인포윈도우를 만들어 배열에 저장하고
마커에 생성한 인포윈도우의 인덱스를 저장하여
마커의 클릭 이벤트마다 인포윈도우를 찾아 노출하는 방식

두 번째 방법으로는 인포윈도우를 하나만 만들고
마커 클릭 이벤트 핸들러에서 위치, 내용을 지정하여 open 해주는 방식입니다.

소스 참고해주세요.

var positions = [
    [33.450705, 126.570677, '카카오'],
    [33.450936, 126.569477, '생태연못'],
    [33.450879, 126.569940, '텃밭'],
    [33.451393, 126.570738, '근린공원']
];

// 방법1
var infowindows = [];
positions.forEach(function(data) {
	// 마커를 생성합니다
	var marker = new kakao.maps.Marker({
    	position: new kakao.maps.LatLng(data[0], data[1]),
        map: map
	});

    // 인포윈도우를 생성합니다
    var infowindow = new kakao.maps.InfoWindow({
        position : marker.getPosition(),
        content : '<div style="padding:5px;">'+data[2]+'</div>'
    });

    // 생성된 인포윈도우를 배열에 담아줍니다.
    infowindows.push(infowindow);

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


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

        // 마커에 해당되는 infowindow를 열어줍니다.
        var infowindow = infowindows[this.infowindowIdx];
        infowindow.open(map, this);
    });
});

// 모든 infowindow를 닫아줍니다.
function allInfowindowClose() {
    for(var i=0; i<infowindows.length; i++) {
        var infowindow = infowindows[i];
        infowindow.close();
    }
}

//방법 2
/*var infowindow = new kakao.maps.InfoWindow();

for(var i=0; i<positions.length; i++) {
    var data = positions[i];

    // 마커를 생성합니다
	var marker = new kakao.maps.Marker({
    	position: new kakao.maps.LatLng(data[0], data[1]),
        map: map
	});

    marker.title = data[2];

    kakao.maps.event.addListener(marker, 'click', function(mouseEvent) {
        infowindow.setContent('<div>'+this.title+'</div>');
        infowindow.setPosition(this.getPosition());
        infowindow.open(map, this);
    });
}*/