[React] Kakao Map API 사용하기 (3) - customoverlay를 활용하여 마커 커스텀 하기

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

지난 포스트에서는 지도를 띄우고 여러 개의 마커를 등록해 보았습니다.
이번 포스트에서는 등록한 마커를 커스텀하고
커스텀 오버레이를 활용하여 infowindow를 구현해보고자합니다.

 

마커 디자인 변경

처음 아무런 설정 없이 마커를 등록하고 애플리케이션을 실행시키면 아래 사진과 같이 카카오에서 기본 제공되는 마커로 표시되는 것을 확인할 수 있는데요. 저는 애플리케이션에 맞게 마커를 바꿔주려고 해요.

 

1. 먼저 바꿔줄 이미지를 준비해 줍니다.

2. 바꿔줄 이미지를 코드로 등록해 줍니다. 이미지를 등록하는 코드 이외 지도를 다루는 부분은 이전 포스트를 참고하시면 됩니다.(https://ohamin26.tistory.com/36?category=1193802)  

3. 애플리케이션을 실행해 보면 이미지가 정상적으로 바뀐 것을 확인할 수 있습니다.

 

마커 커스텀 오버레이 등록하기

저는 또한 등록된 마커를 클릭하면 아래 사진과 같이 마커에 대한 정보를 표시하고 싶어, kakao map api에서 제공하는 customoverlay를 활용하여 해당 부분을 구현해 주었습니다. 구현 과정은 kakao map api 공식 문서를 참고하여 구현하였습니다. (https://apis.map.kakao.com/web/sample/markerWithCustomOverlay/)

 

1. 커스텀 오버레이로 보여줄 콘텐츠를 저는 아래 사진과 같이 작성해 주었습니다. 등록할 콘텐츠는 html 문자열이나 document element만 가능하므로 함수 형태로 작성해 주었습니다.

Infowindow에 사용한 css 코드입니다.

export const infowindowContainer = style({
  position: 'absolute',
  left: '3.4rem',
  bottom: '35px',
  width: '200px',
  height: '89px',
  marginLeft: '-144px',
  textAlign: 'left',
  overflow: 'hidden',
  fontSize: '12px',
  lineHeight: '1.5',
});

export const infowindowWrapper = style({
  width: '180px',
  height: '77px',
  borderRadius: '15px',
  overflow: 'hidden',
  backgroundColor: '#fff',
  border: '0',
  boxShadow: '0px 1px 2px #888',

  '::after': {
    content: '""',
    position: 'absolute',
    left: '40%',
    bottom: '0',
    width: '22px',
    height: '12px',
    background: 'url(https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/vertex_white.png)',
  },
});

export const infowindowTextBase = style({
  display: 'block',
  color: '#333',
  padding: '1px 15px 0 5px',
  textDecoration: 'none',
  fontWeight: 'bold',
  whiteSpace: 'nowrap',
  overflow: 'hidden',
  textOverflow: 'ellipsis',
  cursor: 'pointer',
});

export const infowindowText = recipe({
  base: infowindowTextBase,
  variants: {
    fontSize: {
      small: { fontSize: '10px', padding: '11px 18px 0 0', color: '#004c80' },
      medium: { fontSize: '11px' },
      large: { fontSize: '15px', padding: '7px 3px 0 5px' },
      link: { color: '#004c80', fontSize: '11px' },
    },
  },
});

export const infowindowTitle = style({
  display: 'flex',
  flexDirection: 'row',
  justifyContent: 'space-between',
});

 

2. 아래와 같이 커스텀 오버레이 객체를 생성해 주고 커스텀 오버레이가 등록된 것을 확인할 수 있습니다.

 

이렇게 객체만 생성하고 실행했을 경우 커스텀 오버레이는 정상적으로 보이지만 커스텀 오버레이가 항상 열려 있어 제어가 불가능합니다. 제가 원했던 것은 마커를 클릭했을 때 커스텀 오버레이를 보여주고 커스텀 오버레이 이외의 부분을 클릭했을 경우 커스텀 오버레이가 닫히는 그런 기능을 구현하기를 원했기에 해당 부분 이벤트 처리를 추가해 주었습니다.

 

포스트를 마치며

이번 포스트에서는 마커 이미지를 변경하고, 커스텀 오버레이를 활용하여 마커를 커스텀해보았습니다. 다음 포스트에서는 커스텀 오버레이에 클릭 이벤트를 등록해보고자 합니다.