Все готово!

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

Активация Google Maps JavaScript API

Чтобы помочь вам освоиться, мы покажем, как выполнить некоторые необходимые действия в консоли разработчика Google:

  1. Создание или выбор проекта
  2. Активация Google Maps JavaScript API и связанных служб
  3. Создание соответствующих ключей

Служба Directions

Обзор

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

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

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

Начало работы

Перед использованием службы Directions в Google Maps JavaScript API убедитесь, что включен Google Maps Directions API в консоли Google API Console в том же проекте, который вы настроили для Google Maps JavaScript API.

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

  1. Перейдите в Google API Console.
  2. Нажмите кнопку Select a project, затем выберите тот же проект, который вы установили для Google Maps JavaScript API, и нажмите Open.
  3. В списке API на странице Dashboard найдите Google Maps Directions API.
  4. Если этот API присутствует в списке – все установлено. Если этого API в списке нет, включите его:
    1. Вверху страницы выберите ENABLE API, чтобы открыть вкладку Library. В качестве альтернативы можно выбрать пункт Library в меню слева.
    2. Найдите Google Maps Directions API и выберите его из списка результатов.
    3. Нажмите ENABLE. Когда процесс завершится, Google Maps Directions API появится в списке API на панели Dashboard.

Правила и ограничения на использование

Квоты

Для службы Directions действуют следующие ограничения на использование:

Использование службы Directions в рамках стандартного плана

  • 2 500 бесплатных запросов в день, рассчитывается как сумма обращений на стороне клиента и на стороне сервера; разрешите тарификацию ( разрешить тарификацию), чтобы получить больший размер квоты по цене 0,50 долларов США за 1 000 дополнительных обращений. Максимальный размер квоты составляет 100 000 запросов в день.
  • До 23 промежуточных точек для одного запроса, плюс исходная точка и точка назначения.
  • 50 запросов в секунду, рассчитывается как сумма запросов на стороне клиента и на стороне сервера.

Использование службы Directions в рамках премиум-плана

  • Общая ежедневная бесплатная квота – 100 000 запросов каждые 24 часа; дополнительные запросы оплачиваются ежегодно приобретаемыми кредитами Maps API.
  • До 23 промежуточных точек разрешено в каждом запросе, плюс исходная точка и точка назначения.
  • Без ограничений запросов по одному проекту на стороне клиента в секунду. Обратите внимание, что API на стороне сервера ограничен 50 запросами в секунду.

Лимит частоты применяется к сеансу каждого пользователя независимо от количества пользователей проекта.

Ограничение по частоте предотвращает использование служб на стороне клиента для массовых запросов. Для массовых запросов используйте веб-службу Google Maps Directions API.

Политики

Служба Directions должна использоваться в соответствии с правилами, описанными для Google Maps Directions API.

Запросы маршрутов

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

Для использования маршрутов в Google 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,
  avoidHighways: Boolean,
  avoidTolls: Boolean,
  region: String
}

Назначение этих полей объясняется ниже.

  • origin (обязательное) – указывает начальную точку для расчета маршрута. Это значение может быть указано в виде строки (например, "Chicago, IL"), значения LatLng или объекта google.maps.Place. В случае использования объекта google.maps.Place можно указать идентификатор места, строку запроса или точку LatLng. Идентификаторы мест можно получить от служб геокодирования, поиска мест и подсказок мест вGoogle Maps JavaScript API. Пример использования идентификаторов мест из службы подсказок мест можно найти в документе Подсказки мест и маршруты.
  • destination (обязательное) – указывает конечную точку для расчета маршрута. Параметры аналогичны параметрам поля origin, описанного выше.
  • travelMode (обязательное) – указывает, какой способ передвижения использовать при расчете маршрута. Допустимые значения указаны в разделе Способы передвижения ниже.
  • transitOptions (необязательное) – указывает значения, относящиеся только к запросам, где поле travelMode имеет значение TRANSIT. Допустимые значения описаны в разделе Параметры маршрута на общественном транспорте ниже.
  • drivingOptions (необязательное) – указывает значения, относящиеся только к запросам, где поле travelMode имеет значение DRIVING. Допустимые значения описаны в разделе Параметры автомобильного маршрута ниже.
  • unitSystem (необязательное) – указывает, какую систему единиц измерения следует использовать для отображения результатов. Допустимые значения указаны в разделе Системы единиц ниже.

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

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

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

  • optimizeWaypoints (необязательное) – указывает, что маршрут, использующий предоставленные значения waypoints, может быть оптимизирован путем расположения этих промежуточных точек в более эффективном порядке. Если это поле имеет значение true, служба Directions вернет промежуточные точки маршрута в измененном порядке в поле waypoint_order. (Дополнительную информацию см. в разделе Использование промежуточных точек в маршрутах ниже.)
  • provideRouteAlternatives (необязательное) – если это поле имеет значение true, служба Directions может указывать несколько альтернативных маршрутов в ответе. Следует отметить, что при наличии альтернативных маршрутов время ответа сервера может быть больше.
  • 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 в запрос DirectionsRequest, при загрузке API нужно указать идентификатор клиента Google Maps APIs Premium Plan.

Объект DrivingOptions содержит следующие поля:

{
  departureTime: Date,
  trafficModel: TrafficModel
}

Назначение этих полей объясняется ниже.

  • departureTime (обязательное для того, чтобы литерал объекта drivingOptions был корректным) – указывает желаемое время отъезда в виде объекта Date. Для этого значения должно быть установлено текущее время или определенный момент времени в будущем. Прошедший момент времени является недопустимым. (API преобразует все даты в формат UTC, чтобы обеспечить единообразную интерпретацию часовых поясов.) Если пользователь Google Maps APIs Premium Plan включит в запрос поле departureTime, API вернет оптимальный маршрут с учетом прогнозируемой дорожной обстановки на соответствующий момент времени и включит в ответ прогнозируемое время в пути (duration_in_traffic). Если время отъезда не указывать (т. е. если в запросе нет поля drivingOptions), API возвращает просто хороший маршрут без учета дорожной обстановки.
  • 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 Directions возвращает адреса в зависимости от домена (области или страны), откуда была произведена начальная загрузка сценария JavaScript. (Поскольку большинство пользователей загружают сайт https://maps.google.com/, в качестве явного домена указываются Соединенные Штаты Америки.) Если загрузка сценария производится из другого поддерживаемого домена, в получаемых результатах будет учитываться этот домен. Например, результаты поиска по ключевому слову "San Francisco" могут различаться для приложений, загружающих https://maps.google.com/ (Соединенные Штаты Америки), и для приложений, загружающих http://maps.google.es/ (Испания).

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

Данные по охвату Google Maps содержат информацию о том, какие маршруты поддерживаются для определенной страны.

Прорисовка маршрутов

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

Статус запроса маршрутов

Код DirectionsStatus может содержать следующие значения:

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

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

Отображение DirectionsResult

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

Для отображения DirectionsResult с помощью DirectionsRenderer нужно сделать следующее:

  1. Создайте объект DirectionsRenderer.
  2. Вызовите метод setMap() средства прорисовки для его привязки к переданной карте.
  3. Вызовите метод setDirections() средства прорисовки, передав ему объект DirectionsResult, как указано выше. Поскольку средство прорисовки представляет собой объект MVCObject, оно автоматически определяет изменения свойств и обновляет карту при изменении соответствующего маршрута.

В следующем примере показан расчет маршрута между двумя точками на шоссе 66, где исходная точка и точка назначения устанавливаются с помощью заданных значений start и end в выпадающих списках. Объект DirectionsRenderer обеспечивает отображение ломаной линии, соединяющей указанные точки, а также размещение маркеров исходной точки, точки назначения и промежуточных точек, если они есть.

var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;

function initialize() {
  directionsDisplay = new google.maps.DirectionsRenderer();
  var chicago = new google.maps.LatLng(41.850033, -87.6500523);
  var mapOptions = {
    zoom:7,
    center: chicago
  }
  map = new google.maps.Map(document.getElementById('map'), mapOptions);
  directionsDisplay.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') {
      directionsDisplay.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>

Просмотр примера (directions-simple.html)

В следующем примере показаны маршруты между районом Хейт-Эшбери (Haight-Ashbury) и пляжем Оушен-Бич (Ocean Beach) в Сан-Франциско (Калифорния, США) для разных способов передвижения:

var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
var haight = new google.maps.LatLng(37.7699298, -122.4469157);
var oceanBeach = new google.maps.LatLng(37.7683909618184, -122.51089453697205);

function initialize() {
  directionsDisplay = new google.maps.DirectionsRenderer();
  var mapOptions = {
    zoom: 14,
    center: haight
  }
  map = new google.maps.Map(document.getElementById('map'), mapOptions);
  directionsDisplay.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') {
      directionsDisplay.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>

Просмотр примера (directions-travel-modes.html)

Объект DirectionsRenderer не только обеспечивает прорисовку ломаной линии и всех связанных маркеров, но также может вывести маршрут в виде текстового описания последовательности шагов. Для этого нужно просто вызвать метод setPanel() объекта DirectionsRenderer и передать ему элемент панели <div>, в которой будет отображаться эта информация. Это также обеспечит отображение необходимой информации об авторских правах и всех предупреждений, которые могут быть связаны с результатом.

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

Следующий пример идентичен предыдущему, однако он включает панель <div>, в которой отображается описание маршрута:

var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;

function initialize() {
  directionsDisplay = new google.maps.DirectionsRenderer();
  var chicago = new google.maps.LatLng(41.850033, -87.6500523);
  var mapOptions = {
    zoom:7,
    center: chicago
  }
  map = new google.maps.Map(document.getElementById('map'), mapOptions);
  directionsDisplay.setMap(map);
  directionsDisplay.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') {
      directionsDisplay.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>

Просмотр примера (directions-panel.html)

Объект DirectionsResult

При отправке запроса маршрутов в службу DirectionsService вы получаете ответ, содержащий код состояния и результат в виде объекта DirectionsResult. Литерал объекта DirectionsResult содержит следующие поля:

  • geocoded_waypoints[] – содержит массив объектов DirectionsGeocodedWaypoint, каждый из которых содержит подробные данные о геокодах исходной точки, точки назначения и промежуточных точек.
  • routes[] – содержит массив объектов DirectionsRoute. Каждый маршрут показывает способ добраться из исходной точки в точку назначения, указанную в запросе DirectionsRequest. Обычно для каждого запроса выводится только один маршрут, но если в поле provideRouteAlternatives указано значение true, возможен вывод нескольких маршрутов.

Промежуточные точки маршрутов с геокодами

Объект DirectionsGeocodedWaypoint содержит подробные данные о геокодах исходной точки, точки назначения и промежуточных точек маршрута.

Литерал объекта DirectionsGeocodedWaypoint имеет следующие поля:

  • geocoder_status – код состояния, полученный от операции геокодирования. Это поле может содержать следующие значения.
    • "OK" – ошибок нет, адрес обработан и получен хотя бы один геокод.
    • "ZERO_RESULTS" – геокодирование успешно выполнено, однако результаты не найдены. Это может произойти, если геокодировщику был передан несуществующий адрес (address).
  • partial_match – указывает, что геокодировщик не вернул точное совпадение для начального запроса, хотя и обнаружил частичное совпадение с запрашиваемым адресом. Рекомендуется проверить исходный запрос на наличие в нем опечаток и/или неполного адреса.

    В большинстве случаев частичные совпадения возникают при использовании почтовых адресов, которые отсутствуют в местности, указанной в запросе. Частичные совпадения могут также возвращаться для запросов, в которых имеется соответствие нескольким местоположениям в пределах одной местности. Например, запрос "улица Генр, 21, Бристоль, Великобритания" вернет частично совпадающие результаты для "улица Генри" и "улица Генриетты". Обратите внимание, если запрос содержит ошибки в написании адреса, служба геокодирования может предложить альтернативный адрес. Такие предложения также будут помечены как частичные совпадения.

  • place_id – уникальный идентификатор места, который можно использовать и с другими API Google. Например, вы можете использовать place_id с библиотекой Google Places API для получения подробной информации о местной компании, например: номер телефона, часы работы, отзывы пользователей и т. д. Более подробную информацию см. в обзоре идентификаторов мест.
  • types[] – массив, указывающий тип возвращаемого результата. Этот массив содержит набор из нескольких (либо ни одного) тегов, которые определяют тип возвращаемого элемента. Например, геокод "Chicago" возвращает значение "locality", указывающее, что "Chicago" – это город, а также значение "political", указывающее, что это политическая единица.

Маршруты службы Directions

Старый объект 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 – содержит информацию об общей стоимости (т. е. общей стоимости билетов) этого маршрута. Это свойство возвращается только для маршрутов на общественном транспорте с доступной информацией о стоимости проезда по всем участкам. Эта информация включает следующие сведения:
    • 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 возвращается только при выполнении следующих условий:

    • Запрос включает в себя действительный идентификатор клиента Google Maps APIs Premium Plan.
    • Запрос не содержит промежуточных точек для остановок. Иными словами, он не включает в себя промежуточные точки, в которых для 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 является базовым элементом маршрута. Он содержит один шаг с описанием конкретного отдельного указания по поездке. Например: «Повернуть налево на 4-й улице» Шаг содержит не только описание указания, но также данные о расстоянии и времени поездки, показывающие связь этого шага со следующим шагом. Например, шаг "Повернуть на М-80" может содержать указание длительности "37 км" или "40 минут", что означает, что следующий шаг начинается через 37 км или 40 минут после этого шага.

Когда служба Directions используется для поиска маршрутов на общественном транспорте, шаги также содержат дополнительную информацию о конкретном транспорте в виде объекта transit. Если в маршрут включено несколько способов передвижения, подробные указания по шагам пешего или автомобильного маршрута предоставляются в массиве steps[]. Например, описание шага пешего маршрута содержат указания по начальной и конечной точкам: "Дойти до перекрестка Иннес-Авеню и Фич-Стрит". Этот шаг будет содержать подробные указания для движения по этому маршруту в массиве steps[], например: "Двигайтесь на северо-запад", "Поверните налево на Арелиос-Уокер" и "Поверните налево на Иннес-Авеню".

Литерал объекта 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 – название остановки/станции, например, "Площадь Союза".
    • location – месторасположение остановки/станции общественного транспорта в виде значения LatLng.
  • departure_stop – содержит объект TransitStop, представляющий остановку/станцию отъезда.
  • arrival_time – содержит время прибытия, указанное в виде объекта Time с тремя свойствами:
    • value – время, указанное в виде объекта JavaScript Date.
    • text – время, указанное в виде строки. Время указывается в часовом поясе остановки общественного транспорта.
    • time_zone – содержит часовой пояс остановки. Его значение – название часового пояса, определенное в базе данных часовых поясов IANA, например, "America/New_York".
  • departure_time – содержит время отъезда, указанное в виде объекта Time.
  • headsign – указывает направление движения по этому маршруту, обозначенное на транспортном средстве или на остановке отъезда. Обычно это бывает конечная остановка или станция.
  • headway – указывает ожидаемый период в секундах между временем отправки транспорта с одной и той же остановки в это время (если используется). Например, если значение headway равняется 600, следующего автобуса нужно ждать десять минут.
  • line – содержит литерал объекта TransitLine, в котором содержится информация о маршруте общественного транспорта, который используется на этом шаге. Объект TransitLine содержит название и оператора маршрута общественного транспорта, а также другие свойства, описанные в справочной документации по объекту TransitLine.
  • num_stops – содержит количество остановок на этом шаге. Включает остановку прибытия, но не остановку отъезда. Например, если вы отъезжаете с остановки A, проезжаете остановки B и C и выходите на остановке D, значение num_stops будет равняться 3.

Маршрут общественного транспорта

Объект TransitLine имеет следующие свойства:

  • name – полное название маршрута общественного транспорта, например, "Экспресс 7 авеню" или "14-й Сент-Кросстаун".
  • short_name – краткое название маршрута общественного транспорта. Обычно это номер маршрута, например "2" или "М14".
  • agencies – содержит массив типа TransitAgency. Каждый объект TransitAgency содержит информацию об операторе этого маршрута, включающую следующие свойства:
    • name – содержит название транспортного агентства.
    • url – URL-адрес сайта транспортного агентства.
    • phone – номер телефона транспортного агентства.

    Если прорисовка маршрута на общественном транспорте осуществляется приложением, а не объектом DirectionsRenderer, приложение должно выводить названия и URL-адреса транспортных служб, обслуживающих соответствующие маршруты.

  • url – URL-адрес этого маршрута общественного транспорта, указанный транспортным агентством.
  • icon – URL-адрес значка, связанного с этим маршрутом общественного транспорта. В большинстве городов используются стандартные значки для разных видов общественного транспорта. Для некоторых маршрутов общественного транспорта, таких как Нью-Йоркский метрополитен, используются специальные значки.
  • color – цвет, обычно используемый в знаках этого вида транспорта. Цвет указывается в виде шестнадцатеричной строки, например: #FF0033.
  • text_color – цвет текста, обычно используемого в знаках этого вида транспорта. Цвет указывается в виде шестнадцатеричной строки.
  • 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 directionsDisplay;
var directionsService;
var stepDisplay;
var markerArray = [];

function initialize() {
  // 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
  }
  directionsDisplay = 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 + "";
      directionsDisplay.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>

Просмотр примера (directions-complex.html)

Использование промежуточных точек в маршрутах

Как уже говорилось в описании запросов DirectionsRequest, при расчете пеших, велосипедных или автомобильных маршрутов с помощью службы Directions также можно указать промежуточные точки (типа DirectionsWaypoint). Промежуточные точки недоступны для маршрутов на общественном транспорте. Промежуточные точки позволяют рассчитать путь через дополнительные места, и в этом случае возвращаемый маршрут будет проходить через указанные промежуточные точки.

Промежуточная точка состоит из следующих полей:

  • location (обязательно) – указывает адрес промежуточной точки.
  • stopover (не обязательно) – указывает, является ли эта промежуточная точка остановкой на маршруте (true), или же маршрут просто должен проходить через указанное место (false). По умолчанию для этого поля используется значение true.

По умолчанию служба Directions рассчитывает маршрут через указанные промежуточные точки в порядке их указания. Также вы можете использовать параметр optimizeWaypoints: true в запросе DirectionsRequest, чтобы служба Directions могла оптимизировать маршрут, расположив промежуточные точки в более эффективном порядке. (Эта оптимизация является практическим примером решения задачи коммивояжера). Время пути является основным оптимизируемым фактором, но при выборе оптимального маршрута могут учитываться и такие факторы, как расстояние, количество поворотов и прочие. Для оптимизации маршрута службой Directions все промежуточные точки должны быть остановками.

Если вы поручите службе Directions оптимизировать маршрут, порядок промежуточных точек будет возвращен в поле waypoint_order в объекте DirectionsResult.

В следующем примере приведен расчет маршрутов через Соединенные Штаты Америки с использованием разнообразных начальных, конечных и промежуточных точек. (Чтобы выбрать несколько промежуточных точек, удерживайте клавишу Ctrl при выборе элементов в списке.) Мы проверяем параметры routes.start_address и routes.end_address, которые предоставляют текст для каждой начальной и конечной точки маршрута.

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

  document.getElementById('submit').addEventListener('click', function() {
    calculateAndDisplayRoute(directionsService, directionsDisplay);
  });
}

function calculateAndDisplayRoute(directionsService, directionsDisplay) {
  var waypts = [];
  var checkboxArray = document.getElementById('waypoints');
  for (var 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: 'DRIVING'
  }, function(response, status) {
    if (status === 'OK') {
      directionsDisplay.setDirections(response);
      var route = response.routes[0];
      var summaryPanel = document.getElementById('directions-panel');
      summaryPanel.innerHTML = '';
      // For each route, display summary information.
      for (var i = 0; i < route.legs.length; i++) {
        var 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>';
      }
    } else {
      window.alert('Directions request failed due to ' + status);
    }
  });
}
<div id="map"></div>
<div id="right-panel">
<div>
<b>Start:</b>
<select id="start">
  <option value="Halifax, NS">Halifax, NS</option>
  <option value="Boston, MA">Boston, MA</option>
  <option value="New York, NY">New York, NY</option>
  <option value="Miami, FL">Miami, FL</option>
</select>
<br>
<b>Waypoints:</b> <br>
<i>(Ctrl+Click or Cmd+Click for multiple selection)</i> <br>
<select multiple id="waypoints">
  <option value="montreal, quebec">Montreal, QBC</option>
  <option value="toronto, ont">Toronto, ONT</option>
  <option value="chicago, il">Chicago</option>
  <option value="winnipeg, mb">Winnipeg</option>
  <option value="fargo, nd">Fargo</option>
  <option value="calgary, ab">Calgary</option>
  <option value="spokane, wa">Spokane</option>
</select>
<br>
<b>End:</b>
<select id="end">
  <option value="Vancouver, BC">Vancouver, BC</option>
  <option value="Seattle, WA">Seattle, WA</option>
  <option value="San Francisco, CA">San Francisco, CA</option>
  <option value="Los Angeles, CA">Los Angeles, CA</option>
</select>
<br>
  <input type="submit" id="submit">
</div>
<div id="directions-panel"></div>
</div>
#right-panel {
  font-family: 'Roboto','sans-serif';
  line-height: 30px;
  padding-left: 10px;
}

#right-panel select, #right-panel input {
  font-size: 15px;
}

#right-panel select {
  width: 100%;
}

#right-panel i {
  font-size: 12px;
}
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#map {
  height: 100%;
  float: left;
  width: 70%;
  height: 100%;
}
#right-panel {
  margin: 20px;
  border-width: 2px;
  width: 20%;
  height: 400px;
  float: left;
  text-align: left;
  padding-top: 0;
}
#directions-panel {
  margin-top: 10px;
  background-color: #FFEE77;
  padding: 10px;
}
 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
function initMap() {
  var directionsService = new google.maps.DirectionsService;
  var directionsDisplay = new google.maps.DirectionsRenderer;
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 6,
    center: {lat: 41.85, lng: -87.65}
  });
  directionsDisplay.setMap(map);

  document.getElementById('submit').addEventListener('click', function() {
    calculateAndDisplayRoute(directionsService, directionsDisplay);
  });
}

function calculateAndDisplayRoute(directionsService, directionsDisplay) {
  var waypts = [];
  var checkboxArray = document.getElementById('waypoints');
  for (var 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: 'DRIVING'
  }, function(response, status) {
    if (status === 'OK') {
      directionsDisplay.setDirections(response);
      var route = response.routes[0];
      var summaryPanel = document.getElementById('directions-panel');
      summaryPanel.innerHTML = '';
      // For each route, display summary information.
      for (var i = 0; i < route.legs.length; i++) {
        var 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>';
      }
    } else {
      window.alert('Directions request failed due to ' + status);
    }
  });
}

Просмотр примера (directions-waypoints.html).

Лимиты и ограничения для промежуточных точек

Предусмотрены следующие лимиты и ограничения на использование:

  • Максимальное допустимое количество промежуточных точек при использовании службы Directions в Google Maps JavaScript API равно 23, плюс исходная точка и точка назначения. Лимиты такие же, как и для веб-службы Google Maps Directions API.
  • Для веб-службы Google Maps Directions API пользователям разрешено использовать 23 промежуточных точек, плюс исходная точка и точка назначения.
  • Владельцам Google Maps APIs Premium Plan разрешено использовать 23 промежуточных точек, плюс исходная точка и точка назначения.
  • Промежуточные точки не поддерживаются для маршрутов на общественном транспорте.

Перетаскиваемые маршруты

Пользователи могут динамически изменять велосипедные, пешие или автомобильные маршруты, отображаемые с помощью объекта DirectionsRenderer, если эти маршруты перетаскиваемые, то есть пользователь может изменять их путем перетаскивания линий на карте. Для указания того, что средство прорисовки позволяет перетаскивать маршруты, необходимо установить для его свойства draggable значение true. Маршруты на общественном транспорте нельзя сделать перетаскиваемыми.

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

Поскольку перетаскиваемые маршруты изменяются и отрисовываются на стороне клиента, вашему приложению может понадобиться отслеживать и обрабатывать событие directions_changed объекта DirectionsRenderer, чтобы получать уведомления об изменении отображаемого маршрута пользователем.

Следующий программный код демонстрирует поездку из г. Перт, на западном побережье Австралии, в г. Сидней, расположенный на восточном побережье. Код следит за событием directions_changed, чтобы обновлять общее расстояние всех участков маршрута.

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

  var directionsService = new google.maps.DirectionsService;
  var directionsDisplay = new google.maps.DirectionsRenderer({
    draggable: true,
    map: map,
    panel: document.getElementById('right-panel')
  });

  directionsDisplay.addListener('directions_changed', function() {
    computeTotalDistance(directionsDisplay.getDirections());
  });

  displayRoute('Perth, WA', 'Sydney, NSW', directionsService,
      directionsDisplay);
}

function displayRoute(origin, destination, service, display) {
  service.route({
    origin: origin,
    destination: destination,
    waypoints: [{location: 'Adelaide, SA'}, {location: 'Broken Hill, NSW'}],
    travelMode: 'DRIVING',
    avoidTolls: true
  }, function(response, status) {
    if (status === 'OK') {
      display.setDirections(response);
    } else {
      alert('Could not display directions due to: ' + status);
    }
  });
}

function computeTotalDistance(result) {
  var total = 0;
  var myroute = result.routes[0];
  for (var i = 0; i < myroute.legs.length; i++) {
    total += myroute.legs[i].distance.value;
  }
  total = total / 1000;
  document.getElementById('total').innerHTML = total + ' km';
}
<div id="map"></div>
<div id="right-panel">
  <p>Total Distance: <span id="total"></span></p>
</div>
#right-panel {
  font-family: 'Roboto','sans-serif';
  line-height: 30px;
  padding-left: 10px;
}

#right-panel select, #right-panel input {
  font-size: 15px;
}

#right-panel select {
  width: 100%;
}

#right-panel i {
  font-size: 12px;
}
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#map {
  height: 100%;
  float: left;
  width: 63%;
  height: 100%;
}
#right-panel {
  float: right;
  width: 34%;
  height: 100%;
}
.panel {
  height: 100%;
  overflow: auto;
}
 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: -24.345, lng: 134.46}  // Australia.
  });

  var directionsService = new google.maps.DirectionsService;
  var directionsDisplay = new google.maps.DirectionsRenderer({
    draggable: true,
    map: map,
    panel: document.getElementById('right-panel')
  });

  directionsDisplay.addListener('directions_changed', function() {
    computeTotalDistance(directionsDisplay.getDirections());
  });

  displayRoute('Perth, WA', 'Sydney, NSW', directionsService,
      directionsDisplay);
}

function displayRoute(origin, destination, service, display) {
  service.route({
    origin: origin,
    destination: destination,
    waypoints: [{location: 'Adelaide, SA'}, {location: 'Broken Hill, NSW'}],
    travelMode: 'DRIVING',
    avoidTolls: true
  }, function(response, status) {
    if (status === 'OK') {
      display.setDirections(response);
    } else {
      alert('Could not display directions due to: ' + status);
    }
  });
}

function computeTotalDistance(result) {
  var total = 0;
  var myroute = result.routes[0];
  for (var i = 0; i < myroute.legs.length; i++) {
    total += myroute.legs[i].distance.value;
  }
  total = total / 1000;
  document.getElementById('total').innerHTML = total + ' km';
}

Просмотр примера (directions-draggable.html).

Оставить отзыв о...

Текущей странице
Google Maps JavaScript API
Google Maps JavaScript API
Нужна помощь? Обратитесь в службу поддержки.