[React/카카오톡 API] 카카오맵을 사용한 위치 검색 API 생성

이번 검색에서는 react가 아닌 nextjs에서 사용을 했었는데, react에서 사용하는 라이브러리인 react-kakao-maps-sdk를 처음에 사용했었다.

하지만 nextjs에서 맵을 좌표로 띄울때는 편했지만, 검색 기능 사용법을 몰라서 기본적인 API로 검색하게 되었다.

 

방식은 카카오톡에 나와있는 방식 그대로 사용하였다.

 

kakaoMap 컴포넌트를 따로 만들었고,

 

import React, { useEffect, useState } from "react";

// 카카오 api에서 받아온 token값을 입력해주고, 뒤의 libraries=services를 입력해줘야지 검색 기능을 사용할 수 있다.
const KAKAO_SDK_URL = `//dapi.kakao.com/v2/maps/sdk.js?appkey=${process.env.NEXT_PUBLIC_MAP_TOKEN}&libraries=services,clusterer&autoload=false`;

const KakaoMap = ({ location }: { location: string }) => {
  useEffect(() => {
    const kakaoMapScript = document.createElement("script");
    kakaoMapScript.async = false;
    kakaoMapScript.src = KAKAO_SDK_URL;

    document.head.appendChild(kakaoMapScript);

    const onLoadKakaoAPI = () => {
      window.kakao.maps.load(() => {
        var infowindow = new kakao.maps.InfoWindow({ zIndex: 1 });

        var container = document.getElementById("map") as HTMLElement;
        var options = {
          center: new window.kakao.maps.LatLng(33.450701, 126.570667),
          level: 3,
        };

        var map = new window.kakao.maps.Map(container, options);

        var ps = new kakao.maps.services.Places();

	// 이함수에서 location에 주소를 입력하면 위치를 새로 등록한다.
        ps.keywordSearch(location, placesSearchCB);

        // 키워드 검색 완료 시 호출되는 콜백함수 입니다
        function placesSearchCB(data: any, status: any, pagination: any) {
          if (status === kakao.maps.services.Status.OK) {
            // 검색된 장소 위치를 기준으로 지도 범위를 재설정하기위해
            // LatLngBounds 객체에 좌표를 추가합니다
            var bounds = new kakao.maps.LatLngBounds();

            if (data.length) {
              displayMarker(data[0]);
              bounds.extend(new kakao.maps.LatLng(data[0].y, data[0].x));
            }

            // 검색된 장소 위치를 기준으로 지도 범위를 재설정합니다
            map.setBounds(bounds);
          }
        }

        // 지도에 마커를 표시하는 함수입니다
        function displayMarker(place: any) {
          // 마커를 생성하고 지도에 표시합니다
          var marker = new kakao.maps.Marker({
            map: map,
            position: new kakao.maps.LatLng(place.y, place.x),
          });

          // 마커에 클릭이벤트를 등록합니다
          kakao.maps.event.addListener(marker, "click", function () {
            // 마커를 클릭하면 장소명이 인포윈도우에 표출됩니다
            infowindow.open(map, marker);
          });
        }
      });
    };

    kakaoMapScript.addEventListener("load", onLoadKakaoAPI);
  }, [location]);

  return (
    <>
      <div id="map" style={{ width: "100%", height: "100%" }}></div>
    </>
  );
};

export default KakaoMap;

 

위와 같이 미리 token 값을 받아서 api url을 등록하고 document에 id를 map으로 지정하고 지도를 만든 후 검색으로 위치를 새로 잡아 지도에 마커를 띄어주고 마지막에 div에 id로 map을 입력하여 div에 지도를 띄워줄 수 있는 방식이다.

 

위와 같은 방식으로 location에 주소나 검색이 들어갈 경우 지도에 표시해 줄수 있다.