여러 마커에 각각의 인포인도우를 설정하고 싶습니다

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

마커 생성까진 성공하였는데 클릭 이벤트가 도저히 구현되지 않네요 , ㅜ 저는 jason에서 데이터를 추출해서 하고 싶은데 카카오 가이드에는 그러지 않고 인포윈도우도 하나만 생성하고 있어 참고하는 것에 제한이 있어 여러가지방법으로 하다 이렇게 문의 드려봅니다. 제 코드를 보고 조언 해주시면 감사하겠습니다 ㅜ (하다 안되는 것은 주석처리하였습니다)

javascript

// 지도
function showMap(positions) {
  let mapContainer = document.getElementById("map"); // 지도를 표시할 div

  let mapOption = {
    center: new kakao.maps.LatLng(37.580966, 127.088503), // 지도의 중심좌표
    level: 5, // 지도의 확대 레벨
    marker: positions,
  };

  let map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다

  // 마커 이미지의 이미지 주소입니다
  var imageSrc =
    "https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/markerStar.png";

  //이미지 마커 표시
  positions.forEach((item) => {
    let imageSize = new kakao.maps.Size(24, 35);
    let markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize);

    // 마커 생성
    let marker = new kakao.maps.Marker({
      map: map,
      position: item.latlng,
      title: item.name,
      image: markerImage,
    });
    //  var infowindow = new kakao.maps.InfoWindow({
    //    content: data[i][2],
    //    removable: true,
    //  });

    marker.setMap(map);

    // kakao.maps.event.addListener(marker, "click", function () {
    //   // 마커 위에 인포윈도우를 표시합니다
    //   infowindow.open(map, marker);
    // });

    //커스텀 오버레이에 표시할 컨텐츠 입니다
    // var content = `<div class="wrap">
    //     <div class="info">
    //         <div class="title">
    //             ${item.name}
    //             <div class="close" onclick = ${closeOverlay()}
    //             title="닫기">
    //             </div>
    //         </div>
    //         <div class="body">
    //             <div class="img">
    //                 <img src="https://cfile181.uf.daum.net/image/250649365602043421936D" width="73" height="70">
    //             </div>
    //             <div class="desc">
    //                 <div class="ellipsis">${item.address}</div>
    //                 <div class="jibun ellipsis">${item.workingtime} </div>
    //                 <div><a href="https://www.kakaocorp.com/main" target="_blank" class="link">홈페이지</a></div>
    //             </div>
    //         </div>
    //     </div>
    // </div>`;

    // let content = document.createElement("div");

    // let name = document.createElement("div");
    // item.name = `${item.name}`;

    // let address = document.createElement("div");
    // item.name = `${item.address}`;

    // let workingtime = document.createElement("div");
    // item.name = `${item.workingtime}`;

    // content.append(item.name, item.address, item.workingtime);

    // let contentClick = new kakao.maps.InfoWindow({
    //   content: content,
    //   removable: true,
    // });
    // // 마커 위에 커스텀오버레이를 표시합니다
    //   // 마커를 중심으로 커스텀 오버레이를 표시하기위해 CSS를 이용해 위치를 설정했습니다
    // var overlay = new kakao.maps.CustomOverlay({
    //   content: content,
    //   map: map,
    //   position: marker.getPosition(),
    // });

    // 마커를 클릭했을 때 커스텀 오버레이를 표시합니다
    // kakao.maps.event.addListener(marker, "click", function () {
    //   overlay.setMap(map);
    // });

    // // 커스텀 오버레이를 닫기 위해 호출되는 함수입니다
    // function closeOverlay() {
    //   overlay.setMap(null);
    // }
  });

  // kakao.maps.event.addListener(map, "click", (mouseEvent) => {
  //   //클릭한 위도, 경도 정보 불러오기
  //   const popup = cafeInfo;
  //   //마커 위치를 클릭한 위치로 이동
  //   marker.setPosition(latlng);
  //   marker.setMap(map);
  // });
}

json

{
  "cafe": [
    {
      "id": 1,
      "name": "상봉커피",
      "address": "서울 중랑구 봉우재로 96",
      "addressSi": "서울시",
      "addressGu": "중랑구",
      "workingtime": "화~일 12:00 ~ 18:00",
      "Latitude": 37.5918972,
      "Longitude": 127.0837317
    },
    {
      "id": 2,
      "name": "제주역",
      "address": "서울 중랑구 상봉중앙로5다길 49 201호",
      "addressSi": "서울시",
      "addressGu": "중랑구",
      "workingtime": "월~토 12:00 ~ 21:00",
      "Latitude": 37.5980667,
      "Longitude": 127.0865476
    },
    {
      "id": 3,
      "name": "카페 향아",
      "address": "서울 중랑구 사가정로46길 18",
      "addressSi": "서울시",
      "addressGu": "중랑구",
      "workingtime": "수~일 12:00 ~ 21:00",
      "Latitude": 37.5802264,
      "Longitude": 127.084588
    },
    {
      "id": 4,
      "name": "단집",
      "address": "서울 중랑구 사가정로54길 69 1층",
      "addressSi": "서울시",
      "addressGu": "중랑구",
      "workingtime": "월~금 10:00 ~ 21:00",
      "Latitude": 37.578204,
      "Longitude": 127.0867491
    },
    {
      "id": 5,
      "name": "모코",
      "address": "서울 중랑구 면목로49길 33 1층",
      "addressSi": "서울시",
      "addressGu": "중랑구",
      "workingtime": "매일 11:00 ~ 22:00",
      "Latitude": 37.5826805,
      "Longitude": 127.08664
     
    },
    {
      "id": 6,
      "name": "개인공간",
      "address": "서울 중랑구 송림길 12 1층 (우)02086",
      "addressSi": "서울시",
      "addressGu": "중랑구",
      "workingtime": "화~토 12:00 ~ 22:00",
      "Latitude": 37.5998681,
      "Longitude": 127.0956868
    }
  ]
}

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Pet Map</title>
    <link rel="stylesheet" href="style.css" />
    <link rel="icon" href="./images/favicon.png">
  </head>
  <body>
    <div class="container">
      <header class="header">
        <div class="logo">
            <img src="./images/logo.png" />
        <p id="logo_name">Pet Map</p>
        </div>
      </header>
      <section class="section">
        <div class = "map_container">
          <div id="map">
          </div>
        </div>
        
        
      </section>
      <footer class="footer">
			<div class="footer_wrap">
					<div class="copyright">
						<h4>Pet Map</h4>
						<p>Copyright &copy; Pet Map Corp. All Rights Reserved.</p>
					</div>
				</div>
			</div>
		</footer>
    </div>
     <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=개인키&libraries=services"></script>

    <script src="./index 2.js"></script>
  </body>
</html>
2

유사 게시글 답변 참고해서 json 데이터에 맞게 좌표, content를 설정해주세요.
https://devtalk.kakao.com/t/topic/103147/2?u=lea.ju

3

지금 레이아웃위로 올리기까지는 성공했는데 맨 마지막꺼만 출력되는 결과가 나오게 되었습니다… foreach를 사용하였는데 왜 그러까요 …? 그리고 클릭 이벤트가 아니라 그냥 결과가 한 번에 나오는 이벤트가 되어버렸습니다,

const url = "http://localhost:4000/cafe";

let latlngList = [];
let cafeList = [];

fetch("./pet.json")
  .then((response) => response.json())
  .then((data) => {
    let cafes = data["cafe"];
    cafes.forEach((item) => {
      name = item.name;
      address = item.address;
      workingtime = item.workingtime;

      cafeInfo = {
        name: item.name,
        address: item.address,
        workingtime: item.workingtime,
      };

      // showPopup(name, address, workingtime);
      latlngInfo = {
        Latitude: item.Latitude,
        Longitude: item.Longitude,
      };

      latlngList.push(latlngInfo);
      cafeList.push(cafeInfo);
    });
   
    let positions = [];
    let positions2 = [];
    //   위치 정보를 저장
    latlngList.forEach((item) => {
      positions.push({
        latlng: new kakao.maps.LatLng(item.Latitude, item.Longitude),
        title: item.name,
      });
    });

    //지도 출력 기능을 가진 함수 호출
    showMap(positions);
  });

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

// 지도
function showMap(positions) {
  let mapContainer = document.getElementById("map"); // 지도를 표시할 div

  let mapOption = {
    center: new kakao.maps.LatLng(37.580966, 127.088503), // 지도의 중심좌표
    level: 5, // 지도의 확대 레벨
    marker: positions,
  };

  let map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다

  // 마커 이미지의 이미지 주소입니다
  var imageSrc =
    "https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/markerStar.png";

  //이미지 마커 표시
  positions.forEach((item) => {
    let imageSize = new kakao.maps.Size(24, 35);
    let markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize);

    // 마커 생성
    let marker = new kakao.maps.Marker({
      map: map,
      position: item.latlng,
      title: item.name,
      image: markerImage,
    });
    

    //커스텀 오버레이에 표시할 컨텐츠 입니다
    cafeList.forEach((item) => {
      var content =
        '<div class="wrap">' +
        '    <div class="info">' +
        '        <div class="title">' +
        cafeInfo.name +
        '            <div class="close" onclick="closeOverlay()" title="닫기"></div>' +
        "        </div>" +
        '        <div class="body">' +
        '            <div class="img">' +
        '                <img src="./images/gonggan.jpg" width="73" height="70">' +
        "           </div>" +
        '            <div class="desc">' +
        '                <div class="ellipsis">'+ cafeInfo.address +
        '              </div>  <div class="jibun ellipsis">' + cafeInfo.workingtime + '</div>' +
        '                <div><a href="https://www.kakaocorp.com/main" target="_blank" class="link">홈페이지</a></div>' +
        "            </div>" +
        "        </div>" +
        "    </div>" +
        "</div>";
      // 마커 위에 커스텀오버레이를 표시합니다
      // 마커를 중심으로 커스텀 오버레이를 표시하기위해 CSS를 이용해 위치를 설정했습니다
      var overlay = new kakao.maps.CustomOverlay({
        content: content,
        map: map,
        position: marker.getPosition(),
      });

      //마커를 클릭했을 때 커스텀 오버레이를 표시합니다
      kakao.maps.event.addListener(marker, "click", function () {
        overlay.setMap(map);
      });

      // 커스텀 오버레이를 닫기 위해 호출되는 함수입니다
      function closeOverlay() {
        overlay.setMap(null);
      }
    });

      
    })

image

4

positions i번째 마커를 생성할 때 cafeList에 담긴 item이 0에서 배열의 length까지 돌기 때문에
모든 카페 정보로 오버레이가 생성되고 있고 가장 마지막 배열이 맨 위로 생겨서 덮 어보입니다.
디버깅을 해보시면 length까지 오버레이가 생성된 걸 확인할 수 있습니다.
i번째 카페 정보를 가져와서 오버레이를 생성해주시고
위 답변 내 링크 참고하셔서 content는 documnet.createElement로 HTMLElement을 구성해주세요.
그리고 오버레이는 map 옵션을 같이 사용하면 생성과 동시에 지도에 표시됩니다.
map옵션을 빼서 생성해주세요.

var overlay = new kakao.maps.CustomOverlay({
    content: content,
//    map: map,
    position: marker.getPosition()
});