Сервис Directions

Разработчики из Европейской экономической зоны (ЕЭЗ)
Примечание: серверные библиотеки

Обзор

Вы можете рассчитать маршрут (используя различные виды транспорта), используя объект DirectionsService . Этот объект взаимодействует с сервисом маршрутизации Google Maps API, который получает запросы на построение маршрута и возвращает оптимальный путь. Основным оптимизируемым фактором является время в пути, но могут учитываться и другие факторы, такие как расстояние, количество поворотов и многое другое. Вы можете либо самостоятельно обрабатывать результаты построения маршрута, либо использовать объект DirectionsRenderer для его отображения.

При указании пункта отправления или назначения в запросе маршрута можно указать строку запроса (например, "Chicago, IL" или "Darwin, NSW, Australia"), значение LatLng или объект Place .

Сервис «Прокладывание маршрута» может возвращать многокомпонентные маршруты, используя последовательность путевых точек. Маршрут отображается в виде ломаной линии, начерченной на карте, или, дополнительно, в виде текстового описания внутри элемента <div> (например, «Поверните направо на съезд на мост Вильямсбург»).

Начиная

Прежде чем использовать сервис «Прокладывание маршрута» в JavaScript API карт, убедитесь, что API «Прокладывание маршрута» (устаревшая версия) включен в консоли Google Cloud в том же проекте, который вы настроили для JavaScript API карт.

Чтобы просмотреть список включенных API:

  1. Перейдите в консоль Google Cloud .
  2. Нажмите кнопку «Выбрать проект» , затем выберите тот же проект, который вы настроили для API JavaScript карт, и нажмите «Открыть» .
  3. В списке API на панели управления найдите API для построения маршрутов (устаревшая версия) .
  4. Если вы видите API в списке, значит, все в порядке. Если API отсутствует в списке, включите его по адресу https://console.cloud.google.com/apis/library/directions-backend.googleapis.com

Цены и политика

Цены

Чтобы узнать о ценообразовании и политике использования сервиса JavaScript Directions, см. раздел «Использование и выставление счетов для API Directions (устаревшая версия)».

Политики

Использование сервиса «Проложить маршрут» должно осуществляться в соответствии с правилами, описанными для API сервиса «Проложить маршрут» (устаревшая версия) .

Запросы на указание маршрута

Доступ к сервису «Прокладывание маршрута» осуществляется асинхронно, поскольку API Google Maps должен обращаться к внешнему серверу. По этой причине необходимо передать метод обратного вызова , который будет выполнен после завершения запроса. Этот метод обратного вызова должен обработать результат(ы). Обратите внимание, что сервис «Прокладывание маршрута» может возвращать более одного возможного маршрута в виде массива отдельных routes[] .

Для использования функции построения маршрутов в JavaScript API карт создайте объект типа DirectionsService и вызовите метод DirectionsService.route() чтобы инициировать запрос к сервису построения маршрутов, передав ему литерал объекта 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 можно указать идентификатор места , строку запроса или координаты LatLng . Идентификаторы мест можно получить из сервисов геокодирования, поиска мест и автозаполнения мест в API JavaScript Maps. Пример использования идентификаторов мест из сервиса автозаполнения мест см. в разделах «Автозаполнение мест» и «Маршруты» .
  • Поле destination ( обязательно ) указывает конечную точку, до которой необходимо рассчитать маршрут. Варианты те же, что и для поля origin описанного выше.
  • travelMode ( обязательный ) указывает, какой вид транспорта использовать при расчете маршрута. Допустимые значения указаны в разделе «Виды транспорта» ниже.
  • transitOptions ( необязательный ) задает значения, которые применяются только к запросам, где travelMode имеет TRANSIT . Допустимые значения описаны в разделе «Параметры транзита» ниже.
  • drivingOptions ( необязательный ) задает значения, которые применяются только к запросам, где travelMode имеет DRIVING . Допустимые значения описаны в разделе «Параметры вождения» ниже.

  • unitSystem ( необязательный параметр ) указывает, какую систему единиц измерения использовать при отображении результатов. Допустимые значения указаны в разделе «Системы единиц измерения» ниже.

  • waypoints[] ( необязательно ) задает массив объектов DirectionsWaypoint . Путевые точки изменяют маршрут, прокладывая его через указанное(ые) местоположение(я). Путевая точка указывается в виде литерала объекта с полями, показанными ниже:

    • location указывает местоположение путевой точки в виде LatLng , объекта Place или String , которая будет геокодирована.
    • stopover — это логическое значение, указывающее на то, что путевая точка является остановкой на маршруте, что приводит к разделению маршрута на два отдельных участка.

    (Более подробную информацию о путевых точках см. в разделе «Использование путевых точек в маршрутах» ниже.)

  • optimizeWaypoints ( необязательный ) указывает, что маршрут, использующий предоставленные waypoints может быть оптимизирован путем перестановки путевых точек в более эффективном порядке. Если true , служба маршрутизации вернет переупорядоченные waypoints в поле waypoint_order . (Дополнительную информацию см. в разделе «Использование путевых точек в маршрутах» ниже.)
  • provideRouteAlternatives ( необязательный ) при значении true указывает, что служба маршрутизации может предоставить более одного варианта маршрута в ответе. Обратите внимание, что предоставление вариантов маршрута может увеличить время ответа от сервера. Эта функция доступна только для запросов без промежуточных точек маршрута.
  • avoidFerries ( необязательный ) при значении true указывает, что рассчитанный маршрут (маршруты) должен, по возможности, избегать паромов.
  • avoidHighways ( необязательный ) при значении true указывает, что рассчитанный маршрут (маршруты) должен по возможности избегать основных автомагистралей.
  • avoidTolls ( необязательный параметр ), если установлено true указывает, что рассчитанный маршрут (маршруты) должен по возможности избегать платных дорог.
  • region ( необязательный ) задает код региона, указываемый в виде двухсимвольного значения ccTLD («домена верхнего уровня»). (Дополнительную информацию см. в разделе «Смещение региона» ниже.)

Ниже приведён пример 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 . Если вы запрашиваете маршрут для региона, в котором этот тип маршрута недоступен, в ответе будет возвращено значение DirectionsStatus =" ZERO_RESULTS ".

Примечание : пешеходные маршруты могут не содержать четких пешеходных дорожек, поэтому в объекте DirectionsResult будут отображаться предупреждения. Эти предупреждения должны всегда отображаться пользователю. Если вы не используете DirectionsRenderer по умолчанию, вы несете ответственность за обеспечение отображения предупреждений.

Варианты транспорта

Доступные параметры для запроса маршрута различаются в зависимости от вида транспорта. При запросе маршрута для общественного транспорта параметры avoidHighways , avoidTolls , waypoints[] и optimizeWaypoints будут игнорироваться. Вы можете указать параметры маршрутизации для конкретного вида транспорта с помощью литерала объекта TransitOptions .

Информация о маршрутах общественного транспорта актуальна только в течение определенного времени. Данные о маршрутах будут предоставлены только для более позднего времени.

Объектный литерал TransitOptions содержит следующие поля:

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

Ниже приведено описание этих полей:

  • arrivalTime ( необязательно ) указывает желаемое время прибытия в виде объекта Date . Если указано время прибытия, время отправления игнорируется.
  • departureTime ( необязательный ) указывает желаемое время отправления в виде объекта Date . Параметр departureTime будет проигнорирован, если указано arrivalTime . По умолчанию используется текущее время (то есть текущее время), если значение для 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 Premium Plan, если вы включите 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 Maps API возвращает результаты поиска адресов, на которые влияет домен (регион или страна), с которого вы загрузили JavaScript-шаблон. (Поскольку большинство пользователей загружают https://maps.googleapis.com/ это устанавливает неявный домен на Соединенные Штаты.) Если вы загрузите шаблон с другого поддерживаемого домена, вы получите результаты, на которые влияет этот домен. Например, поиск по запросу «Сан-Франциско» может давать разные результаты в приложениях, загружающих https://maps.googleapis.com/ (США), и в приложениях, загружающих http://maps.google.es/ (Испания).

Вы также можете настроить службу маршрутизации таким образом, чтобы она возвращала результаты, ориентированные на определенный регион, используя параметр region . Этот параметр принимает код региона, указанный в виде двухсимвольного (нечислового) субтега региона Unicode. В большинстве случаев эти теги напрямую соответствуют двухсимвольным значениям ccTLD («домен верхнего уровня»), например, «uk» в «co.uk». В некоторых случаях тег region также поддерживает коды ISO-3166-1, которые иногда отличаются от значений ccTLD («GB» для «Великобритании», например).

При использовании параметра region :

  • Укажите только одну страну или регион. Множественные значения игнорируются и могут привести к неудачному запросу.
  • Используйте только двухсимвольные подтеги регионов (формат Unicode CLDR). Все остальные варианты ввода приведут к ошибкам.

Поддержка региональной привязки доступна только для стран и регионов, поддерживающих функцию построения маршрутов. Для получения информации о международном покрытии API построения маршрутов (устаревшая версия) обратитесь к разделу «Подробная информация о покрытии платформы Google Maps» .

Направления рендеринга

Для отправки запроса на построение маршрута в DirectionsService с помощью метода route() необходимо передать функцию обратного вызова, которая выполняется после завершения запроса к сервису. Эта функция обратного вызова вернет объект DirectionsResult и код DirectionsStatus в ответе.

Статус запроса на определение маршрута

Объект DirectionsStatus может возвращать следующие значения:

  • OK означает, что ответ содержит действительный DirectionsResult .
  • NOT_FOUND указывает, что как минимум одно из местоположений, указанных в начале, конце или путевых точках запроса, не удалось геолоцировать.
  • ZERO_RESULTS означает, что маршрут между пунктом отправления и пунктом назначения не найден.
  • MAX_WAYPOINTS_EXCEEDED указывает на то, что в запросе DirectionsRequest было предоставлено слишком много полей DirectionsWaypoint . См. раздел ниже об ограничениях для путевых точек .
  • MAX_ROUTE_LENGTH_EXCEEDED указывает на то, что запрошенный маршрут слишком длинный и не может быть обработан. Эта ошибка возникает при возврате более сложных маршрутов. Попробуйте уменьшить количество путевых точек, поворотов или инструкций.
  • Код ошибки INVALID_REQUEST указывает на то, что предоставленный DirectionsRequest недействителен. Наиболее распространенные причины этого кода ошибки — запросы, в которых отсутствуют пункты отправления и назначения, или запросы на транзит, включающие путевые точки.
  • OVER_QUERY_LIMIT указывает на то, что веб-страница отправила слишком много запросов в течение допустимого периода времени.
  • REQUEST_DENIED указывает на то, что веб-странице запрещено использовать сервис построения маршрутов.
  • UNKNOWN_ERROR указывает на то, что запрос на построение маршрута не может быть обработан из-за ошибки сервера. Запрос может быть успешно выполнен, если вы попробуете еще раз.

Перед обработкой результата необходимо убедиться, что запрос маршрута вернул корректные результаты, проверив это значение.

Отображение результата "Направления"

Объект DirectionsResult содержит результат запроса маршрута, который вы можете обработать самостоятельно или передать объекту DirectionsRenderer , который может автоматически отобразить результат на карте.

Для отображения объекта DirectionsResult с помощью DirectionsRenderer необходимо выполнить следующие действия:

  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 не только отображает полилинию и связанные с ней маркеры, но и может отображать текстовые указания в виде последовательности шагов. Для этого вызовите setPanel() для вашего DirectionsRenderer , передав ему <div> , в котором нужно отобразить эту информацию. Это также гарантирует отображение соответствующей информации об авторских правах и любых предупреждений, которые могут быть связаны с результатом.

Текстовые указания будут предоставлены с использованием предпочтительного языка браузера или языка, указанного при загрузке JavaScript API с помощью параметра language . (Дополнительную информацию см. в разделе «Локализация». ) В случае указаний для общественного транспорта время будет отображаться в часовом поясе соответствующей остановки.

Следующий пример идентичен показанному выше, но включает в себя панель <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 — это уникальный идентификатор места, который можно использовать с другими API Google. Например, вы можете использовать place_id с библиотекой Google Places API , чтобы получить подробную информацию о местном предприятии, такую ​​как номер телефона, часы работы, отзывы пользователей и многое другое. См. обзор идентификаторов мест .
  • массив types[] указывает тип возвращаемого результата. Этот массив содержит набор из нуля или более тегов, определяющих тип объекта, возвращаемого в результате. Например, геокод "Чикаго" возвращает "местность", что указывает на то, что "Чикаго" — это город, а также возвращает "политический", что указывает на то, что это политическое образование.

Направления Маршруты

Примечание : Устаревший объект DirectionsTrip был переименован DirectionsRoute . Обратите внимание, что теперь маршрут обозначает весь путь от начала до конца, а не только его часть.

Объект DirectionsRoute содержит единственный результат из указанного пункта отправления и назначения. Этот маршрут может состоять из одного или нескольких ответвлений (типа DirectionsLeg ) в зависимости от того, были ли указаны какие-либо путевые точки. Кроме того, маршрут содержит информацию об авторских правах и предупреждения, которые должны отображаться пользователю в дополнение к информации о маршруте.

Объект DirectionsRoute представляет собой литерал объекта со следующими полями:

  • legs[] содержит массив объектов DirectionsLeg , каждый из которых содержит информацию об участке маршрута из двух точек в пределах заданного маршрута. Для каждой указанной путевой точки или пункта назначения будет присутствовать отдельный участок. (Маршрут без путевых точек будет содержать ровно один DirectionsLeg .) Каждый участок состоит из серии объектов DirectionStep .
  • waypoint_order содержит массив, указывающий порядок путевых точек в рассчитанном маршруте. Этот массив может содержать измененный порядок, если в DirectionsRequest был передан optimizeWaypoints: true .
  • overview_path содержит массив значений LatLng , представляющих приблизительный (сглаженный) путь результирующих направлений.
  • Объект overview_polyline содержит один объект points , в котором хранится закодированное полилинейное представление маршрута. Эта полилиния представляет собой приблизительный (сглаженный) путь результирующих направлений.
  • bounds содержит значение LatLngBounds , указывающее границы полилинии вдоль данного маршрута.
  • В copyrights содержится текст об авторских правах, который будет отображаться для данного маршрута.
  • warnings[] содержит список предупреждений, которые будут отображаться при показе этих указаний. Если вы не используете предоставленный объект DirectionsRenderer , вам необходимо самостоятельно обрабатывать и отображать эти предупреждения.
  • fare содержит общую стоимость проезда (то есть, общую стоимость билета) по данному маршруту. Эта информация возвращается только для запросов на проезд в общественном транспорте и только для маршрутов, где информация о тарифах доступна для всех участков маршрута. Информация включает в себя:

Направления Ноги

Примечание : Устаревший объект DirectionsRoute был переименован DirectionsLeg .

Параметр DirectionsLeg определяет отдельный участок пути от начальной точки до конечной точки в рассчитанном маршруте. Для маршрутов, не содержащих промежуточных точек, маршрут будет состоять из одного «участка», а для маршрутов, содержащих одну или несколько промежуточных точек, маршрут будет состоять из одного или нескольких участков, соответствующих конкретным участкам пути.

Объект DirectionsLeg представляет собой литерал объекта со следующими полями:

  • steps[] содержит массив объектов DirectionsStep , обозначающих информацию о каждом отдельном шаге участка пути.

  • Объект distance обозначает общее расстояние Distance пройденное на данном этапе, и имеет следующий вид:

    • value указывает расстояние в метрах.
    • text содержит строковое представление расстояния, которое по умолчанию отображается в единицах измерения, используемых в точке отправления. (Например, для любой точки отправления в пределах Соединенных Штатов будут использоваться мили.) Вы можете переопределить эту систему единиц, указав параметр UnitSystem в исходном запросе. Обратите внимание, что независимо от используемой системы единиц, поле ` distance.value всегда содержит значение, выраженное в метрах.

    Эти поля могут быть неопределенными, если расстояние неизвестно.

  • duration указывает общую продолжительность данного этапа и представляет собой объект Duration следующего вида:

    • value указывает продолжительность в секундах.
    • text содержит строковое представление продолжительности.

    Эти поля могут быть неопределенными, если продолжительность неизвестна.

  • duration_in_traffic указывает общую продолжительность данного участка пути с учетом текущей дорожной ситуации. duration_in_traffic возвращается только в том случае, если выполняются все следующие условия:

    • Запрос не включает промежуточные точки остановки. То есть, он не включает промежуточные точки, для которых stopover имеет true .
    • Запрос касается исключительно получения маршрута движения — mode установлен на driving .
    • Время departureTime указывается в поле drivingOptions запроса.
    • Информация о дорожной ситуации на запрошенном маршруте доступна.

    Поле duration_in_traffic содержит следующие поля:

    • value указывает продолжительность в секундах.
    • text содержит удобочитаемое представление продолжительности.
  • arrival_time содержит расчетное время прибытия для данного участка маршрута. Это свойство возвращается только для маршрутов общественного транспорта. Результат возвращается в виде объекта Time с тремя свойствами:
    • value время, указанное в виде объекта JavaScript Date .
    • text указывается время, представленное в виде строки. Время отображается в часовом поясе остановки общественного транспорта.
    • time_zone содержит часовой пояс данной станции. Значение представляет собой название часового пояса, как оно определено в базе данных часовых поясов IANA , например, "America/New_York".
  • departure_time содержит расчетное время отправления для данного участка маршрута, указанное в виде объекта Time . Значение departure_time доступно только для маршрутов общественного транспорта.
  • start_location содержит LatLng начальной точки этого участка маршрута. Поскольку веб-сервис Directions рассчитывает маршрут между точками, используя ближайший транспортный маршрут (обычно дорогу) в начальной и конечной точках, 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[] . Например, шаг пешего маршрута будет включать указания от начальной и конечной точек: «Идите до пересечения Innes Ave и Fitch St». Этот шаг будет включать подробные указания для этого маршрута в массиве steps[] , такие как: «Двигайтесь на северо-запад», «Поверните налево на Arelious Walker» и «Поверните налево на Innes Ave».

Объект DirectionsStep представляет собой литерал объекта со следующими полями:

  • instructions содержат указания для этого шага в текстовой строке.
  • distance содержит расстояние, пройденное на данном этапе до следующего этапа, в виде объекта Distance . (См. описание в поле DirectionsLeg выше.) Это поле может быть неопределено, если расстояние неизвестно.
  • duration содержит оценку времени, необходимого для выполнения шага до следующего шага, в виде объекта Duration . (См. описание в DirectionsLeg выше.) Это поле может быть неопределено, если длительность неизвестна.
  • start_location содержит географически закодированные LatLng (широта/долгота) начальной точки этого шага.
  • end_location содержит LatLng конечной точки этого шага.
  • Объект polyline содержит один объект points , в котором хранится закодированное представление ломаной линии, соответствующей данному шагу. Эта ломаная линия представляет собой приблизительный (сглаженный) путь шага.
  • steps[] литерал объекта DirectionsStep , содержащий подробные указания по прохождению или проезду шагов в маршрутах общественного транспорта. Подшаги доступны только для маршрутов общественного транспорта.
  • travel_mode содержит TravelMode используемое на этом шаге. Маршруты общественного транспорта могут включать в себя комбинацию пешеходных и автобусных маршрутов.
  • path содержит массив LatLngs описывающих ход данного шага.
  • transit содержит данные, относящиеся непосредственно к данному виду транспорта, такие как время прибытия и отправления, а также название маршрута.

Информация, касающаяся конкретного вида транспорта

Transit directions return additional information that is not relevant for other modes of transportation. These additional properties are exposed through the TransitDetails object, returned as a property of DirectionsStep . From the TransitDetails object you can access additional information for the TransitStop , TransitLine , TransitAgency , and VehicleType objects as described below.

Transit Details

The TransitDetails object exposes the following properties:

  • arrival_stop contains a TransitStop object representing the arrival station/stop with the following properties:
    • name the name of the transit station/stop. eg. "Union Square".
    • location the location of the transit station/stop, represented as a LatLng .
  • departure_stop contains a TransitStop object representing the departure station/stop.
  • arrival_time contains the arrival time, specified as a Time object with three properties:
    • value the time specified as a JavaScript Date object.
    • text the time specified as a string. The time is displayed in the time zone of the transit stop.
    • time_zone contains the time zone of this station. The value is the name of the time zone as defined in the IANA Time Zone Database , eg "America/New_York".
  • departure_time contains the departure time, specified as a Time object.
  • headsign specifies the direction in which to travel on this line, as it is marked on the vehicle or at the departure stop. This will often be the terminus station.
  • headway when available, this specifies the expected number of seconds between departures from the same stop at this time. For example, with a headway value of 600, you would expect a ten minute wait if you should miss your bus.
  • line contains a TransitLine object literal that contains information about the transit line used in this step. The TransitLine provides the name and operator of the line, along with other properties described in the TransitLine reference documentation.
  • num_stops contains the number of stops in this step. Includes the arrival stop, but not the departure stop. For example, if your directions involve leaving from Stop A, passing through stops B and C, and arriving at stop D, num_stops will return 3.

Transit Line

The TransitLine object exposes the following properties:

  • name contains the full name of this transit line. eg. "7 Avenue Express" or "14th St Crosstown".
  • short_name contains the short name of this transit line. This will normally be a line number, such as "2" or "M14".
  • agencies is an array containing a single TransitAgency object. The TransitAgency object provides information about the operator of this line, including the following properties:
    • name contains the name of the transit agency.
    • phone contains the phone number of the transit agency.
    • url contains the URL for the transit agency.

    Note : If you are rendering transit directions manually instead of using the DirectionsRenderer object, you must display the names and URLs of the transit agencies servicing the trip results.

  • url contains a URL for this transit line as provided by the transit agency.
  • icon contains a URL for the icon associated with this line. Most cities will use generic icons that vary by the type of vehicle. Some transit lines, such as the New York subway system, have icons specific to that line.
  • color contains the color commonly used in signage for this transit. The color will be specified as a hex string such as: #FF0033.
  • text_color contains the color of text commonly used for signage of this line. The color will be specified as a hex string.
  • vehicle contains a Vehicle object that includes the following properties:
    • name contains the name of the vehicle on this line. eg. "Subway."
    • type contains the type of vehicle used on this line. See the Vehicle Type documentation for a complete list of supported values.
    • icon contains a URL for the icon commonly associated with this vehicle type.
    • local_icon contains the URL for the icon associated with this vehicle type, based on the local transport signage.

Тип транспортного средства

The VehicleType object exposes the following properties:

Ценить Определение
VehicleType.RAIL Железная дорога.
VehicleType.METRO_RAIL Light rail transit.
VehicleType.SUBWAY Underground light rail.
VehicleType.TRAM Above ground light rail.
VehicleType.MONORAIL Monorail.
VehicleType.HEAVY_RAIL Heavy rail.
VehicleType.COMMUTER_TRAIN Commuter rail.
VehicleType.HIGH_SPEED_TRAIN High speed train.
VehicleType.BUS Автобус.
VehicleType.INTERCITY_BUS Intercity bus.
VehicleType.TROLLEYBUS Trolleybus.
VehicleType.SHARE_TAXI Share taxi is a kind of bus with the ability to drop off and pick up passengers anywhere on its route.
VehicleType.FERRY Перевозить.
VehicleType.CABLE_CAR A vehicle that operates on a cable, usually on the ground. Aerial cable cars may be of the type VehicleType.GONDOLA_LIFT .
VehicleType.GONDOLA_LIFT An aerial cable car.
VehicleType.FUNICULAR A vehicle that is pulled up a steep incline by a cable. A Funicular typically consists of two cars, with each car acting as a counterweight for the other.
VehicleType.OTHER All other vehicles will return this type.

Inspecting DirectionsResults

The DirectionsResults components — DirectionsRoute , DirectionsLeg , DirectionsStep and TransitDetails — may be inspected and used when parsing any directions response.

Important : If you are rendering transit directions manually instead of using the DirectionsRenderer object, you must display the names and URLs of the transit agencies servicing the trip results.

The following example plots walking directions to certain tourist attractions in New York City. We inspect the route's DirectionsStep to add markers for each step, and attach information to an InfoWindow with instructional text for that step.

Note : Since we are calculating walking directions, we also display any warnings to the user in a separate <div> panel. 

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);
  });
}

In the HTML body: 

<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>

Посмотреть пример

Using Waypoints in Routes

As noted within the DirectionsRequest , you may also specify waypoints (of type DirectionsWaypoint ) when calculating routes using the Directions service for walking, bicycling or driving directions. Waypoints are not available for transit directions. Waypoints allow you to calculate routes through additional locations, in which case the returned route passes through the given waypoints.

A waypoint consists of the following fields:

  • location (required) specifies the address of the waypoint.
  • stopover (optional) indicates whether this waypoint is a actual stop on the route ( true ) or instead only a preference to route through the indicated location ( false ). Stopovers are true by default.

By default, the Directions service calculates a route through the provided waypoints in their given order. Optionally, you may pass optimizeWaypoints: true within the DirectionsRequest to allow the Directions service to optimize the provided route by rearranging the waypoints in a more efficient order. (This optimization is an application of the traveling salesperson problem .) Travel time is the primary factor which is optimized, but other factors such as distance, number of turns and many more may be taken into account when deciding which route is the most efficient. All waypoints must be stopovers for the Directions service to optimize their route.

If you instruct the Directions service to optimize the order of its waypoints, their order will be returned in the waypoint_order field within the DirectionsResult object.

The following example calculates cross-country routes across the United States using a variety of start points, end points, and waypoints. (To select multiple waypoints, press Ctrl-Click when selecting items within the list.) Note that we inspect the routes.start_address and routes.end_address to provide us with the text for each route's start and end point.

Машинопись 

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;
index.ts

JavaScript 

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;
index.js

Limits and Restrictions for Waypoints

The following usage limits and restrictions apply:

  • The maximum number of waypoints allowed when using the Directions service in the Maps JavaScript API is 25, plus the origin and destination. The limits are the same for the Directions API (Legacy) web service .
  • For the Directions API (Legacy) web service , customers are allowed 25 waypoints, plus the origin, and destination.
  • Google Maps Platform Premium Plan customers are allowed 25 waypoints, plus the origin, and destination.
  • Waypoints are not supported for transit directions.

Draggable Directions

Users may modify cycling, walking or driving directions displayed using a DirectionsRenderer dynamically if they are draggable , allowing a user to select and alter routes by clicking and dragging the resulting paths on the map. You indicate whether a renderer's display allows draggable directions by setting its draggable property to true . Transit directions cannot be made draggable.

When directions are draggable, a user may select any point on the path (or waypoint) of the rendered result and move the indicated component to a new location. The DirectionsRenderer will dynamically update to show the modified path. Upon release, a transitional waypoint will be added to the map (indicated by a small white marker). Selecting and moving a path segment will alter that leg of the route, while selecting and moving a waypoint marker (including start and end points) will alter the legs of the route passing through that waypoint.

Because draggable directions are modified and rendered client-side, you may wish to monitor and handle the directions_changed event on the DirectionsRenderer to be notified when the user has modified the displayed directions.

The following code shows a trip from Perth on the west coast of Australia to Sydney on the east coast. The code monitors the directions_changed event to update the total distance of all legs of the journey.

Машинопись 

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;
index.ts

JavaScript 

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;
index.js
Посмотреть пример

Try Sample