React 카카오 지도 마커 클릭시 info 기능 구현 관련 질문

지도/로컬 API
#1

안녕하세요.
항상 감사드립니다.
카카오 지도를 구현하는데 있어서 마커를 클릭하면 info정보가 나오게 구현하려고 합니다.
아래의 사진과 같이 기능을 구현하고 싶습니다.

캡처

제가 구현한 마커와 마커 클릭시 info 정보가 나오게 하는 코드는 아래와 같습니다.
info정보를 나오는 코드 구현을 뺀다면 마커 생성까지 정상적으로 작동합니다.

 displayMaker = () => {
  const { AnimalPharmacyData } = this.props;
  AnimalPharmacyData.forEach((element) => {
    new window.kakao.maps.Marker({
        map: this.map,
        position: new window.kakao.maps.LatLng(element.lat, element.lng),
        title: element.title
    });

    var iwContent = `<div><h1>${element.title}</h1></div>`;

    var infowindow = new window.kakao.maps.InfoWindow({
      content :  iwContent
    })

    window.kakao.maps.event.addListener(
      this.marker,
      'mouseover',
      this.makeOverListener(this.map, this.marker, infowindow)
    );

    window.kakao.maps.event.addListener(
      this.marker,
      'mouseout',
      this.makeOutListener(infowindow)
    );

  });
}

밑에 사진은 콘솔창에 뜨는 오류사진입니다.
123

#2

this.marker가 무엇을 의미하는지요?

제가 코드를 봤을 땐, 아래와 같이 되어야 한다고 생각합니다.

const marker = new window.kakao.maps.Marker({ /*...*/ });
const infowindow = new window.kakao.maps.InfoWindow({ /*...*/ });
window.kakao.maps.event.addListener(
  marker,
  'mouseover',
  this.makeOverListener(this.map, marker, infowindow)
);
#3

안녕하십니까
답변 감사합니다.
this.marker의 의미를 명확히 하기 위해 전체 코드를 첨부하겠습니다.
항상 감사드립니다.
열정있는 개발자가 되겠습니다

   import React from "react";

class MapCreate extends React.Component {
    map;
    maker;
    iwRemoveable;
    infowindow;
    MapTypeControl;
    zoomControl;
    iwContent;
    infowindow;
    markers = [];

    mapTypeControl = () => {
      this.MapTypeControl = new window.kakao.maps.MapTypeControl();
      this.map.addControl(this.MapTypeControl, window.kakao.maps.ControlPosition.TOPRIGHT);
      this.zoomControl = new window.kakao.maps.ZoomControl();
      this.map.addControl(this.zoomControl, window.kakao.maps.ControlPosition.RIGHT);
    }

    displayMaker = () => {

      const { AnimalPharmacyData } = this.props;
      AnimalPharmacyData.forEach((element) => {
        this.maker = new window.kakao.maps.Marker({
            map: this.map,
            position: new window.kakao.maps.LatLng(element.lat, element.lng),
           
        });


        this.iwContent = `<div ><p>${element.title}<p></div>`;

        this.infowindow = new window.kakao.maps.InfoWindow({
          position: new window.kakao.maps.LatLng(element.lat, element.lng),
          content :  this.iwContent
        })

        this.infowindow.open(this.map, this.marker);

        this.markers.push(this.marker);

		    window.kakao.maps.event.addListener(this.marker, 'mouseover', this.makeOverListener(this.map, this.marker, this.infowindow));
        window.kakao.maps.event.addListener(this.marker, 'mouseout', this.makeOutListener(this.infowindow));
    
        window.clusterer.addMarkers(this.markers);

      
      });
    }

    makeOverListener = (map, marker, infowindow)  => {
      return function () {
        infowindow.open(map, marker);
      };
    }

    makeOutListener = (infowindow) => {
      return function () {
        infowindow.close();
      };
    }

    mapScript = () => {
        const { AnimalPharmacyData } = this.props;
       
        let container = document.getElementById("Mymap");
    
        let option = {
          center: new window.kakao.maps.LatLng(AnimalPharmacyData[1].lat, AnimalPharmacyData[1].lng),
          level: 3,   
        };

        this.map = new window.kakao.maps.Map(container, option);
        this.displayMaker();
        this.setBound();
        this.mapTypeControl();
    }

    setBound = () => {
      const { AnimalPharmacyData } = this.props;
        
      let bounds = new window.kakao.maps.LatLngBounds();
      

      for(var i=1; i<AnimalPharmacyData.length; i++){
        bounds.extend(new window.kakao.maps.LatLng(AnimalPharmacyData[i].lat,AnimalPharmacyData[i].lng))

      }
      // 검색된 장소 위치를 기준으로 지도 범위를 재설정

      this.map.setBounds(bounds);      
    }

  componentDidMount() {
    this.mapScript();
  }

  render() {
    const{AnimalPharmacyData} = this.props;
    console.log(AnimalPharmacyData);

    return (
    <div style={{height:"100%"}}>
      <p>MENU</p>
      <div id="Mymap" style={{ width: "100%", height: "700px" }}></div>
    </div>
    )
  }
}

export default MapCreate;
#4

this.maker => this.marker

1개의 좋아요