지도 영역 크기 동적 변경하기

지도 객체는 생성될 때 지도 div 크기에 따라 픽셀과 좌표정보를 설정하여 가지고 있습니다. 이 정보로 지도 객체는 지도표시, 마커 표시, 확대, 축소, 이동 등의 좌표 계산 등 지도 표시에 필요한 여러가지 연산을 수행하는데 이때 지도 div의 크기가 변경이 되면 지도객체가 가지고 있는 픽셀과 좌표정보가 div를 표시하는 크기와 달라지기 때문에 지도가 정상적으로 표출되지 않을 수도 있습니다. 그래서 크기를 변경한 이후에는 반드시 relayout 함수를 호출하여 픽셀과 좌표정보를 새로 설정해주어야합니다.

original docs : https://apis.map.kakao.com/web/sample/mapRelayout/

import { Map } from "react-kakao-maps-sdk"
import useKakaoLoader from "./useKakaoLoader"
import { useRef, useState } from "react"

export default function MapRelayout() {
  useKakaoLoader()
  const mapRef = useRef<kakao.maps.Map | null>(null)

  const [mapSize, setMapSize] = useState({
    width: "100%",
    height: "350px",
  })

  const resizeMap = () => {
    setMapSize({
      width: "650px",
      height: "650px",
    })
  }
  const relayout = () => {
    mapRef.current?.relayout()
  }

  return (
    <>
      <Map // 지도를 표시할 Container
        id="map"
        center={{
          // 지도의 중심좌표
          lat: 33.450701,
          lng: 126.570667,
        }}
        style={mapSize}
        level={3} // 지도의 확대 레벨
        ref={mapRef}
      />
      <p>
        <button onClick={resizeMap}>지도 크기 바꾸기</button>{" "}
        <button onClick={relayout}>relayout 호출하기</button>
      </p>
    </>
  )
}