.

1. Link로 감싸기  -> 지도를 드래그 했을 시에도 링크가 이동되는 문제가 있다. 클릭이벤트 등록하는 방법이 더 낫다.

import Link from "next/link";

      <Link href={`https://map.kakao.com/link/to/18577297`}>
        <div
          id="map"
          style={{
            width: "500px",
            height: "500px",
          }}
        ></div>
      </Link>

1. 클릭 이벤트 등록

클릭했을 때 지도 링크로 연결시키는 함수를 만든다.

	  // 클릭시 카카오맵 길찾기가 새 탭으로 열립니다.
      kakao.maps.event.addListener(map, "click", () => {
        window.open(`https://map.kakao.com/link/to/18577297`, "_blank");
      });

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

2. 링크 설정하기
장소 ID를 이용해서 길찾기 바로가기 링크를 만들 수 있다. 서버에서 장소ID만 받아오면 되겠다.

정적 이미지 지도에 마커 추가하기

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형태로 직접만들고 있다.

- 일반 이미지 지도의 마커: Marker 생성.

2. 정적 이미지 지도에는 마커 이미지 변경이 안된다.