[React] Kakao Map API 사용하기 (4) - customoverlay 클릭 이벤트 등록하기

https://developers.kakao.com/product/map

지난 포스트에서 마커를 커스텀하고 customoverlay를 활용해 infowindow를 구현해 보았습니다.
이번 포스트에서는 등록한 customoverlay의 요소에 클릭 이벤트를 등록해 보고자 합니다.

 

클릭 이벤트 등록하기

아래 사진과 같이 마커를 클릭했을 때 보이는 customoverlay의 요소에서 "상세보기"를 클릭했을 경우 해당하는 정보를 보여주도록 클릭 이벤트를 등록하고자 했는데, 아래 사진처럼  onClick으로 클릭 이벤트를 등록했을 경우 클릭 이벤트가 동작하지 않았습니다. 그래서 찾아보니 customoverlay의 경우, document element에 직접 이벤트를 등록해주어야 했습니다.

 

그래서, div 요소에 id를 부여하고 해당하는 클릭 이벤트를 직접 등록해 주는 식으로 구현해 주었습니다.

useEffect(() => {
    const container = document.getElementById('map')!;
    const options = {
      center: new kakao.maps.LatLng(lat, lng),
    };

    const map = new kakao.maps.Map(container, options);
    draggable ? map.setDraggable(true) : map.setDraggable(false);
    let currentInfoWindow: customoverlay = null;
    const imageSrc = 'public/marker.png';
    const imageSize = new kakao.maps.Size(35, 35);
    const markerImage = new window.kakao.maps.MarkerImage(imageSrc, imageSize);

    marker?.forEach((data) => {
      const mark = new kakao.maps.Marker({
        map: map,
        position: new kakao.maps.LatLng(data.latitude, data.longitude),
        title: data.placeName,
        image: markerImage,
      });

      const content = Infowindow(data);
      const overlay = new kakao.maps.CustomOverlay({
        content: content,
        map: map,
        position: new kakao.maps.LatLng(data.latitude, data.longitude),
        clickable: true,
      });

      kakao.maps.event.addListener(mark, 'click', function () {
        if (currentInfoWindow) {
          currentInfoWindow.setMap(null);
          currentInfoWindow = null;
        }
        overlay.setMap(map);
        currentInfoWindow = overlay;

        setTimeout(() => {
          const element = document.getElementById(data.id);
          if (element) {
            element.addEventListener('click', () => {
              console.log('상세보기 클릭');
              MenuControllMenu();
            });
          } else {
            console.warn(`${data.id}를 찾을 수 없습니다.`);
          }
        }, 0);
      });

      overlay.setMap(null);
    });

    // 지도 클릭 시 인포윈도우 닫기
    kakao.maps.event.addListener(map, 'click', function () {
      if (currentInfoWindow) {
        currentInfoWindow.setMap(null);
        currentInfoWindow = null;
      }
    });

  }, [marker, lat, lng]);

정상적으로 잘 작동합니다!

 

오류 수정

클릭 이벤트가 정상적으로 작동하지 않는 오류가 발생하여 수정하였습니다.(2024-09-14)

https://ohamin26.tistory.com/40