Kakao 지도 API Marker 찍어보기

LESA·2023년 1월 6일

Maps kakao kakao map marker kakao 지도 map api 지도 API

업로드한 사진의 메타데이터를 이용하여 Kakao Map API에 Marker 표시하기

시작하기

진행하던 프로젝트에 지도 API 를 사용할 경우가 생겼다.
Kakao 지도 API 를 사용했으며, 간단하게 마커를 찍는 이벤트를 해봤다.
나의 경우엔 사진의 메타데이터에서 위도와 경도를 가져와 마커에 찍게 하거나
사용자가 직접 마커를 남길 수 있게 할 것이다.

초기 셋팅 및 라이브러리

1. API KEY 발급
2. react-kakao-maps-sdk 라이브러리 사용

진행하던 프로젝트는 react 기반이라 Kakao Maps API를 react에 맞게 포팅한 라이브러리를 사용했다.

Map Component

지도가 쓰이는 곳이 여러곳이라 재활용성을 위해 컴포넌트화 시켰다.
카카오 지도 API 문서가 잘정리되어 있어서 크게 어려움은 없었다.

import { useState } from 'react';
import { Map, MapMarker } from 'react-kakao-maps-sdk';

const SelectMap = ({
  setUserLatitude,
  setUserLongitude,
  userLatitude,
  userLongitude,
}: ISelectMap) => (
  <Map
    center={{
      lat: 37.56009343411772,
      lng: 126.97692251945553,
    }}
    style={{
      width: '704px',
      height: '304px',
    }}
    level={9} // 지도의 확대 레벨
    onClick={(_t, mouseEvent) => {
      setUserLatitude(mouseEvent.latLng!.getLat());
      setUserLongitude(mouseEvent.latLng!.getLng());
    }}
  >
    {userLatitude && userLongitude && (
      <MapMarker position={{ lat: userLatitude, lng: userLongitude }} />
    )}
  </Map>
);