길찾기 서비스

컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.

개요

DirectionsService 객체를 사용하여 다양한 이동 방법을 사용하여 경로를 계산할 수 있습니다. 이 객체는 경로 요청을 수신하고 효율적인 경로를 반환하는 Google Maps API 경로 서비스와 통신합니다. 이동 시간은 최적화의 주요 요소이지만 거리, 회전 횟수 등의 여러 요인이 고려될 수 있습니다. 이러한 경로 결과를 직접 처리할 수도 있고 DirectionsRenderer 객체를 사용하여 결과를 렌더링할 수도 있습니다.

경로 요청에서 출발지나 목적지를 지정할 때 쿼리 문자열 (예: "Chicago, IL" 또는 "Darwin, NSW, Australia"), LatLng 값 또는 Place 객체를 지정할 수 있습니다.

Directions 서비스는 일련의 경유지를 사용하여 여러 부분으로 된 경로를 반환할 수 있습니다. 경로는 지도에 경로를 그리는 다중선으로 표시되거나 <div> 요소 내에 일련의 텍스트 설명 (예: 윌리엄스버그 브릿지 램프에서 우회전)으로 표시됩니다.

시작하기

Maps JavaScript API에서 Directions 서비스를 사용하려면 먼저 Maps JavaScript API에 대해 설정한 동일한 프로젝트의 Google Cloud Console에서 Directions API가 사용 설정되어 있는지 확인합니다.

활성화된 API 목록을 보려면:

  1. Google Cloud Console로 이동합니다.
  2. 프로젝트 선택 버튼을 클릭한 후 Maps JavaScript API에 설정한 것과 동일한 프로젝트를 선택하고 열기를 클릭합니다.
  3. 대시보드의 API 목록에서 Directions API를 찾습니다.
  4. 목록에 API가 표시되면 준비가 다 된 것입니다. API가 표시되지 않으면 사용 설정합니다.
    1. 페이지 상단에서 API 사용 설정을 선택하여 라이브러리 탭을 표시합니다. 또는 왼쪽 사이드 메뉴에서 라이브러리를 선택합니다.
    2. Directions API를 검색한 다음 결과 목록에서 선택합니다.
    3. 사용 설정을 선택합니다. 프로세스가 완료되면 대시보드의 API 목록에 Directions API가 나타납니다.

가격 및 정책

가격 정보

2018년 7월 16일부터 지도, 경로, 장소에 사용한 만큼만 지불하는 새로운 요금제가 도입되었습니다. 자바스크립트 Directions 서비스 사용에 대한 새로운 가격 및 사용량 한도에 대한 자세한 내용은 Directions API의 사용량 및 결제를 참조하세요.

비율 한도

추가 요청의 비율 한도에 관한 다음 사항에 유의하세요.

동일한 프로젝트를 공유하는 사용자 수에 관계없이 사용자 세션당 비율 제한이 적용됩니다. API를 처음 로드하면 요청의 초기 할당량이 할당됩니다. 이 할당량을 사용하면 API가 초당 추가 요청에 비율 제한을 적용합니다. 특정 기간 내에 너무 많은 요청이 발생하면 API는 OVER_QUERY_LIMIT 응답 코드를 반환합니다.

세션당 비율 제한으로 인해 일괄 요청에 클라이언트 측 서비스를 사용할 수 없습니다. 일괄 요청의 경우 Directions API 웹 서비스를 사용하세요.

정책

Directions 서비스 사용은 Directions API에 설명된 정책을 따라야 합니다.

길찾기 요청

Google Maps API는 외부 서버를 호출해야 하므로 Directions 서비스 액세스는 비동기식입니다. 따라서 요청 완료 시 실행할 콜백 메서드를 전달해야 합니다. 이 콜백 메서드가 결과를 처리해야 합니다. 경로 서비스는 2개 이상의 가능한 운항 일정을 별도의 routes[]의 배열로 반환할 수 있습니다.

Maps JavaScript API에서 경로를 사용하려면 DirectionsService 유형의 객체를 만들고 DirectionsService.route()를 호출하여 Directions 서비스에 요청을 시작하고, 응답 수신 시 실행할 입력 용어와 콜백 메서드가 포함된 DirectionsRequest 객체 리터럴에 이를 전달합니다.

DirectionsRequest 객체 리터럴에는 다음 필드가 포함되어 있습니다.

{
  origin: LatLng | String | google.maps.Place,
  destination: LatLng | String | google.maps.Place,
  travelMode: TravelMode,
  transitOptions: TransitOptions,
  drivingOptions: DrivingOptions,
  unitSystem: UnitSystem,
  waypoints[]: DirectionsWaypoint,
  optimizeWaypoints: Boolean,
  provideRouteAlternatives: Boolean,
  avoidFerries: Boolean,
  avoidHighways: Boolean,
  avoidTolls: Boolean,
  region: String
}

다음은 필드에 대한 설명입니다.

  • origin(필수)는 경로를 계산할 시작 위치를 지정합니다. 이 값은 String (예: Chicago, IL")로 지정되거나 LatLng 값 또는 Place 객체로 지정될 수 있습니다. Place 객체를 사용하는 경우 장소 ID, 쿼리 문자열 또는 LatLng 위치를 지정할 수 있습니다. Maps JavaScript API의 지오코딩, 장소 검색, Place Autocomplete 서비스에서 장소 ID를 가져올 수 있습니다. Place Autocomplete의 장소 ID를 사용하는 예는 장소 자동 완성 및 경로를 참고하세요.
  • destination (필수)는 경로를 계산할 종료 위치를 지정합니다. 옵션은 위에 설명된 origin 필드의 옵션과 동일합니다.
  • travelMode(필수)는 경로를 계산할 때 사용할 이동 모드를 지정합니다. 유효한 값은 아래의 여행 모드에서 지정됩니다.
  • transitOptions(선택사항)는 travelModeTRANSIT인 요청에만 적용되는 값을 지정합니다. 유효한 값은 아래의 대중교통 옵션에 설명되어 있습니다.
  • drivingOptions (선택사항)는 travelModeDRIVING인 요청에만 적용되는 값을 지정합니다. 유효한 값은 아래의 운전 옵션에 설명되어 있습니다.
  • unitSystem (선택사항) - 결과를 표시할 때 사용할 단위 시스템을 지정합니다. 유효한 값은 아래의 단위 체계에 지정되어 있습니다.

  • waypoints[] (선택사항)은 DirectionsWaypoint의 배열을 지정합니다. 경유지는 지정된 위치를 통해 경로를 라우팅하여 경로를 변경합니다. 경유지는 아래와 같이 필드가 있는 객체 리터럴로 지정됩니다.

    • location는 경유지의 위치를 LatLng, Place 객체 또는 지오코딩될 String로 지정합니다.
    • stopover는 경유지가 경로의 한 지점임을 나타내는 불리언입니다. 이는 경로를 두 경로로 분할하는 효과가 있습니다.

    경유지에 대한 자세한 내용은 아래의 경로에 경유지 사용하기를 참고하세요.

  • optimizeWaypoints(선택사항)은 제공된 waypoints을 사용하는 경로를 좀 더 효율적인 순서로 경유지를 재정렬하여 최적화할 수 있음을 지정합니다. true인 경우 경로 서비스는 waypoint_order 필드에서 재정렬된 waypoints를 반환합니다. 자세한 내용은 아래의 경로에서 경유지 사용하기를 참고하세요.
  • provideRouteAlternatives(선택사항) - true로 설정된 경우 응답 서비스가 응답에서 둘 이상의 대체 경로를 제공할 수 있음을 나타냅니다. 경로 대체 옵션을 제공하면 서버의 응답 시간이 증가할 수 있습니다. 중간 경유지가 없는 요청에만 사용할 수 있습니다.
  • avoidFerries(선택사항) - true로 설정된 경우 가능하면 계산된 경로가 페리를 피해야 함을 나타냅니다.
  • avoidHighways(선택사항) - true로 설정된 경우 가능하면 주요 고속도로를 피하여 경로를 계산해야 함을 나타냅니다.
  • avoidTolls(선택사항) - true로 설정된 경우 가능하면 계산된 경로에 유료 도로를 피해야 함을 나타냅니다.
  • region (선택사항)은 지역 코드를 ccTLD(최상위 도메인) 2자리 값으로 지정합니다. 자세한 내용은 아래의 지역 편향을 참고하세요.

다음은 샘플 DirectionsRequest입니다.

{
  origin: 'Chicago, IL',
  destination: 'Los Angeles, CA',
  waypoints: [
    {
      location: 'Joplin, MO',
      stopover: false
    },{
      location: 'Oklahoma City, OK',
      stopover: true
    }],
  provideRouteAlternatives: false,
  travelMode: 'DRIVING',
  drivingOptions: {
    departureTime: new Date(/* now, or future date */),
    trafficModel: 'pessimistic'
  },
  unitSystem: google.maps.UnitSystem.IMPERIAL
}

이동 모드

경로를 계산할 때 사용할 이동수단을 지정해야 합니다. 현재 지원되는 이동수단은 다음과 같습니다.

  • DRIVING(기본값)은 도로망을 사용하는 표준 운전 경로를 나타냅니다.
  • BICYCLING에서 자전거 전용도로 및 선호 거리를 경유하는 자전거 경로를 요청합니다.
  • TRANSIT에서는 대중교통 경로를 통한 경로를 요청합니다.
  • WALKING는 보행 경로 및 인도를 경유하는 도보 경로를 요청합니다.

Google Maps Platform 서비스 지역 세부정보를 참조하여 국가에서 지원되는 국가 범위를 확인하세요. 이 길찾기 유형을 사용할 수 없는 리전의 경로를 요청하면 응답에서 DirectionsStatus="ZERO_RESULTS"를 반환합니다.

참고: 도보 경로는 명확한 보행자 전용 도로를 포함할 수 없으므로 도보경로는 기본 DirectionsRenderer를 사용하지 않는 경우 표시해야 하는 경고를 DirectionsResult에서 반환합니다.

대중교통 옵션

길찾기 요청에서 이용 가능한 옵션은 이동 모드별로 다양합니다. 대중교통 경로를 요청할 때 avoidHighways, avoidTolls, waypoints[], optimizeWaypoints 옵션은 무시됩니다. TransitOptions 객체 리터럴을 통해 대중교통별 라우팅 옵션을 지정할 수 있습니다.

대중교통 길찾기는 시간에 민감합니다. 경로는 향후 시간에 대해서만 반환됩니다.

TransitOptions 객체 리터럴에는 다음 필드가 포함되어 있습니다.

{
  arrivalTime: Date,
  departureTime: Date,
  modes[]: TransitMode,
  routingPreference: TransitRoutePreference
}

다음은 필드에 대한 설명입니다.

  • arrivalTime(선택사항) - 원하는 도착 시간을 Date 객체로 지정합니다. 도착 시간이 지정되면 출발 시간은 무시됩니다.
  • departureTime(선택사항) - 원하는 출발 시간을 Date 객체로 지정합니다. arrivalTime가 지정되면 departureTime는 무시됩니다. departureTime 또는 arrivalTime에 값이 지정되지 않은 경우 기본값은 현재 (즉, 현재 시간)입니다.
  • modes[](선택사항) - TransitMode 객체 리터럴을 하나 이상 포함하는 배열입니다. 이 필드는 요청에 API 키가 포함된 경우에만 포함할 수 있습니다. 각 TransitMode은 선호하는 대중교통 모드를 지정합니다. 다음 값이 허용됩니다.
    • BUS는 계산된 경로가 버스 이동을 선호함을 나타냅니다.
    • RAIL는 계산된 경로가 기차, 전차, 경전철, 지하철 이동을 선호함을 나타냅니다.
    • SUBWAY는 계산된 경로가 지하철 이동을 선호함을 나타냅니다.
    • TRAIN는 계산된 경로가 기차 이동을 선호함을 나타냅니다.
    • TRAM는 계산된 경로가 트램 및 경전철 이동을 선호함을 나타냅니다.
  • routingPreference (선택사항) - 대중교통 경로의 환경설정을 지정합니다. 이 옵션을 사용하면 API에서 선택한 기본 최적 경로를 허용하는 대신 반환된 옵션을 편향할 수 있습니다. 이 필드는 요청에 API 키가 포함된 경우에만 지정될 수 있습니다. 다음 값이 허용됩니다.
    • FEWER_TRANSFERS는 계산된 경로가 제한된 환승 횟수를 선호함을 나타냅니다.
    • LESS_WALKING는 계산된 경로가 제한된 도보량을 선호함을 나타냅니다.

다음은 대중교통별 샘플 DirectionsRequest입니다.

{
  origin: 'Hoboken NJ',
  destination: 'Carroll Gardens, Brooklyn',
  travelMode: 'TRANSIT',
  transitOptions: {
    departureTime: new Date(1337675679473),
    modes: ['BUS'],
    routingPreference: 'FEWER_TRANSFERS'
  },
  unitSystem: google.maps.UnitSystem.IMPERIAL
}

자동차 옵션

DrivingOptions 객체를 통해 운전 경로의 라우팅 옵션을 지정할 수 있습니다.

DrivingOptions 객체에는 다음 필드가 포함되어 있습니다.

{
  departureTime: Date,
  trafficModel: TrafficModel
}

다음은 필드에 대한 설명입니다.

  • departureTime(drivingOptions 객체 리터럴이 유효해야 함)은 원하는 출발 시간을 Date 객체로 지정합니다. 이 값은 현재 시간 또는 미래의 특정 시간으로 설정되어야 합니다. 과거 날짜일 수 없습니다. (API는 모든 시간대에서 일관된 처리를 보장하기 위해 모든 날짜를 UTC로 변환합니다.) Google Maps Platform 프리미엄 플랜 고객의 경우 요청에 departureTime를 포함하면 API는 당시의 예상 교통 상황을 고려해 최적의 경로를 반환하고 응답의 예상 트래픽(duration_in_traffic)을 포함합니다. 출발 시간을 지정하지 않으면 (즉, 요청에 drivingOptions가 포함되지 않는 경우) 일반적으로 교통 상황을 고려하지 않은 최적의 경로가 반환됩니다.
  • trafficModel (선택사항) - 트래픽의 시간을 계산할 때 사용할 가정을 지정합니다. 이 설정은 응답의 duration_in_traffic 필드에서 반환된 값에 영향을 미칩니다. 여기에는 이전 평균을 기반으로 한 예상 트래픽 시간이 포함됩니다. 기본값은 bestguess입니다. 다음 값이 허용됩니다.
    • bestguess (기본값)은 과거의 교통상황과 실시간 교통정보를 모두 알고 있을 때 반환된 duration_in_traffic가 가장 근접한 예상 이동 시간을 나타냅니다. 실시간 트래픽이 departureTime에 가까워질수록 더 중요해집니다.
    • pessimistic는 반환된 duration_in_traffic가 대부분의 실제 이동 시간보다 더 길어야 함을 나타내지만 특히 교통 상황이 나쁜 날은 이 값을 초과할 수 있습니다.
    • optimistic는 반환된 duration_in_traffic가 대부분의 날 실제 이동 시간보다 짧다는 것을 나타냅니다. 단, 교통 상황이 특히 좋은 날은 이 값보다 빠를 수 있습니다.

다음은 운전 경로를 보여주는 샘플 DirectionsRequest입니다.

{
  origin: 'Chicago, IL',
  destination: 'Los Angeles, CA',
  travelMode: 'DRIVING',
  drivingOptions: {
    departureTime: new Date(Date.now() + N),  // for the time N milliseconds from now.
    trafficModel: 'optimistic'
  }
}

단위 체계

기본적으로 길찾기는 출발지 국가 또는 지역의 단위 체계를 사용하여 계산되고 표시됩니다. 참고: 주소가 아닌 위도/경도 좌표를 사용하여 표현된 출발지는 기본적으로 측정항목 단위로 설정됩니다. 예를 들어 일리노이주 에서 시카고 토론토까지의 경로는 마일 단위로 결과를 표시하고, 반대 경로는 킬로미터 단위로 결과를 표시합니다. 다음 UnitSystem 값 중 하나를 사용하여 요청 내에 단위 체계를 명시적으로 설정하여 이 단위 체계를 재정의할 수 있습니다.

  • UnitSystem.METRIC는 측정항목 시스템의 사용량을 지정합니다. 거리는 킬로미터로 표시됩니다.
  • UnitSystem.IMPERIAL는 야드파운드법(영국) 체계를 사용하도록 지정합니다. 거리는 마일로 표시됩니다.

참고: 이 단위 체계 설정은 사용자에게 표시되는 텍스트에만 영향을 미칩니다. 경로 결과에는 사용자에게 표시되지 않는 거리 도 포함되며, 이 값은 항상 미터로 표시됩니다.

길찾기의 지역 편중

Google 지도 API 경로 서비스는 자바스크립트 부트스트랩을 로드한 도메인 (리전 또는 국가)의 영향을 받은 주소 결과를 반환합니다. 대부분의 사용자는 https://maps.googleapis.com/를 로드하므로 암시적 도메인을 미국으로 설정합니다. 지원되는 다른 도메인에서 부트스트랩을 로드하면 해당 도메인의 영향을 받게 됩니다. 예를 들어 'San Francisco'를 검색하면 https://maps.googleapis.com/ (미국)을 로드하는 애플리케이션은 http://maps.google.es/ (스페인)를 로드하는 애플리케이션과 다른 결과를 반환할 수 있습니다.

region 매개변수를 사용하여 특정 지역에 편향된 결과를 반환하도록 Directions 서비스를 설정할 수도 있습니다. 이 매개변수는 영숫자가 아닌 2자리 유니코드 지역 하위 태그로 지정된 지역 코드를 사용합니다. 대부분의 경우 이러한 태그는 "co.uk"에서와 같이 ccTLD(최상위 도메인) 두 문자 값에 직접 매핑됩니다. 경우에 따라 region 태그는 ISO-3166-1 코드도 지원하며, 이 코드는 ccTLD 값과 다른 경우도 있습니다(예: 영국의 경우 "GB).

region 매개변수를 사용하는 경우:

  • 하나의 국가 또는 지역만 지정하세요. 여러 개의 값이 무시되므로 요청이 실패할 수 있습니다.
  • 2자리 지역 하위 태그 (유니코드 CLDR 형식)만 사용하세요. 다른 모든 입력은 오류를 생성합니다.

지역 상세 검색은 길찾기를 지원하는 국가 및 지역에만 지원됩니다. Directions API의 국제적 지원 범위를 보려면 Google Maps Platform 서비스 지역 세부정보를 참고하세요.

길찾기 렌더링

route() 메서드로 DirectionsService에 대한 경로 요청을 시작하려면 서비스 요청이 완료될 때 실행되는 콜백을 전달해야 합니다. 이 콜백은 응답에 DirectionsResultDirectionsStatus 코드를 반환합니다.

길찾기 쿼리 상태

DirectionsStatus는 다음 값을 반환할 수 있습니다.

  • OK는 응답에 유효한 DirectionsResult가 포함되어 있음을 나타냅니다.
  • NOT_FOUND는 요청의 출발지, 목적지 또는 경유지에 지정된 위치 중 하나 이상을 지오코딩할 수 없음을 나타냅니다.
  • ZERO_RESULTS는 출발지와 목적지 사이에 경로를 찾을 수 없음을 나타냅니다.
  • MAX_WAYPOINTS_EXCEEDEDDirectionsRequest에 너무 많은 DirectionsWaypoint 필드가 제공되었음을 나타냅니다. 경유점 한도에 관한 아래 섹션을 참조하세요.
  • MAX_ROUTE_LENGTH_EXCEEDED는 요청된 경로가 너무 길어서 처리할 수 없음을 나타냅니다. 이 오류는 더 복잡한 경로가 반환될 때 발생합니다. 경유지, 회전 지점 또는 안내의 수를 줄여 보세요.
  • INVALID_REQUEST는 제공된 DirectionsRequest가 잘못되었음을 나타냅니다. 이 오류 코드의 가장 일반적인 원인은 출발지나 목적지가 누락된 요청이나 경유지가 포함된 대중교통 요청 때문입니다.
  • OVER_QUERY_LIMIT는 웹페이지에서 허용된 기간 동안 너무 많은 요청을 보냈음을 나타냅니다.
  • REQUEST_DENIED는 웹페이지에서 경로 서비스를 사용할 수 없음을 나타냅니다.
  • UNKNOWN_ERROR은 서버 오류로 인해 경로 요청을 처리할 수 없음을 나타냅니다. 다시 시도하면 요청이 성공할 수 있습니다.

결과를 처리하기 전에 이 값을 확인하여 경로 쿼리가 유효한 결과를 반환했는지 확인해야 합니다.

DirectionsResult 표시

DirectionsResult에는 경로 쿼리의 결과가 포함되며, 이 결과를 직접 처리하거나 지도에 결과를 자동으로 표시하는 DirectionsRenderer 객체에 전달할 수 있습니다.

DirectionsRenderer를 사용하여 DirectionsResult를 표시하려면 다음을 실행해야 합니다.

  1. DirectionsRenderer 객체를 만듭니다.
  2. 렌더러에서 setMap()를 호출하여 전달된 지도에 바인딩합니다.
  3. 렌더기에서 setDirections()을 호출하여 위에서 언급한 대로 DirectionsResult를 전달합니다. 렌더기는 MVCObject이므로 속성의 변경을 자동으로 감지하고 연결된 방향이 변경되면 지도를 업데이트합니다.

다음 예시는 Route 66의 두 위치 간 경로를 계산하며, 출발지와 목적지는 드롭다운 목록에서 지정된 "start""end" 값으로 설정됩니다. DirectionsRenderer는 표시된 위치 간의 다중선 표시, 출발지, 목적지, 경유지(해당되는 경우)의 마커 배치를 처리합니다.

function initMap() {
  var directionsService = new google.maps.DirectionsService();
  var directionsRenderer = new google.maps.DirectionsRenderer();
  var chicago = new google.maps.LatLng(41.850033, -87.6500523);
  var mapOptions = {
    zoom:7,
    center: chicago
  }
  var map = new google.maps.Map(document.getElementById('map'), mapOptions);
  directionsRenderer.setMap(map);
}

function calcRoute() {
  var start = document.getElementById('start').value;
  var end = document.getElementById('end').value;
  var request = {
    origin: start,
    destination: end,
    travelMode: 'DRIVING'
  };
  directionsService.route(request, function(result, status) {
    if (status == 'OK') {
      directionsRenderer.setDirections(result);
    }
  });
}

HTML 본문:

<div>
<strong>Start: </strong>
<select id="start" onchange="calcRoute();">
  <option value="chicago, il">Chicago</option>
  <option value="st louis, mo">St Louis</option>
  <option value="joplin, mo">Joplin, MO</option>
  <option value="oklahoma city, ok">Oklahoma City</option>
  <option value="amarillo, tx">Amarillo</option>
  <option value="gallup, nm">Gallup, NM</option>
  <option value="flagstaff, az">Flagstaff, AZ</option>
  <option value="winona, az">Winona</option>
  <option value="kingman, az">Kingman</option>
  <option value="barstow, ca">Barstow</option>
  <option value="san bernardino, ca">San Bernardino</option>
  <option value="los angeles, ca">Los Angeles</option>
</select>
<strong>End: </strong>
<select id="end" onchange="calcRoute();">
  <option value="chicago, il">Chicago</option>
  <option value="st louis, mo">St Louis</option>
  <option value="joplin, mo">Joplin, MO</option>
  <option value="oklahoma city, ok">Oklahoma City</option>
  <option value="amarillo, tx">Amarillo</option>
  <option value="gallup, nm">Gallup, NM</option>
  <option value="flagstaff, az">Flagstaff, AZ</option>
  <option value="winona, az">Winona</option>
  <option value="kingman, az">Kingman</option>
  <option value="barstow, ca">Barstow</option>
  <option value="san bernardino, ca">San Bernardino</option>
  <option value="los angeles, ca">Los Angeles</option>
</select>
</div>

예 보기

다음 예시는 캘리포니아 샌프란시스코의 헤이트-애쉬베리와 오션 비치 사이의 다양한 이동 수단을 사용하는 경로를 보여줍니다.

function initMap() {
  var directionsService = new google.maps.DirectionsService();
  var directionsRenderer = new google.maps.DirectionsRenderer();
  var haight = new google.maps.LatLng(37.7699298, -122.4469157);
  var oceanBeach = new google.maps.LatLng(37.7683909618184, -122.51089453697205);
  var mapOptions = {
    zoom: 14,
    center: haight
  }
  var map = new google.maps.Map(document.getElementById('map'), mapOptions);
  directionsRenderer.setMap(map);
}

function calcRoute() {
  var selectedMode = document.getElementById('mode').value;
  var request = {
      origin: haight,
      destination: oceanBeach,
      // Note that JavaScript allows us to access the constant
      // using square brackets and a string value as its
      // "property."
      travelMode: google.maps.TravelMode[selectedMode]
  };
  directionsService.route(request, function(response, status) {
    if (status == 'OK') {
      directionsRenderer.setDirections(response);
    }
  });
}

HTML 본문:

<div>
<strong>Mode of Travel: </strong>
<select id="mode" onchange="calcRoute();">
  <option value="DRIVING">Driving</option>
  <option value="WALKING">Walking</option>
  <option value="BICYCLING">Bicycling</option>
  <option value="TRANSIT">Transit</option>
</select>
</div>

예 보기

DirectionsRenderer는 다중선 및 연결된 마커의 표시를 처리할 뿐 아니라, 경로의 텍스트 표시를 일련의 단계로 처리할 수도 있습니다. 이렇게 하려면 DirectionsRenderer에서 setPanel()를 호출하여 이 정보를 표시할 <div>를 전달합니다. 그렇게 하면 적절한 저작권 정보와 결과와 관련된 모든 경고도 표시할 수 있습니다.

텍스트 경로는 브라우저의 기본 언어 설정이나 language 매개변수를 사용하여 API 자바스크립트를 로드할 때 지정된 언어를 사용하여 제공됩니다. 자세한 내용은 현지화를 참고하세요. 대중교통 경로의 경우 해당 대중교통 정류장의 시간대로 시간이 표시됩니다.

다음 예는 위에 표시된 예와 동일하지만 경로를 표시할 <div> 패널을 포함합니다.

function initMap() {
  var directionsService = new google.maps.DirectionsService();
  var directionsRenderer = new google.maps.DirectionsRenderer();
  var chicago = new google.maps.LatLng(41.850033, -87.6500523);
  var mapOptions = {
    zoom:7,
    center: chicago
  }
  var map = new google.maps.Map(document.getElementById('map'), mapOptions);
  directionsRenderer.setMap(map);
  directionsRenderer.setPanel(document.getElementById('directionsPanel'));
}

function calcRoute() {
  var start = document.getElementById('start').value;
  var end = document.getElementById('end').value;
  var request = {
    origin:start,
    destination:end,
    travelMode: 'DRIVING'
  };
  directionsService.route(request, function(response, status) {
    if (status == 'OK') {
      directionsRenderer.setDirections(response);
    }
  });
}

HTML 본문:

<div id="map" style="float:left;width:70%;height:100%"></div>
<div id="directionsPanel" style="float:right;width:30%;height:100%"></div>

예 보기

DirectionsResult 객체

DirectionsService에 경로 요청을 보내면 상태 코드와 결과(DirectionsResult 객체)로 구성된 응답이 수신됩니다. DirectionsResult는 다음 필드가 포함된 객체 리터럴입니다.

  • geocoded_waypoints[]에는 DirectionsGeocodedWaypoint 객체의 배열이 포함되며 각 객체에는 출발지, 목적지, 경유지의 지오코딩에 관한 세부정보가 포함됩니다.
  • routes[]에는 DirectionsRoute 객체의 배열이 포함됩니다. 각 경로는 DirectionsRequest에서 제공된 출발지에서 목적지로 가는 방법을 나타냅니다. 일반적으로 요청의 provideRouteAlternatives 필드가 true로 설정된 경우 여러 경로가 반환될 수 있는 경우가 아니면 모든 요청에 하나의 경로가 반환됩니다.

참고: 대체 경로에서는 via_waypoint 속성이 지원 중단되었습니다. 버전 3.27은 대체 경로에 경유지를 추가하여 추가 기능을 제공하는 마지막 API입니다. API 버전 3.28 이상에서는 대체 경로의 드래그를 사용 중지하여 Directions 서비스를 사용하여 드래그 가능한 경로를 계속 구현할 수 있습니다. 기본 경로만 드래그할 수 있어야 합니다. 사용자는 대체 경로와 일치할 때까지 기본 경로를 드래그할 수 있습니다.

길찾기 지오코딩된 경유지

DirectionsGeocodedWaypoint에는 출발지, 목적지, 경유지의 지오코딩에 관한 세부정보가 포함되어 있습니다.

DirectionsGeocodedWaypoint는 다음 필드가 포함된 객체 리터럴입니다.

  • geocoder_status는 지오코딩 작업으로 발생한 상태 코드를 나타냅니다. 이 필드는 다음 값을 포함할 수 있습니다.
    • "OK"는 오류가 발생하지 않았음을 나타냅니다. 주소가 성공적으로 파싱되었고 최소 한 개의 지오코드가 반환되었습니다.
    • "ZERO_RESULTS"는 지오코딩이 성공했지만 반환된 결과가 없음을 나타냅니다. 이는 지오코더가 존재하지 않는 address를 전달한 경우 발생할 수 있습니다.
  • partial_match는 지오코더가 원래 요청과 정확히 일치하는 결과를 반환하지 않았지만, 요청된 주소의 일부분과 일치할 수 있음을 나타냅니다. 맞춤법 오류 또는 불완전한 주소가 있는지 원래 요청을 확인하는 것이 좋습니다.

    부분 일치는 주로 요청에서 전달한 지역 내에 존재하지 않는 상세 주소가 있는 경우에 발생합니다. 요청이 동일한 지역에 있는 두 개 이상의 위치와 일치하는 경우에도 부분 일치가 반환될 수 있습니다. 예를 들어 "Hillpar St, Bristol, UK'는 Henry Street와 Henrietta Street 모두에 대해 부분 일치를 반환합니다. 요청에 맞춤법이 잘못된 주소 구성요소가 포함된 경우 지오코딩 서비스에서 대체 주소를 제안할 수 있습니다. 이 방법으로 트리거되는 추천도 부분 일치로 표시됩니다.

  • place_id는 다른 Google API와 함께 사용할 수 있는 장소의 고유 식별자입니다. 예를 들어 Google Places API 라이브러리와 함께 place_id을 사용하여 전화번호, 영업시간, 사용자 리뷰 등의 지역 비즈니스 세부정보를 가져올 수 있습니다. 장소 ID 개요를 참고하세요.
  • types[]는 반환된 결과의 유형을 나타내는 배열입니다. 이 배열에는 결과에 반환된 특성 유형을 식별하는 0개 이상의 태그 집합이 포함됩니다. 예를 들어 '시카고'의 지오코딩은 '시카고'가 도시임을 나타내고 '정치'도 정치적 엔티티임을 나타내는 '지역'을 반환합니다.

길찾기 경로

참고: 기존 DirectionsTrip 객체의 이름이 DirectionsRoute로 변경되었습니다. 이제 경로는 단순히 상위 여정의 한 구간이 아니라 시작에서 끝까지의 전체 여정을 의미합니다.

DirectionsRoute에는 지정된 출발지와 목적지에서 가져온 단일 결과가 포함됩니다. 이 경로는 경유지가 지정되었는지 여부에 따라 하나 이상의 구간 (DirectionsLeg 유형)으로 구성될 수 있습니다. 또한 경로에는 라우팅 정보 외에 사용자에게 표시해야 하는 저작권 및 경고 정보도 포함되어 있습니다.

DirectionsRoute는 다음 필드가 포함된 객체 리터럴입니다.

  • legs[]에는 DirectionsLeg 객체의 배열이 포함되며, 각 객체에는 지정된 경로 내의 두 위치에서 온 경로 구간에 대한 정보가 포함됩니다. 지정된 각 경유지 또는 목적지에 대해 별도의 구간이 있습니다. 경유지가 없는 경로에는 정확히 하나의 DirectionsLeg가 포함됩니다. 각 구간은 일련의 DirectionStep로 구성됩니다.
  • waypoint_order에는 계산된 경로에 있는 경유지의 순서를 나타내는 배열이 포함됩니다. DirectionsRequestoptimizeWaypoints: true를 전달한 경우 이 배열에는 변경된 순서가 포함될 수 있습니다.
  • overview_path에는 결과 경로의 대략적인 (평활화된) 경로를 나타내는 LatLng 배열이 포함됩니다.
  • overview_polyline에는 경로의 인코딩된 다중선 표현을 보유한 단일 points 객체가 포함됩니다. 이 다중선은 최종 경로의 대략적인 (평활화된) 경로입니다.
  • bounds에는 지정된 경로를 따라 다중선의 경계를 나타내는 LatLngBounds가 포함됩니다.
  • copyrights에는 이 경로에 표시될 저작권 텍스트가 포함됩니다.
  • warnings[]에는 이러한 경로를 표시할 때 표시할 경고의 배열이 포함됩니다. 제공된 DirectionsRenderer 객체를 사용하지 않는 경우 이러한 경고를 직접 처리하고 표시해야 합니다.
  • fare에는 이 경로의 총 요금 (즉, 총 티켓 비용)이 포함됩니다. 이 속성은 대중교통 요청 및 모든 대중교통 구간의 요금 정보가 제공되는 경로인 경우에만 반환됩니다. 이 정보에는 다음이 포함됩니다.
    • currency: 금액이 표시되는 통화를 나타내는 ISO 4217 통화 코드입니다.
    • value: 총 요금을 위에 지정된 통화로 나타냅니다.

길찾기 구간

참고: 기존 DirectionsRoute 객체의 이름이 DirectionsLeg로 변경되었습니다.

DirectionsLeg는 계산된 경로의 출발지에서 목적지까지 여정의 단일 구간을 정의합니다. 경유지가 포함되지 않은 경로의 경우 경로가 한 개 이상의 구간으로 구성되지만, 하나 이상의 경유지를 정의하는 경로에서는 경로가 여정의 특정 구간에 해당하는 하나 이상의 구간으로 구성됩니다.

DirectionsLeg는 다음 필드가 포함된 객체 리터럴입니다.

  • steps[]에는 여정 구간의 각 개별 단계에 관한 정보를 표시하는 DirectionsStep 객체의 배열이 포함됩니다.
  • distance는 이 구간에서 적용되는 총 거리를 다음 형식의 Distance 객체로 나타냅니다.

    • value는 미터 단위의 거리를 나타냅니다.
    • text는 거리의 문자열 표현을 포함하며, 기본적으로 출발지에서 사용되는 단위로 표시됩니다. (예를 들어 미국 내 출처에는 마일이 사용됩니다.) 원래 쿼리에서 구체적으로 UnitSystem를 설정하여 단위 체계를 재정의할 수 있습니다. 사용하는 단위 시스템과 관계없이 distance.value 필드에는 항상 미터로 표시된 값이 포함됩니다.

    거리를 알 수 없는 경우에는 이 필드가 정의되지 않을 수도 있습니다.

  • duration는 이 구간의 총 소요 시간을 다음 형식의 Duration 객체로 나타냅니다.

    • value는 기간을 초 단위로 나타냅니다.
    • text에는 기간의 문자열 표현이 포함되어 있습니다.

    기간을 알 수 없는 경우에는 이 필드가 정의되지 않을 수도 있습니다.

  • duration_in_traffic는 현재 교통 상황을 고려하여 이 구간의 총시간을 나타냅니다. duration_in_traffic는 다음 사항이 모두 참인 경우에만 반환됩니다.

    • 요청이 중간 기착 경유지를 포함하지 않습니다. 즉, stopovertrue인 경유지는 포함되지 않습니다.
    • 특히 운전 경로에 관한 요청입니다. modedriving로 설정됩니다.
    • departureTime는 요청에서 drivingOptions 필드의 일부로 포함되어 있습니다.
    • 요청한 경로에 대해 교통 상황이 제공됩니다.

    duration_in_traffic에는 다음과 같은 필드가 포함됩니다.

    • value는 기간을 초 단위로 나타냅니다.
    • text에는 사람이 읽을 수 있는 재생 시간이 포함됩니다.
  • arrival_time에는 이 구간의 예상 도착 시간이 포함됩니다. 이 속성은 대중교통 길찾기에 대해서만 반환됩니다. 결과는 다음 세 가지 속성이 포함된 Time 객체로 반환됩니다.
    • value은 자바스크립트 Date 객체로 지정된 시간입니다.
    • text 문자열로 지정된 시간입니다. 시간은 대중교통 정류장의 시간대로 표시됩니다.
    • time_zone에는 이 역의 시간대가 포함됩니다. 이 값은 IANA 시간대 데이터베이스에 정의된 시간대의 이름입니다(예: "America/New_York").
  • departure_time에는 Time 구간으로 지정된 이 구간의 예상 출발 시간이 포함됩니다. departure_time은 대중교통 길찾기에만 사용할 수 있습니다.
  • start_location에는 이 구간의 출발지의 LatLng가 포함됩니다. Directions Web Service는 가장 가까운 교통수단 옵션 (일반적으로 도로)을 사용하여 시작 지점에서 종료 지점까지의 거리를 계산하기 때문에 도로가 출발지 근처에 있지 않은 경우 이 구간에서 제공된 출발지와 start_location이 다를 수 있습니다.
  • end_location에는 이 구간의 대상 LatLng가 포함되어 있습니다. DirectionsService는 출발지와 목적지에서 가장 가까운 이동 옵션(보통 도로)을 사용하여 위치 간 경로를 계산하기 때문에 end_location이(가) 목적지 근처에 있지 않은 경우 이 구간에서 제공된 목적지와 다를 수 있습니다.
  • start_address에는 이 구간의 시작 지점에 대해 사람이 읽을 수 있는 주소(일반적으로 거리 주소)가 포함됩니다.

    이 콘텐츠는 있는 그대로 읽도록 합니다. 형식이 지정된 주소를 프로그래매틱 방식으로 파싱하지 마세요.
  • end_address에는 이 구간 끝에 있는 사람이 읽을 수 있는 주소(일반적으로 상세 주소)가 포함됩니다.

    이 콘텐츠는 있는 그대로 읽도록 합니다. 형식이 지정된 주소를 프로그래매틱 방식으로 파싱하지 마세요.

길찾기 스텝

DirectionsStep은 방향 경로의 가장 원자 단위이며 여정에서 특정 단일 안내를 설명하는 단일 단계를 포함합니다. 예: W에서 좌회전 4th St." 이 단계는 명령을 설명할 뿐만 아니라 이 단계와 다음 단계 간의 관계와 관련된 거리 및 소요 시간 정보도 포함합니다. 예를 들어 'I-80 West로 병합'으로 표시된 단계는 '37마일', '40분'의 소요 시간을 포함할 수 있으며, 다음 단계가 이 단계부터 37마일/40분임을 나타냅니다.

경로 서비스를 사용하여 대중교통 경로를 검색할 경우 단계 배열에는 대중교통 정보가 추가적으로 transit 객체 형태로 포함됩니다. 길찾기에 여러 이동수단이 포함된 경우 도보나 운전 단계를 위한 steps[] 길찾기의 자세한 경로가 제공됩니다. 예를 들어, 도보 단계에는 출발지와 목적지부터의 경로(‘quot;Walk to Innes Ave & Fitch St")가 포함됩니다. 이 단계에는 steps[] 배열에 있는 해당 경로의 자세한 도보 경로(예: "Head north-west", "Turn left to Arelious Walker", quot;Turn left to Innes Avetquo")가 포함됩니다.

DirectionsStep는 다음 필드가 포함된 객체 리터럴입니다.

  • instructions는 텍스트 문자열 내에 이 단계에 대한 안내를 포함합니다.
  • distance에는 다음 단계까지의 거리가 Distance 객체로 포함됩니다. 위의 DirectionsLeg에 있는 설명을 참고하세요. 거리를 알 수 없는 경우 이 필드는 정의되지 않을 수 있습니다.
  • duration에는 다음 단계까지 단계를 완료하는 데 필요한 예상 시간이 Duration 객체로 포함됩니다. 위의 DirectionsLeg에 있는 설명을 참고하세요. 기간을 알 수 없는 경우 이 필드는 정의되지 않을 수 있습니다.
  • start_location에는 이 단계의 시작점의 지오코딩된 LatLng이 포함됩니다.
  • end_location에는 이 단계의 종료 지점의 LatLng가 포함됩니다.
  • polyline에는 단계의 인코딩된 다중선 표현을 포함하는 단일 points 객체가 포함되어 있습니다. 이 다중선은 단계의 대략적인 (평활화된) 경로입니다.
  • steps[]는 대중교통 경로의 도보 또는 운전 단계를 자세히 안내하는 DirectionsStep 객체 리터럴입니다. 하위 스텝은 대중교통 길찾기에만 사용할 수 있습니다.
  • travel_mode에는 이 단계에서 사용된 TravelMode가 포함됩니다. 대중교통 경로에는 도보 및 대중교통 경로가 포함될 수 있습니다.
  • path에는 이 단계의 과정을 설명하는 LatLngs 배열이 포함됩니다.
  • transit에는 도착 및 출발 시간, 대중교통 노선 이름과 같은 대중교통 정보가 포함됩니다.

대중교통 특정 정보

대중교통 경로는 다른 교통수단과 관련 없는 추가 정보를 반환합니다. 이러한 추가 속성은 TransitDetails 객체를 통해 노출되며 DirectionsStep의 속성으로 반환됩니다. TransitDetails 객체에서 아래 설명과 같이 TransitStop, TransitLine, TransitAgency, VehicleType 객체의 추가 정보에 액세스할 수 있습니다.

대중교통 상세정보

TransitDetails 객체는 다음 속성을 노출합니다.

  • arrival_stop에는 다음 속성이 있는 도착역/정류장을 나타내는 TransitStop 객체가 있습니다.
    • name은 역/정류장의 이름입니다. 예: 'Union Square'
    • location는 대중교통 역/정류장의 위치이며 LatLng로 표시됩니다.
  • departure_stop에는 출발역/정류장을 나타내는 TransitStop 객체가 포함됩니다.
  • arrival_time에는 3가지 속성이 있는 Time 객체로 지정된 도착 시간이 포함됩니다.
    • value은 자바스크립트 Date 객체로 지정된 시간입니다.
    • text 문자열로 지정된 시간입니다. 시간은 대중교통 정류장의 시간대로 표시됩니다.
    • time_zone에는 이 역의 시간대가 포함됩니다. 이 값은 IANA 시간대 데이터베이스에 정의된 시간대의 이름입니다(예: "America/New_York").
  • departure_time에는 Time 객체로 지정된 출발 시간이 포함됩니다.
  • headsign은 차량이나 출발 정류장에 표시되어 있으므로 이 노선을 이용하는 방향을 지정합니다. 이는 대개 종착역입니다.
  • headway인 경우 현재 동일한 정류장에서 출발 사이의 예상 시간(초)을 지정합니다. 예를 들어 headway 값이 600인 경우 버스를 놓쳐야 한다면 10분 기다려야 합니다.
  • line에는 이 단계에서 사용되는 대중교통 노선에 대한 정보가 포함된 TransitLine 객체 리터럴이 포함됩니다. TransitLineTransitLine 참조 문서에 설명된 다른 속성과 함께 선의 이름과 연산자를 제공합니다.
  • num_stops에는 이 단계의 정류장 수가 포함됩니다. 도착 정류장이 포함되지만, 출발 정류장은 포함되지 않습니다. 예를 들어 길찾기 정보가 정류장 A에서 출발하여 정류장 B와 C를 지나 정류장 D에 도착하는 경우 num_stops은 3을 반환합니다.

대중교통 노선

TransitLine 객체는 다음 속성을 노출합니다.

  • name에는 대중교통 노선의 전체 이름이 포함됩니다. 예: "7 Avenue Express" 또는 14th St Crosstown.
  • short_name에는 이 대중교통 노선의 짧은 이름이 포함됩니다. '2' 또는 '421' 등의 노선 번호인 경우가 많습니다.
  • agencies는 단일 TransitAgency 객체를 포함하는 배열입니다. TransitAgency 객체는 다음 속성을 비롯하여 이 줄의 연산자에 대한 정보를 제공합니다.
    • name에는 대중교통 기관의 이름이 포함됩니다.
    • phone에는 대중교통 기관의 전화번호가 포함됩니다.
    • url에는 대중교통 기관의 URL이 포함됩니다.

    참고: DirectionsRenderer 객체를 사용하는 대신 대중교통 경로를 수동으로 렌더링하는 경우 여행 결과를 제공하는 대중교통 기관의 이름과 URL을 표시해야 합니다.

  • url에는 대중교통 기관이 제공하는 대중교통 노선의 URL이 포함됩니다.
  • icon에는 이 선과 연결된 아이콘의 URL이 포함됩니다. 대부분 도시는 차량 유형별로 달라지는 기본 아이콘을 사용합니다. 뉴욕 지하철 시스템과 같은 일부 대중교통 노선에서는 해당 노선에만 해당하는 아이콘이 표시됩니다.
  • color에는 대중교통의 표지판에 일반적으로 사용되는 색상이 포함됩니다. 색상은 #FF0033과 같은 16진수 문자열로 지정됩니다.
  • text_color에는 이 노선의 표지판에 일반적으로 사용되는 텍스트 색상이 포함됩니다. 색상은 16진수 문자열로 지정됩니다.
  • vehicle에는 다음 속성이 포함된 Vehicle 객체가 포함되어 있습니다.
    • name에는 이 노선의 차량 이름이 포함됩니다. 예: "지하철
    • type에는 이 노선에서 사용되는 차량 유형이 포함됩니다. 지원되는 값의 전체 목록은 차량 유형 문서를 참조하세요.
    • icon에는 일반적으로 이 차량 유형과 관련된 아이콘의 URL이 포함됩니다.
    • local_icon에는 지역 교통 표지판에 따라 이 차량 유형과 연결된 아이콘의 URL이 포함됩니다.

차량 유형

VehicleType 객체는 다음 속성을 노출합니다.

정의
VehicleType.RAIL 기차
VehicleType.METRO_RAIL 경전철
VehicleType.SUBWAY 지하철
VehicleType.TRAM 지상철
VehicleType.MONORAIL 모노레일
VehicleType.HEAVY_RAIL 철도
VehicleType.COMMUTER_TRAIN 통근 열차
VehicleType.HIGH_SPEED_TRAIN 고속 열차
VehicleType.BUS 버스
VehicleType.INTERCITY_BUS 시외버스
VehicleType.TROLLEYBUS 트롤리 버스.
VehicleType.SHARE_TAXI 공유 택시는 버스의 일종으로 노선 중 어디에서든 승객을 승하차할 수 있습니다.
VehicleType.FERRY 페리.
VehicleType.CABLE_CAR 일반적으로 지상에서 케이블로 운영되는 차량입니다. 항공 케이블카는 VehicleType.GONDOLA_LIFT 유형일 수 있습니다.
VehicleType.GONDOLA_LIFT 공중 케이블카.
VehicleType.FUNICULAR 케이블로 당겨서 가파른 경사를 오르는 차량입니다. 케이블카는 일반적으로 두 대의 차량으로 구성되며 각 차량은 상대 차량의 평형추 역할을 합니다.
VehicleType.OTHER 기타 모든 차량은 이 유형을 반환합니다.

DirectionsResults 검사

DirectionsResults 구성요소(DirectionsRoute, DirectionsLeg, DirectionsStep, TransitDetails)는 경로 응답을 파싱할 때 검사 및 사용될 수 있습니다.

중요: DirectionsRenderer 객체를 사용하는 대신 대중교통 경로를 수동으로 렌더링하는 경우 여행 결과를 제공하는 대중교통 기관의 이름과 URL을 표시해야 합니다.

다음 예는 뉴욕의 특정 관광명소에 대한 도보 경로를 표시합니다. 경로의 DirectionsStep를 검사하여 각 단계의 마커를 추가하고, 해당 단계의 안내 텍스트와 함께 InfoWindow에 정보를 첨부합니다.

참고: 도보 경로를 계산하는 중이므로 별도의 <div> 패널에 사용자에게 경고가 표시될 수도 있습니다.

var map;
var directionsRenderer;
var directionsService;
var stepDisplay;
var markerArray = [];

function initMap() {
  // Instantiate a directions service.
  directionsService = new google.maps.DirectionsService();

  // Create a map and center it on Manhattan.
  var manhattan = new google.maps.LatLng(40.7711329, -73.9741874);
  var mapOptions = {
    zoom: 13,
    center: manhattan
  }
  map = new google.maps.Map(document.getElementById('map'), mapOptions);

  // Create a renderer for directions and bind it to the map.
  var rendererOptions = {
    map: map
  }
  directionsRenderer = new google.maps.DirectionsRenderer(rendererOptions)

  // Instantiate an info window to hold step text.
  stepDisplay = new google.maps.InfoWindow();
}

function calcRoute() {

  // First, clear out any existing markerArray
  // from previous calculations.
  for (i = 0; i < markerArray.length; i++) {
    markerArray[i].setMap(null);
  }

  // Retrieve the start and end locations and create
  // a DirectionsRequest using WALKING directions.
  var start = document.getElementById('start').value;
  var end = document.getElementById('end').value;
  var request = {
      origin: start,
      destination: end,
      travelMode: 'WALKING'
  };

  // Route the directions and pass the response to a
  // function to create markers for each step.
  directionsService.route(request, function(response, status) {
    if (status == "OK") {
      var warnings = document.getElementById("warnings_panel");
      warnings.innerHTML = "" + response.routes[0].warnings + "";
      directionsRenderer.setDirections(response);
      showSteps(response);
    }
  });
}

function showSteps(directionResult) {
  // For each step, place a marker, and add the text to the marker's
  // info window. Also attach the marker to an array so we
  // can keep track of it and remove it when calculating new
  // routes.
  var myRoute = directionResult.routes[0].legs[0];

  for (var i = 0; i < myRoute.steps.length; i++) {
      var marker = new google.maps.Marker({
        position: myRoute.steps[i].start_point,
        map: map
      });
      attachInstructionText(marker, myRoute.steps[i].instructions);
      markerArray[i] = marker;
  }
}

function attachInstructionText(marker, text) {
  google.maps.event.addListener(marker, 'click', function() {
    stepDisplay.setContent(text);
    stepDisplay.open(map, marker);
  });
}

HTML 본문:

<div>
<strong>Start: </strong>
<select id="start">
  <option value="penn station, new york, ny">Penn Station</option>
  <option value="grand central station, new york, ny">Grand Central Station</option>
  <option value="625 8th Avenue New York NY 10018">Port Authority Bus Terminal</option>
  <option value="staten island ferry terminal, new york, ny">Staten Island Ferry Terminal</option>
  <option value="101 E 125th Street, New York, NY">Harlem - 125th St Station</option>
</select>
<strong>End: </strong>
<select id="end" onchange="calcRoute();">
  <option value="260 Broadway New York NY 10007">City Hall</option>
  <option value="W 49th St & 5th Ave, New York, NY 10020">Rockefeller Center</option>
  <option value="moma, New York, NY">MOMA</option>
  <option value="350 5th Ave, New York, NY, 10118">Empire State Building</option>
  <option value="253 West 125th Street, New York, NY">Apollo Theatre</option>
  <option value="1 Wall St, New York, NY">Wall St</option>
</select>
<div>

예 보기

경로에 경유지 사용

DirectionsRequest 내에서 언급한 바와 같이 Directions 서비스를 사용하여 도보, 자전거 또는 운전 경로를 계산할 때 경유지(DirectionsWaypoint 유형)를 지정할 수도 있습니다. 경유지는 대중교통 길찾기에서 사용할 수 없습니다. 경유지를 사용하면 추가 위치를 통과하는 경로를 계산할 수 있으며, 이 경우 반환된 경로가 지정된 경유지를 통과합니다.

waypoint는 다음 필드로 구성됩니다.

  • location (필수)는 경유지의 주소를 지정합니다.
  • stopover(선택사항)는 이 경유지가 경로(true) 상의 실제 정류장인지 아니면 표시된 위치(false)를 통한 노선 선호 경로인지를 나타냅니다. 기착 시간은 기본적으로 true입니다.

기본적으로 Directions 서비스는 제공된 경유지를 지정된 순서로 경로를 계산합니다. 선택적으로 DirectionsRequest 내에 optimizeWaypoints: true를 전달하여 경로 서비스가 더 효율적인 순서로 경유지를 다시 정렬하여 제공된 경로를 최적화할 수 있습니다. 이 최적화는 이동 영업 담당자 문제의 적용 사례입니다. 이동 시간은 최적화되는 주요 요소이지만, 가장 효율적인 경로를 결정할 때 거리, 회전수 등의 다양한 요소를 고려할 수 있습니다. Directions 서비스에서 경로를 최적화하려면 모든 경유지가 경유여야 합니다.

Directions 서비스에 경유지 순서를 최적화하도록 지시하면 그 순서가 DirectionsResult 객체 내의 waypoint_order 필드에 반환됩니다.

다음 예제에서는 다양한 시작 지점, 종료 지점 및 경유지를 사용하여 미국을 횡단하는 경로를 계산합니다. 여러 개의 경유지를 선택하려면 목록 내에서 항목을 선택할 때 Ctrl-클릭을 누릅니다. routes.start_addressroutes.end_address를 검사하여 각 경로의 시작 지점과 종료 지점에 대한 텍스트를 제공합니다.

TypeScript

function initMap(): void {
  const directionsService = new google.maps.DirectionsService();
  const directionsRenderer = new google.maps.DirectionsRenderer();
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 6,
      center: { lat: 41.85, lng: -87.65 },
    }
  );

  directionsRenderer.setMap(map);

  (document.getElementById("submit") as HTMLElement).addEventListener(
    "click",
    () => {
      calculateAndDisplayRoute(directionsService, directionsRenderer);
    }
  );
}

function calculateAndDisplayRoute(
  directionsService: google.maps.DirectionsService,
  directionsRenderer: google.maps.DirectionsRenderer
) {
  const waypts: google.maps.DirectionsWaypoint[] = [];
  const checkboxArray = document.getElementById(
    "waypoints"
  ) as HTMLSelectElement;

  for (let i = 0; i < checkboxArray.length; i++) {
    if (checkboxArray.options[i].selected) {
      waypts.push({
        location: (checkboxArray[i] as HTMLOptionElement).value,
        stopover: true,
      });
    }
  }

  directionsService
    .route({
      origin: (document.getElementById("start") as HTMLInputElement).value,
      destination: (document.getElementById("end") as HTMLInputElement).value,
      waypoints: waypts,
      optimizeWaypoints: true,
      travelMode: google.maps.TravelMode.DRIVING,
    })
    .then((response) => {
      directionsRenderer.setDirections(response);

      const route = response.routes[0];
      const summaryPanel = document.getElementById(
        "directions-panel"
      ) as HTMLElement;

      summaryPanel.innerHTML = "";

      // For each route, display summary information.
      for (let i = 0; i < route.legs.length; i++) {
        const routeSegment = i + 1;

        summaryPanel.innerHTML +=
          "<b>Route Segment: " + routeSegment + "</b><br>";
        summaryPanel.innerHTML += route.legs[i].start_address + " to ";
        summaryPanel.innerHTML += route.legs[i].end_address + "<br>";
        summaryPanel.innerHTML += route.legs[i].distance!.text + "<br><br>";
      }
    })
    .catch((e) => window.alert("Directions request failed due to " + status));
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;

자바스크립트

function initMap() {
  const directionsService = new google.maps.DirectionsService();
  const directionsRenderer = new google.maps.DirectionsRenderer();
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 6,
    center: { lat: 41.85, lng: -87.65 },
  });

  directionsRenderer.setMap(map);
  document.getElementById("submit").addEventListener("click", () => {
    calculateAndDisplayRoute(directionsService, directionsRenderer);
  });
}

function calculateAndDisplayRoute(directionsService, directionsRenderer) {
  const waypts = [];
  const checkboxArray = document.getElementById("waypoints");

  for (let i = 0; i < checkboxArray.length; i++) {
    if (checkboxArray.options[i].selected) {
      waypts.push({
        location: checkboxArray[i].value,
        stopover: true,
      });
    }
  }

  directionsService
    .route({
      origin: document.getElementById("start").value,
      destination: document.getElementById("end").value,
      waypoints: waypts,
      optimizeWaypoints: true,
      travelMode: google.maps.TravelMode.DRIVING,
    })
    .then((response) => {
      directionsRenderer.setDirections(response);

      const route = response.routes[0];
      const summaryPanel = document.getElementById("directions-panel");

      summaryPanel.innerHTML = "";

      // For each route, display summary information.
      for (let i = 0; i < route.legs.length; i++) {
        const routeSegment = i + 1;

        summaryPanel.innerHTML +=
          "<b>Route Segment: " + routeSegment + "</b><br>";
        summaryPanel.innerHTML += route.legs[i].start_address + " to ";
        summaryPanel.innerHTML += route.legs[i].end_address + "<br>";
        summaryPanel.innerHTML += route.legs[i].distance.text + "<br><br>";
      }
    })
    .catch((e) => window.alert("Directions request failed due to " + status));
}

window.initMap = initMap;

경유지의 한도 및 제한 사항

다음과 같은 사용 한도 및 제한 사항이 적용됩니다.

  • Maps JavaScript API에서 경로 서비스를 사용할 때 허용되는 최대 경유지 수는 25개이며 출발지와 목적지도 있습니다. Directions API 웹 서비스의 한도는 동일합니다.
  • Directions API 웹 서비스의 경우 고객에게 경유지 25개와 출발지 및 목적지가 허용됩니다.
  • Google Maps Platform 프리미엄 플랜 고객에게는 25개의 경유지와 출발지 및 목적지가 허용됩니다.
  • 경유지는 대중교통 길찾기에서 지원되지 않습니다.

드래그 가능한 길찾기

사용자가 드래그 가능한 경우 DirectionsRenderer를 사용하여 표시된 사이클링, 도보, 운전 경로를 동적으로 수정할 수 있습니다. 이를 통해 사용자는 지도에서 결과로 표시된 경로를 클릭하고 드래그하여 경로를 선택하고 변경할 수 있습니다. draggable 속성을 true로 설정하여 렌더러의 디스플레이에서 드래그 가능한 경로를 허용하는지 여부를 나타낼 수 있습니다. 대중교통 길찾기는 드래그할 수 없습니다.

경로를 드래그할 수 있는 경우 사용자는 렌더링된 경로의 경로 (또는 경유지)를 선택하고 표시된 구성요소를 새 위치로 이동할 수 있습니다. DirectionsRenderer는 동적으로 업데이트되어 수정된 경로를 표시합니다. 출시 시 전환 경유지가 지도에 추가됩니다 (작은 흰색 마커로 표시됨). 경로 세그먼트를 선택하고 이동하면 경로의 구간이 변경되지만, 출발지와 목적지를 포함하여 경유지 마커를 선택하고 이동하면 해당 경유지를 통과하는 경로의 구간이 변경됩니다.

드래그 가능한 경로가 클라이언트 측에서 수정되고 렌더링되므로 DirectionsRenderer에서 directions_changed 이벤트를 모니터링하고 처리하여 사용자가 표시된 경로를 수정했을 때 알림을 받을 수 있습니다.

다음 코드는 오스트레일리아 서부 해안의 퍼스에서 동해안의 시드니로의 여정을 보여줍니다. 이 코드는 directions_changed 이벤트를 모니터링하여 여정의 모든 구간에 대한 총 거리를 업데이트합니다.

TypeScript

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 4,
      center: { lat: -24.345, lng: 134.46 }, // Australia.
    }
  );

  const directionsService = new google.maps.DirectionsService();
  const directionsRenderer = new google.maps.DirectionsRenderer({
    draggable: true,
    map,
    panel: document.getElementById("panel") as HTMLElement,
  });

  directionsRenderer.addListener("directions_changed", () => {
    const directions = directionsRenderer.getDirections();

    if (directions) {
      computeTotalDistance(directions);
    }
  });

  displayRoute(
    "Perth, WA",
    "Sydney, NSW",
    directionsService,
    directionsRenderer
  );
}

function displayRoute(
  origin: string,
  destination: string,
  service: google.maps.DirectionsService,
  display: google.maps.DirectionsRenderer
) {
  service
    .route({
      origin: origin,
      destination: destination,
      waypoints: [
        { location: "Adelaide, SA" },
        { location: "Broken Hill, NSW" },
      ],
      travelMode: google.maps.TravelMode.DRIVING,
      avoidTolls: true,
    })
    .then((result: google.maps.DirectionsResult) => {
      display.setDirections(result);
    })
    .catch((e) => {
      alert("Could not display directions due to: " + e);
    });
}

function computeTotalDistance(result: google.maps.DirectionsResult) {
  let total = 0;
  const myroute = result.routes[0];

  if (!myroute) {
    return;
  }

  for (let i = 0; i < myroute.legs.length; i++) {
    total += myroute.legs[i]!.distance!.value;
  }

  total = total / 1000;
  (document.getElementById("total") as HTMLElement).innerHTML = total + " km";
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;

자바스크립트

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: { lat: -24.345, lng: 134.46 }, // Australia.
  });
  const directionsService = new google.maps.DirectionsService();
  const directionsRenderer = new google.maps.DirectionsRenderer({
    draggable: true,
    map,
    panel: document.getElementById("panel"),
  });

  directionsRenderer.addListener("directions_changed", () => {
    const directions = directionsRenderer.getDirections();

    if (directions) {
      computeTotalDistance(directions);
    }
  });
  displayRoute(
    "Perth, WA",
    "Sydney, NSW",
    directionsService,
    directionsRenderer
  );
}

function displayRoute(origin, destination, service, display) {
  service
    .route({
      origin: origin,
      destination: destination,
      waypoints: [
        { location: "Adelaide, SA" },
        { location: "Broken Hill, NSW" },
      ],
      travelMode: google.maps.TravelMode.DRIVING,
      avoidTolls: true,
    })
    .then((result) => {
      display.setDirections(result);
    })
    .catch((e) => {
      alert("Could not display directions due to: " + e);
    });
}

function computeTotalDistance(result) {
  let total = 0;
  const myroute = result.routes[0];

  if (!myroute) {
    return;
  }

  for (let i = 0; i < myroute.legs.length; i++) {
    total += myroute.legs[i].distance.value;
  }

  total = total / 1000;
  document.getElementById("total").innerHTML = total + " km";
}

window.initMap = initMap;
예 보기

샘플 사용해 보기