[API] 리액트에서 카카오 지도 활용해보기

사용용도 :

공공API를 활용해 날씨와 미세먼지 알리미 웹 애플리케이션을 만드는 공부를 하려고 한다. 

그 애플리케이션 안에 현재의 위치를 카카오 지도를 통해 나타내고자 카카오 지도를 활용하려고 한다.

 

방법 :

카카오맵 개발 문서를 참조하여 만들어본다. 

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

 

 

 

1. 카카오 개발자 사이트에서 kakao 맵스의 (나의 경우)javascript를 클릭한다.

https://apis.map.kakao.com/

 

 

 

2. 지도를 담을 영역을 만든다.

나의경우 테스트를 위해 문서에 있는 그대로 500 * 400으로 하였다. 

import classes from "./Map.module.css";

const Map = () => {
  return <div className={classes.map}></div>;
};
export default Map;

 

3. 지도를 그리는 Javascript API를 불러온다. 

public/index.html에 입력한다. 

 

appkey=다음에는 발급받은 apikey를 입력하면 된다. 

 

 

 

 

api key를 환경변수를 입력하여 사용

 

여기서 .env에 

 

REACT_APP_KAKAO_API=발급받은 api키

를 입력하고 저장 후 (주의: 띄어쓰기 하지 않는다)

 

 

 

이렇게 입력한다. 

그리고 .gitignore에 .env파일을 추가해준다.

이런식으로 해야 깃헙에 개인의 api키가 올라가지 않는다. 

 

 

라이브러리 사용

 

해당 라이브러리를 모두 사용하기 위해 

 

위와 같이 script의  src에 libraries를 추가해준다. 

 

4. 사용하고자 하는 컴포넌트에서 지도를 띄우는 코드를 입력한다. 

 

처음 앱을 로딩할 때만 그려주기 위해 useEffect안에 넣어주고 deps를 비워준다.

 

import { useEffect } from "react";
import classes from "./Map.module.css";

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

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

  return <div className={classes.map}></div>;
};
export default Map;

 

 

5.  리액트 컴포넌트 상단에 아래의 코드 입력

 

 

window 객체로부터 스크립트에서 로드한 kakao api를 가져와야 하기 때문에

 

const { kakao } = window;

을 입력해준다.

 

 

 

6. 마커 띄우기 

 

let markerPosition = new kakao.maps.LatLng(latitude, logitude);

// 마커를 생성
let marker = new kakao.maps.Marker({
    position: markerPosition,
    });

// 마커를 지도 위에 표시
marker.setMap(map);

 

7. 지도상 위도와 경도 나의 위치로 변수에 담아 변경해주기

 

let latitude;
let logitude;
navigator.geolocation.getCurrentPosition(function (position) {
  latitude = position.coords.latitude;
  logitude = position.coords.longitude;
  console.log(latitude);
  console.log(logitude);
});

위의 코드를 해당 Map 컴포넌트 함수 위에 입력해준다.  

 

 

 

완성된 코드 

 

import { useEffect } from "react";
import classes from "./Map.module.css";
const { kakao } = window;

let latitude;
let logitude;
navigator.geolocation.getCurrentPosition(function (position) {
  latitude = position.coords.latitude;
  logitude = position.coords.longitude;
  console.log(latitude);
  console.log(logitude);
});
const Map = () => {
  useEffect(() => {
    const container = document.getElementById("map"); //지도를 담을 영역의 DOM 레퍼런스
    const options = {
      //지도를 생성할 때 필요한 기본 옵션
      center: new kakao.maps.LatLng(latitude, logitude), //지도의 중심좌표.
      level: 3, //지도의 레벨(확대, 축소 정도)
    };

    const map = new kakao.maps.Map(container, options); //지도 생성 및 객체 리턴
    //마커가 표시 될 위치
    let markerPosition = new kakao.maps.LatLng(latitude, logitude);

    // 마커를 생성
    let marker = new kakao.maps.Marker({
      position: markerPosition,
    });

    // 마커를 지도 위에 표시
    marker.setMap(map);
  }, []);

  return <div id="map" className={classes.map}></div>;
};
export default Map;

 

 

8. localhost로 실행해보면 나의 위치를 중심으로 한 지도가 화면에 뜬다.