Next.js에 카카오 맵 API 적용하기 - 정적 이미지 지도

첫프밍 2022. 11. 9. 15:15

2022. 11. 9. 15:15

import Script from "next/script";
import { useEffect } from "react";

const KakaoMap = () => {
  /*global kakao*/
  useEffect(() => {
    kakao.maps.load(() => {
      let markers = {
        position: new kakao.maps.LatLng(33.450701, 126.570667),
        text: "텍스트를 표시할 수 있어요!", // text 옵션을 설정하면 마커 위에 텍스트를 함께 표시할 수 있습니다
      };
      let staticMapContainer = document.getElementById("staticMap"), // 이미지 지도를 담을 영역의 DOM 레퍼런스
        staticMapOption = {
          center: new kakao.maps.LatLng(33.450701, 126.570667), // 이미지 지도의 중심좌표
          level: 3, // 이미지 지도의 확대 레벨
          marker: markers,
        };

      const staticMap = new kakao.maps.StaticMap(
        staticMapContainer,
        staticMapOption
      ); //지도 생성 및 객체 리턴
      
    });
  }, []);
  return (
    <>
      <Script
        type="text/javascript"
        src={`//dapi.kakao.com/v2/maps/sdk.js?appkey=${process.env.NEXT_PUBLIC_DEVELOPMENT_KAKAO_MAP_KEY}&autoload=false`}
        // &autoload=false를 설정합니다. 스크립트 로딩이 끝난 뒤에 kakao객체에 접근합니다.
        strategy="beforeInteractive" // 스크립트를 먼저 로드합니다.
      />
      <div
        id="staticMap"
        style={{
          width: "500px",
          height: "500px",
        }}
      ></div>
    </>
  );
};
export default KakaoMap;

---

알아둬야 할 점

1. 정적 이미지 지도에 그리는 마커는 일반 지도의 마커와 약간 다르다.

- 정적 이미지 지도: 그냥 Object형태로 직접만들고 있다.