kakao Map API

이번에 지도 관련 토이프로젝트를 진행하면서 사용한 카카오맵 API에 대해서 기본적인 내용을 정리하려고 한다.

카카오에서 제공하는 API 문서를 보면 자세하게 나와있지만, 리액트에 맞게 바꿔서 사용해야 되는 부분도 있었다.

Javascript API 불러오기

<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 APP KEY를 넣으시면 됩니다."></script>

src/index.html에서 body 하단에 붙여주면 된다.

---

지도 준비하기

Map.js

const Map = () => {
  const [kakaoMap, setKakaoMap] = useState(null);
  const container = useRef(null);
  
  const initMap = () => {
    const center = new kakao.maps.LatLng(33.36256187769044, 126.52903781775196);
    const options = {
      center,
      level: 8,
    };
    const map = new kakao.maps.Map(container.current, options);
    setKakaoMap(map);
  };
  
  useEffect(() => {
    initMap();
  }, []);
  
  return <MapContainer id="KakaoMap" ref={container} />;
}

const MapContainer = styled.div`
  width: 100%;
  height: 100vh;
`;

useRef()를 이용해서 MapContainer에 지도를 보여줄 수 있다.
initMap()은 최초 지도를 생성하는 함수이다. (함수명은 원하는대로 사용하면 된다.)
center는 지도의 중심 좌표를 나타내고 level은 지도를 얼마나 확대할 것인지에 대한 옵션이다.

---

마커 생성하기

Map.js

let marker = new kakao.maps.Marker({
  position: new kakao.maps.LatLng(position.latitude, position.longitude),
  title: position.longitude,
  image: null,
  clickable: true,
});

marker.setMap(kakaoMap);

지도에 마커를 생성할 때는 setMap() 함수를 이용해서 마커를 생성한다.
setMap()에서 사용한 kakaoMap은 initMap() 함수를 통해서 생성한 지도를 useState()를 통해서 상태로 저장한 것이다.
따로 상태 관리를 하지 않는다면, 지도에서 할 수 있는 여러가지 기능들을 지도를 생성함과 동시에 사용해야 할 것이다.

---

인포윈도우 생성하기

Map.js

let infowindow = new kakao.maps.InfoWindow({
  content: position.placeName,
});

kakao.maps.event.addListener(marker, "mouseover", makeOverListener(kakaoMap, marker, infowindow));
kakao.maps.event.addListener(marker, "mouseout", makeOutListener(infowindow));


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


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

marker를 생성하면서 같이 생성한다.
생성한 marker에 event를 넣어주는 것이다.
mouseover, mouseout 2개의 함수를 사용했지만, click과 같은 다른 함수를 사용할 수 있다.

카카오맵 API 사이트를 보면 다양한 기능과 자세한 문서를 볼 수 있다.
지도와 관련된 프로젝트도 처음 만들어보고 지도 관련 API도 처음 사용하다보니 헷갈리고 헤매는 부분도 많았다.

조금씩이라도 정리하면서 많은 경험을 해보는 것이 좋을 것 같다.