Google Directions API 활용하여 지도에 경로 띄우기

 

진행중인 프로젝트의 기능중 출발지  - 목적지 경로를 나타내주는 지도를 넣기 위해 Google Map의 Directions API를 활용해보았습니다.

구글 맵의 국가 이슈로 (한국 운전 경로 미지원), 하고자 했던 기능 다 넣지 못하고 네이버 맵으로 갈아탔지만, 그래도 혹시나
사용하고자 하시는 분들께 도움이 될까하여 작성하여 봅니다.

 

npm i @react-google-maps/api

https://www.npmjs.com/package/@react-google-maps/api

 

React 16.8버전 이후의 기능들을 활용하기 위한 react-google-maps의 업데이트 버전이라고 합니다.
React와 google map api의 연결 및 사용을 좀 더 손쉽게 사용토록 도와주는 패키지입니다.

 

티스토리가 리액트 코드에 코드스타일 반영이 되지 않아서, 캡쳐본을 업로드 하였습니다.

 

---

 

index.js

 

우선적으로 동작 확인을 위해, 특정 장소에 대한 위도, 경도를 하드코딩 해 둔 상태입니다.
Google Map을 띄워줄 Map 컴포넌트에 출발지, 목적지의 위도, 경도 정보를 전달해 주고 있습니다.

 

---

 

Map.js

 

---

 

GoogleMap 컴포넌트를 통해 지도를 띄우고, Directions 컴포넌트를 자식 컴포넌트로서 작성하여 줍니다.
Directions 컴포넌트는 패키지의 DirectionsService, DirectionsRenderer를 import하여 옵션과 함께 작성하여 줍니다.

DirectionsService에서 출발지, 목적지, 이동수단 (driving, transit, walking, bicycling 4가지)과 callback을 작성합니다.
옵션을 바탕으로 한 콜백 요청에 대한 결과가 정상적으로 오면, DirectionsRenerer를 통해 지도에 polyline 형태로 나타납니다.

travelMode가 DRIVING인 경우에는 결과가 나타나지 않는데, 한국에서는 아직 지원되지 않는다고 합니다.
이상하게도 대중교통을 이용한 경로에 대한 결과는 나오더군요.

 

 

구현 결과 입니다.