Kakao map SDK로 위치 보여주기

avatar
kidow
@kidow
Kakao map SDK로 위치 보여주기
태그
Kakao map
SDK
설명
카카오맵을 내 맘대로 활용해보기 위한 가장 기본적인 가이드
배포
배포
수정일
Aug 24, 2023 04:54 PM
생성일
Jul 17, 2023 03:31 PM
💡
이 글에서는 카카오맵으로 간단하게 특정 위치를 마킹하는 법에 대해 다룹니다.

API 환경 설정

notion image
먼저 카카오 개발자 센터에 들어갑니다. 카카오 로그인 후 상단에 “내 애플리케이션”을 클릭합니다.
notion image
새 애플리케이션을 추가합니다. 앱 아이콘, 앱 이름, 사업자명을 입력해서 생성합니다.
notion image
위와 같이 4개의 키가 생성됩니다. 저는 이 프로젝트를 삭제했기 때문에 상관없지만, Admin 키는 외부에 노출되서는 안되는 키입니다. 여기서 웹 서비스에 사용할 키는 JavaScript 키입니다.
왼쪽에 “플랫폼” 탭에 들어가서, “Web 플랫폼 등록”을 눌러줍니다. 그리고 다음과 같이 API 사용을 허용할 URL들을 등록합니다.
notion image
이제 환경 설정 준비는 끝났습니다.

코드 적용

먼저 카카오맵 SDK를 적용해야 합니다. Next.js 기준으로 다음과 같은 코드를 삽입합니다.
import Script from 'next/script'

<Script
  type="text/javascript"
  src="//dapi.kakao.com/v2/maps/sdk.js?appkey=[JavaScript 키]&libraries=services&autoload=false"
  async
  strategy="beforeInteractive"
/>
async는 꼭 넣어주지 않아도 되고, strategy 또한 상황에 따라 다른 값을 넣어야 할 때도 있습니다. 문서를 보시고 각자 판단하시면 되겠습니다.
카카오맵 UI 라이브러리를 불러옵니다.
npm install react-kakao-maps-sdk
카카오맵을 마커와 함께 렌더링하는 가장 기본적인 방식은 다음과 같습니다.
import { Map, MapMarker } from 'react-kakao-maps-sdk'

export default function KakaoMap() {
	return (
		<Map
			center={{ lat: 33.450701, lng: 126.570667 }}
			style={{ width: '100%', height: '100%' }}
		>
			<MapMarker position={{ lat: 33.450701, lng: 126.570667 }} />
		</Map>
	)
}
lat은 위도(latitude), lng은 경도(longitude)입니다. 홈페이지에서 제가 보여주고 있는 아래 지도는 다음과 같이 구성했습니다.
notion image
const lat = 37.5744985
const lng = 127.1926473
<Map
  center={{ lat, lng }}
  className="h-full w-full"
  draggable={false}
  zoomable={false}
  level={9}
>
  <MapMarker position={{ lat, lng }} />
</Map>
draggable을 false로 두면 지도를 움직일 수 없고, zoomable을 false로 두면 확대/축소할 수 없으며, level을 통해 지도의 확대 레벨을 지정할 수 있습니다.

참고 사이트

 
  • Kakao map
  • SDK