kakaomap 연동하기

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

카카오맵 api 페이지

카카오맵 api 홈페이지

 

오른쪽 상단의 App KEY 발급 클릭

 

새로만들 어플리케이션을 추가해줍니다

그럼 카카오로 부터 앱 키를 발급받을 수 있는데 root경로에 생성한 .env.local파일에 입력해줍니다

 

플랫폼 설정하기를 누른 뒤 Web플랫폼을 등록해줍니다

 

 

 

 

import { useEffect, useState } from 'react';

function Map() {
  useEffect(() => {
    // DOM을 이용하여 script 태그를 만들기
    const mapScript = document.createElement('script');

    // script.async = true 라면, 해당 스크립트가 다른 페이지와는 비동기적으로 동작함을 의미
    mapScript.async = true;
    mapScript.src = `//dapi.kakao.com/v2/maps/sdk.js?appkey=${process.env.NEXT_PUBLIC_KAKAO_JS_KEY}&libraries=services,clusterer,drawing&autoload=false`;

    document.head.appendChild(mapScript);

    // script가 완전히 load 된 이후, 실행될 함수
    const onLoadKakaoMap = () => {
      window.kakao.maps.load(() => {
        const mapContainer = document.getElementById('map');
        const mapOption = {
          center: new window.kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
          level: 3, // 지도의 확대 레벨
        };
        new window.kakao.maps.Map(mapContainer, mapOption);
      });
    };
    mapScript.addEventListener('load', onLoadKakaoMap);
  }, []);

  return (
    <>
      <div id="map" className="w-full h-screen"></div>
    </>
  );
}

export default Map;

 

새로운 map component를 생성해줍니다