이번 과정을 통해 google map의 Distance Matrix API을 사용하여 두 장소간의 경로 거리 및 시간을 계산하는 방법을 알아보도록 하겠습니다.

<aside> 💡 본 예제를 실습하기 위해선 google map api Key가 필요합니다. api key 발급 사이트 : https://developers.google.com/maps api key 생성 가이드 : https://developers.google.com/maps/documentation/routes/get-api-key

</aside>

0. Google Map Distance Matrix API 추가하기

Distance Matrix API를 사용하기 위해서는 우선 api연동에 모듈을 추가해 주어야 됩니다.

  1. 워크스페이스 콘솔의 좌측 메뉴에서 API연동을 선택합니다.
  2. +새 API 버튼을 클릭합니다.
  3. 별도 API 추가하기를 통해 Custom API를 추가해줍니다.
  4. 새 모듈을 클릭하고 명칭을 distancematrix로 해서 추가해줍니다.
  5. 아래 표에 값을 항목에 맞게 넣어준 뒤 배포를 해주도록 합니다.
Event Config Key units; mode; origins; destinations; region; key;
URL https://maps.googleapis.com/maps/api/distancematrix/json?units={=Event.units}&mode={=Event.mode}&origins={=Event.origins}&destinations={=Event.destinations}&region={=Event.region}&key={=Event.key}
Header {}
HTTP Method GET
Response Body {=Result}

Untitled

1. 화면 구성하기

검색할 시작주소와 도착주소를 입력한 placeInput 영역과 결과를 보여줄 result 레이아웃을 구성해 주도록 합니다.

1-1. 주소 입력 영역

검색할 두 주소를 입력하는 영역으로 "inputPlace" 카테고리로 관리하도록 하겠습니다.

Untitled