[React] 리액트의 카카오맵 API - 인포윈도우 위에 클릭 이벤트 등록하기

지도의 마커에 인포윈도우를 띄우는 것 까지는 카카오맵 API 문서에서 제공합니다.

 

그러나 인포윈도우 위에 버튼 클릭이벤트를 등록하는 것은 커스터마이징이 필요합니다.

 

제가 구현했던 방법을 순서대로 아래와 같이 포스팅합니다.

 

1. 지도에 마커 클릭이벤트로 인포윈도우 띄우기 (카카오맵 API 문서)

• 카카오맵 API 문서 링크 : https://apis.map.kakao.com/web/sample/addMarkerClickEvent/
• API 문서에 따르면 인포윈도우 내용은 HTML 태그를 문자열 형식으로 입력해야 합니다.
• 인포윈도우를 띄우는 코드는 아래와 같습니다.

// 마커를 클릭했을 때 마커 위에 표시할 인포윈도우를 생성합니다

// 인포윈도우에 표출될 내용으로 HTML 문자열이나 document element가 가능합니다
var iwContent = '<div style="padding:5px;">Hello World!</div>', 

// 인포윈도우를 생성합니다
var infowindow = new kakao.maps.InfoWindow({
    content : iwContent,
    removable : true
});

 

2. 시행착오

iwContent에 HTML 태그를 문자열 형식으로 입력하는 과정에서 시행착오를 겪었습니다.

 

• template literal로 변수와 이벤트핸들러 할당했으나 실패

// 이벤트 핸들러는 이 방법으로 불러올 수 없음

var iwContent = `
<div>회사명 : ${data.companyName}</div>
<div>근무시간 : ${data.time}</div>
<div>월급 : ${data.monthlyWage}</div>
<button onclick="${eventHandler}">지원하기</button>
`

let infowindowClick = new kakao.maps.InfoWindow({
  content: iwContent,
  removable: true,
});

 

• script 태그 내에 이벤트핸들러를 선언했으나 실패

var iwContent = `
<div>회사명 : ${data.companyName}</div>
<div>근무시간 : ${data.time}</div>
<div>월급 : ${data.monthlyWage}</div>
<button onclick="eventHandler">지원하기</button>
<script>
  function eventHandler () {
    console.log('인포윈도우 클릭이벤트')
  }
</script>
`

let infowindowClick = new kakao.maps.InfoWindow({
  content: iwContent,
  removable: true,
});

 

• script 태그 내에 DOM 프로퍼티를 사용하여 이벤트핸들러를 할당했으나 실패

var iwContent = `
<div>회사명 : ${data.companyName}</div>
<div>근무시간 : ${data.time}</div>
<div>월급 : ${data.monthlyWage}</div>
<button id="button">지원하기</button>
<script>
  button.onclick = function () {
    console.log('인포윈도우 클릭이벤트')
  }
</script>
`

let infowindowClick = new kakao.maps.InfoWindow({
  content: iwContent,
  removable: true,
});

 

3. DOM 문법을 사용하여 클릭이벤트 등록 성공

• DOM 문법을 사용하여 인포윈도우 위에 이벤트를 등록할 수 있었습니다.

let iwContent = document.createElement("div")

let companyName = document.createElement("div")
companyName.textContent = `회사명 : ${data.companyName}`

let time = document.createElement("div")
time.textContent = `근무시간 : ${data.time}`

let monthlyWage = document.createElement("div")
monthlyWage.textContent = `예상 월급여 : ${data[i].monthlyWage}`

let btn = document.createElement("button");
btn.textContent = `지원하기`;
btn.onclick = eventHandler;

iwContent.append(
  companyName,
  time,
  monthlyWage,
  btn
);

let infowindowClick = new kakao.maps.InfoWindow({
  content: iwContent,
  removable: true,
});