센터명,전화번호 및 위,경도가 삽입되어있는 db파일을 불러와서 마커를 찍고 그에 맞는 센터명,전화번호등을 띄우는 코드

[FAQ] 지도/로컬 API 문의 전 꼭 읽어 주세요.
https://devtalk.kakao.com/t/faq-api/125610

안녕하십니까 저는 2학년 공대생입니다. 다름이 아니고 제가 푸드뱅크의 데이터들을 db로 저장해놓았는데 이 db파일을 불러와서 마커를 찍고, 그 마커를 클릭하였을때 센터명과 전화번호등등을 띄우고싶습니다. 제가 짠 코드가있는데 대체 뭐가 문젠지 전혀 알수가없어서 지푸라기라도 잡는 심정에 글을 작성해봅니다 제발 도와주세요 간곡히 부탁드립니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>다음 지도 API</title>
</head>
<body>
    <div id="map" style="width:1500px;height:1100px;"></div>

    <script src="//dapi.kakao.com/v2/maps/sdk.js?appkey=api키삽입하는부분"></script>
    <script>
        var mapContainer = document.getElementById('map');
        var mapOption = {
            center: new kakao.maps.LatLng(36.56682, 126.97865),
            level: 13,
            mapTypeId: kakao.maps.MapTypeId.ROADMAP
        };

        var map = new kakao.maps.Map(mapContainer, mapOption);

        var mapTypeControl = new kakao.maps.MapTypeControl();
        map.addControl(mapTypeControl, kakao.maps.ControlPosition.TOPRIGHT);

        var zoomControl = new kakao.maps.ZoomControl();
        map.addControl(zoomControl, kakao.maps.ControlPosition.RIGHT);

        var dbPath = 'centerdata.db';

        var db = openDatabase(dbPath, '1.0', '', 1024 * 1024);
        db.transaction(function (tx) {
            tx.executeSql('SELECT latitude, longitude, 지원센터명 FROM centers', [], function (tx, result) {
                var len = result.rows.length;
                for (var i = 0; i < len; i++) {
                    var item = result.rows.item(i);
                    var latLng = new kakao.maps.LatLng(item.latitude, item.longitude);

                    var marker = new kakao.maps.Marker({
                        position: latLng,
                        map: map
                    });

                    var infowindow = new kakao.maps.InfoWindow({
                        content: '<div style="padding:5px;">' + item.centerName + '</div>'
                    });
                    infowindow.open(map, marker);
                }
            });
        });
    </script>
</body>
</html>

마커와 인포윈도우를 생성하는 로직은 문제없어서
DB데이터를 잘 가져왔다면 마커와 인포윈도우는 정상 표시가 되겠네요.

마커를 클릭했을 때 인포윈도우를 표시하려면 아래 문서 참고해서 마커 클릭 이벤트를 등록해주세요.
https://apis.map.kakao.com/web/documentation/#Marker_click

그리고 지금 코드에서 이벤트를 등록하게 되면 마지막 데이터의 인포윈도우만 열릴 텐데요.
for문의 스코프 유지를 위해서 변수를 es6의 let으로 선언하거나
반복문을 forEach문으로 대체해주세요.