카카오맵 api 적용한 코드 기록

import styled from "styled-components";
import React, { useEffect } from "react";
import { checkValidAddress } from "../../utils/functions";

interface IProps {
  width: string;
  height: string;
  address?: string;
  name?: string;
}

const Map = styled.div<IProps>`
  width: ${(props) => props.width};
  height: ${(props) => props.height};
`;

export default function KakaoMap(props: IProps) {
  useEffect(() => {
    window.kakao.maps.load(() => {
      const container = document.getElementById("map"); //지도를 담을 영역의 DOM 레퍼런스

      const options = {
        //지도를 생성할 때 필요한 기본 옵션
        center: new window.kakao.maps.LatLng(33.450701, 126.570667), //지도의 중심좌표.
        level: 3, //지도의 레벨(확대, 축소 정도)
      };

      const map = new window.kakao.maps.Map(container, options); //지도 생성 및 객체 리턴

      // 주소-좌표 변환 객체를 생성
      const geocoder = new window.kakao.maps.services.Geocoder();

      // 주소로 좌표를 검색
      geocoder.addressSearch(
        props.address,
        function (result: any, status: any) {
          // 정상적으로 검색이 완료되었을 때
          if (status === window.kakao.maps.services.Status.OK) {
            const coords = new window.kakao.maps.LatLng(
              result[0].y,
              result[0].x
            );

            // 결과값으로 받은 위치를 마커로 표시
            const marker = new window.kakao.maps.Marker({
              map,
              position: coords,
            });

            // 운포윈도우로 장소에 대한 설명 표시
            const infowindow = new window.kakao.maps.InfoWindow({
              content: `<div style="width:150px;text-align:center;padding:6px 0;">${props.name}</div>`,
            });
            infowindow.open(map, marker);

            // 지도와 중심을 결과값으로 받은 위치로 이동
            map.setCenter(coords);
          } else if (status === null) {
            // 정상적으로 주소강 입력되지 않았을 때
            alert("주소가 잘못 입력되었습니다!");
          }
        }
      );
    });
  }, []);

  return <Map id="map" width={props.width} height={props.height}></Map>;
}

 우선, 전체 코드는 위와 같다. 개인적으로 위의 코드는 지도 코드 + 주소의 위치 표시 코드로 이루어졌다고 생각한다. 카카오맵 api의 공식 문서가 설명이 잘 되어있기에 코드를 작성하는데 큰 어려움이 없었다.  우선, 지도 코드이다.

const container = document.getElementById("map"); //지도를 담을 영역의 DOM 레퍼런스

const options = {
  //지도를 생성할 때 필요한 기본 옵션
  center: new window.kakao.maps.LatLng(33.450701, 126.570667), //지도의 중심좌표.
  level: 3, //지도의 레벨(확대, 축소 정도)
};

const map = new window.kakao.maps.Map(container, options); //지도 생성 및 객체 리턴

이 코드는 공식 문서의 코드를 그대로 가져왔다. 우선, 지도를 담을 영역의 DOM 레퍼런스를 container에 저장한다. 그 후, 지도의 중심 좌표와 지도의 확대, 축소 정도를 저장한 options를 선언한 후, kakao.maps.Map을 이용해 지도를 생성한다. 이 때,  단순히 window.kakao.maps.Map(container, options); 라고만 작성하여도 지도가 생성된다. 여담으로, (33.450701, 126.470667)은 kako 스페이스닷원이라는 곳이다.

---

// 주소-좌표 변환 객체를 생성
const geocoder = new window.kakao.maps.services.Geocoder();

// 주소로 좌표를 검색
geocoder.addressSearch(props.address, function (result: any, status: any) {
  // 정상적으로 검색이 완료되었을 때
  if (status === window.kakao.maps.services.Status.OK) {
    const coords = new window.kakao.maps.LatLng(result[0].y, result[0].x);

    // 결과값으로 받은 위치를 마커로 표시
    const marker = new window.kakao.maps.Marker({
      map,
      position: coords,
    });

    // 운포윈도우로 장소에 대한 설명 표시
    const infowindow = new window.kakao.maps.InfoWindow({
      content: `<div style="width:150px;text-align:center;padding:6px 0;">${props.name}</div>`,
    });
    infowindow.open(map, marker);

    // 지도와 중심을 결과값으로 받은 위치로 이동
    map.setCenter(coords);
  } else if (status === null) {
    // 정상적으로 주소강 입력되지 않았을 때
    alert("주소가 잘못 입력되었습니다!");
  }
});

 그리고 주소의 위치를 지도에 표시하는 코드이다. 특정 주소를 표시하기 위해서는 주소를 위도와 경도를 알려주는 지오코딩(Geocoding) 서비스를 이용해야 한다. 당장 구글에 지오코딩이라고만 쳐도 다양한 지오코딩 서비스가 나오는 것을 확인할 수 있다. 하지만 지금은 카카오맵 api를 이용하기에 카카오에서 제공하는 지오코딩 서비스를 이용할 것이다. 카카오 지오코딩을 이용하는 것은 매우 쉽다. 위 코드의 첫째 줄처럼 geocoder를 생성한 후, geocoder.addressSearch에 주소(위의 코드에서는 props.address)와 콜백 함수를 인자로 넣는다. 그리고 주소가 변환하기 올바른 주소라면 status가 "OK"이다. 그리고 콜백 함수를 통해 해당 위치를 지도에 표시해준다. 

---

export const checkValidAddress = async (address: string) => {
  const geocoder = new window.kakao.maps.services.Geocoder();

  try {
    const checkResult = await new Promise<any>((resolve, reject) => {
      geocoder.addressSearch(address, (result: any, status: string) => {
        resolve({ result, status });
      });
    });

    const { result, status } = checkResult;

    if (status !== "OK") {
      return false;
    }

    return true;
  } catch (error) {
    console.error("Geocoder error:", error);
    return false;
  }
};

 지오코딩을 더 다양한 곳에 활용해보고 싶어서 간단히 위와 같은 코드를 작성하였다. 위의 코드는 입력한 주소가 위도/경도를 알아내기 적합한(제대로 작성된) 주소라면 true를 반환하고 아니라면 false를 반환하는 함수이다. 이 때, geocoder.addressSearch는 비동기적으로 동작하기에 Promise 객체를 생성해 status를 받아올 때까지 기다린 후 판별을 진행한다.

---

참고한 글

https://apis.map.kakao.com/web/guide/

https://apis.map.kakao.com/web/sample/addr2coord/

 

지오코딩: https://ko.wikipedia.org/wiki/%EC%A7%80%EC%98%A4%EC%BD%94%EB%94%A9