Маршрут проезда на Google Maps v3

Автор: | 19.12.2011

Для каждой организации является важным показать на сайте в разделе контакты как до нее можно добраться.

В этой заметке я покажу пример реализации этого с использованием API Google Maps v3 для Нижнего Новгорода.

Недавно в Google Maps стало возможным строить маршруты по всей России.

Давайте в начале рассмотрим пример в действии

При заходе на страницу, мы наблюдаем карту над которой расположены поля для ввода адреса отправления и прибытия (адрес прибытия уже введен и имеет значение ул. Шорина, 13), а с правой стороны будет показываться маршрутный лист и подсчитываться общее расстояние пути.

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

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

Теперь рассмотрим код нашего примера.

В самом начале мы подключаем API Google Maps v3 и указываем дополнительный параметр language=ru — это необходимо чтобы маршрутный лист выводился на русском языке.

Затем javascript-библиотеку jQuery с сервера хостинга библиотек Google.

Задаем необходимые стили для отображения и глобальные переменные для карты и маршрута.

После этого определяем начальные параметры карты.

Как считается маршрут.

Значения полей формы мы передаем в переменные start и end для начала и конца маршрута соответственно.

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

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

* origin – точка, с которой будет начинаться маршрут
* destination – точка, в которой будет заканчиваться маршрут
* waypoints – массив точек, которые надо обойти
* optimizeWaypoints – признак возможности оптимизации точек в массиве. В нашем случае необходимо определить его в true, тогда для алгоритма будет не важен порядок обхода точек.
* travelMode – признак того, какой вид транспорта используется. Мы ищем маршрут для автомобиля, поэтому необходимо установить значение google.maps.TravelMode.DRIVING.

После вызова функции directionsService.route() необходимо проверить результат построения (status == google.maps.DirectionsStatus.OK).

Функция computeTotalDistance — подсчитывает общее расстояние пути.

В элемент с ID=directionsPanel выодиться информация о пути следования по маршруту.

И в этом скрипте реализовано автозаполнение названия улицы.

Для этого в базе данных была создана таблица с названиями улиц Нижнего Новгорода street_nn, данные были взяты здесь (Город Нижний Новгород почтовые отделения).

PHP-скрипт rpc.php формирует запрос к базе данных с выводом 10 записей из таблицы street_nn.

Функции lookup и fill предназначены для реализации автозаполнения.

В заключении заметки приведу еще один пример, где маршрут не просто строиться, но происходит анимация движения по маршруту.

Посмотреть пример в действии

Мой пример создан с использованием этого кода.

Архив с файлами для примера 1

Архив с файлами примера 2

Маршрут проезда на Google Maps v3: 35 комментариев

  1. Denis

    А как отловить событие при выборе альтернативного маршрута??

    1. admin Автор записи

      Я не написал, что в функцию directionsService.route может передаваться параметр provideRouteAlternatives — возможность расчета альтернативных маршрутов. Если его значение равно true, то возможен выбор альтернативного маршрута. Смотрите пример

  2. Ivan

    Здравствуйте!
    А можно ли как-то получить результат расчета маршрута в виде географических координат отрезков?

  3. Марат

    Здравствуйте, можно узнать данная функция прокладки маршрута будет работать для Узбекистана г. Ташкент

    1. admin Автор записи

      На картах Google для Ташкента маршрутизация работает, наверно будет работать и в API.
      Нужно попробовать на каком-либо простом примере

  4. Марат

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

  5. Андрей

    Скажите, а можно ли проложить маршрут через третью точку? Причем из нескольких «третьих точек» выбрать автоматически одну по какому либо критерию?

    1. admin Автор записи

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

  6. Nancy

    Подскажите пожалуйста, как сделать карту оп типу как в первом примере только не по улицам заданного города, а допустим по городам Москвы и МО? и можно ли сделать чтобы автоматически по маршруту крупные города ставились как промежуточные точки?

    1. admin Автор записи

      Сделать можно, нужен готовый список городов Московской области

  7. Andrey

    У меня в БД есть большое количество объектов с координитами.
    Как можно организовать фильтрацию объектов, например 30 мин «пешком» от заданной точки?
    Т.е. нужно отобразить на карте только те объекты (метки), до которых человек может дойти за 30 мин от заранее указанной точки.

    1. admin Автор записи

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

  8. Andrey

    Есть некий сервис http://www.aptekarsk.ru. Не подскажете как можно организовать подобный поиск в зависимости от способа перемещения и времени в пути?
    Изначально думал, что это можно реализовать с помощью сервиса
    Google Distance Matrix API, но google накладывает существенные оганичения на использование данного сервиса и если учесть, что в моей БД боле 500 адресов, то данный сервис мне не подходит. Очень интересно как в одном запросе происходит расчет времени в пути для столь большого количества точек.

  9. Евгений

    » и можно ли сделать чтобы автоматически по маршруту крупные города ставились как промежуточные точки?»

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

  10. Евгений

    пример этот я видел, здесь уже заранее известны города..
    как именно по маршруту поставить метки городов?
    я думаю может циклом пройтись по всему маршруту и иискать их бд, если город есть то ставить метку… но мне кажется бред и будет долго работать

  11. Александр

    Подскажите пожалуйста, как убрать из вашего примера «поводыря»? Но так, что бы выбор альтернативного маршрута остался. После нахождения маршрута он постоянно выдает инструкции на пол страницы, у меня небольшое модальное окно, что вызывает скролл, а это мне ни коем образом не нужно. Только если убрать функцию на вывод directionPanel она исчезает, но как выше было сказано, мне ещё нужен выбор альтернативных маршрутов. Заранее благодарю.

    1. admin Автор записи

      Есть пример с выводом альтернативных маршрутов. Немного позже я попробую свой пример переделать.

  12. Александр

    Спасибо! Попробую покопаться, но всё равно жду вашего переделанного примера, т.к. я пока что плохо в maps api разбираюсь. Заранее благодарствую!

  13. Андрей

    Скажите пожалуйста можно ли выделить цветом определённую улицу.
    Спасибо!

    1. admin Автор записи

      Нет, если только нарисовать полилинию поверх улицы

  14. Кирилл

    а можно ли расчитывать маршрут с учетом пробок ?
    если да то как

  15. Михаил

    Здравствуйте! У меня возникла такая проблема: даны просто два числа (координаты начала и конца маршрута). Требуется нарисовать карту, центрированную на середине между данными точками, изображающую маршрут. При этом при нажатии на маршрут, выпадает окошко с неким его описанием. В остальном карта абсолютно стандартная. Возможно ли такое?

  16. Ксения

    Здравствуйте, как можно реализовать маршрут (наикротчайшего пути)если у меня две разные точки отправления и одна точка прибытия? если возможно то как?

  17. mantisa

    отправил маркер с Вашего второго примера путешествовать по адресу назначения из г. Минска, РБ. переключил карту в режим спутника и настроил масштаб в соответствии со скоростью подкачки и рендеринга элементов карты. очень забавно наблюдать его путешествие по автострадам! : )
    с масштабом можно баловаться в разных позициях — интересно по всякому. уже проехал г. Жодино.
    Спасибо : ) : ) : )

  18. Рамеш

    Здравствуйте а можно во втором примере просто вывести еще длину пути в км. как в первом? Заранее спасибо!

    1. admin Автор записи

      После строки directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions); добавить код:

      google.maps.event.addListener(directionsDisplay, ‘directions_changed’, function() {

      computeTotalDistance(directionsDisplay.directions);

      });

      Добавить функцию вычисления расстояния computeTotalDistance из первого примера.

      И поле для вывода значения

      Расстояние:

      Смотрите пример

  19. Татьяна

    Здравствуйте, подскажите как можно вывести массив городов от начальной и конечной точки)

  20. Татьяна

    Спасибо,а может возможно преобразовать полученные координаты в адреса(например,в город или страну)?

  21. Dailik

    Спасибо за статью, помогло ))

    есть засада я эту анимацию перевел в функцию
    тоесть есть provideRouteAlternatives:true
    если чел выбирает другой вариант маршрута то анимация запускается снова.

    и проблема в том что
    если запустить 4-ый вариант маршрута все ок,
    если нажать на 3-й то проигрывается заново 4 потом 3, если после нажать на 2й то будет так 4->3->2

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

  22. Алексей

    Почему-то во всех примерах перестал отображаться русский язык, как его вернуть?

    1. admin Автор записи

      Нужно посмотреть какой язык в браузере установлен. Обычно если браузер на русском и Вы находитесь в России (IP-адрес лежит в российском диапазоне), то все надписи на картах по русски отображаются.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *