Kakao_API를 통해 지도 가져오기

카카오 developers - 내 애플리케이션에 들어간다.

키 값이 필요한데, JavaScript 키를 쓰면 된다.

나는 cra 프로젝트로 시작했기 때문에, public/index.html의 script에 추가해주었다.

appkey= '이부분 ' 에 key를 입력해주면 되는데, 나는 환경변수에 설정해주었다.

github-action으로 자동배포를 진행시키는 중이었기 때문에, yaml파일에 설정해줬다.

repository의 secret 설정후 yaml파일에는 아래와 같이 설정했다.
참고로 env에 설정해줬다!

html에 설정해줄 때는 위와 같이 %Some_KEY%처럼 작성해주면 된다.

처음에는 static한 지도와 마크다운만 사용하려고 카카오 지도 홈페이지를 참고해 아래와 같이 Map.tsx를 작성했다.

//Map.ts
const MapContainer = () => {
  useEffect(() => {
    const container = document.getElementById('map'); //지도를 담을 영역의 DOM 레퍼런스
    const options = {
      //지도를 생성할 때 필요한 기본 옵션
      center: new window.kakao.maps.LatLng(
        37.58203340383761,
        126.81311841037957,
      ), //지도의 중심좌표.
      level: 3, //지도의 레벨(확대, 축소 정도)
    };

    // 마커가 표시될 위치입니다
    const markerPosition = new window.kakao.maps.LatLng(
      37.58203340383761,
      126.81311841037957,
    );

    // 마커를 생성합니다
    const marker = new window.kakao.maps.Marker({
      position: markerPosition,
    });

    const map = new window.kakao.maps.Map(container, options); //지도 생성 및 객체 리턴

    marker.setMap(map);
  }, []);

  return <div id="map" style={{ width: '500px', height: '500px' }} />;
};

export default MapContainer;

아래 링크에 가서 참고하면 된다!
카카오 지도 api 참고문서

하지만 기왕이면 로드뷰까지 해보고 싶었다!

그래서 카카오 관련 홈페이지를 하나 더 참고해 버튼으로 토글이 가능한 정적 / 로드맵 지도를 구현해보았다.

참고링크

바뀐 코드는 아래와 같다. 스타일은 인라인으로 구현했고 ( 사실 tailwind-css로 통일성 있게 구현하고 싶었지만, library를 써서 그런지 tailwind를 쓰면 지도가 먹질 않아서 포기했다.... )

placePosition은 각각 위도와 경도를 원하는 곳으로 넣으면 된다.

코드를 보면 처음엔 'map'으로 초깃값이 설정되고, 버튼을 누르면 'roadview'로 설정되는 것을 볼 수 있다.

버튼은 내 마음대로 스타일링했다.

//Map.tsx
const MapContainer = () => {
  const [toggle, setToggle] = useState('map');

  const placePosition = {
    lat: 37.58194842014786,
    lng: 126.81493569640868,
  };

  return (
    <div style={{ width: '50vw', height: '50vh', position: 'relative' }}>
      <Map // 로드뷰를 표시할 Container
        center={placePosition}
        style={{
          display: toggle === 'map' ? 'block' : 'none',
          width: '100%',
          height: '100%',
        }}
        level={3}
      >
        <MapMarker position={placePosition} />
        {toggle === 'map' && (
          <input
            style={{
              position: 'absolute',
              top: '5px',
              left: '5px',
              zIndex: 10,
              color: 'black',
              cursor: 'pointer',
              border: 'none',
              borderRadius: 3,
              padding: '5px',
              backgroundColor: '#F5F5EB',
            }}
            type="button"
            onClick={() => setToggle('roadview')}
            title="로드뷰 보기"
            value="로드뷰 보기"
          />
        )}
      </Map>
      <Roadview // 로드뷰를 표시할 Container
        position={{ ...placePosition, radius: 50 }}
        style={{
          display: toggle === 'roadview' ? 'block' : 'none',
          width: '100%',
          height: '100%',
        }}
      >
        <RoadviewMarker position={placePosition} />
        {toggle === 'roadview' && (
          <input
            style={{
              position: 'absolute',
              top: '5px',
              left: '5px',
              zIndex: 10,
              color: 'black',
              cursor: 'pointer',
              border: 'none',
              borderRadius: 3,
              padding: '5px',
              backgroundColor: '#DEDED5',
            }}
            type="button"
            onClick={() => setToggle('map')}
            title="지도 보기"
            value="지도 보기"
          />
        )}
      </Roadview>
    </div>
  );
};

참고로 위도와 경도 설정한 참고 페이지도 추가한다. 구글링을 통해 찾았다.

위도,경도 참조 링크