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

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

В этой заметке я покажу пример реализации этого с использованием 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

  • Гость: А как отловить событие при выборе альтернативного маршрута??
  • Гость: Я не написал, что в функцию directionsService.route может передаваться параметр provideRouteAlternatives - возможность расчета альтернативных маршрутов. Если его значение равно true, то возможен выбор альтернативного маршрута. Смотрите <a href="http://webmap-blog.ru/files/marshruts-gmap/gmapv3-direct-2.html" rel="nofollow">пример</a>
  • Гость: Здравствуйте! А можно ли как-то получить результат расчета маршрута в виде географических координат отрезков?
  • Гость: Можно. Подготовил <a href="http://webmap-blog.ru/files/marshruts-gmap/gmapv3-direct-3.html" rel="nofollow">пример</a> с выводом координат маршрута
  • Гость: Здравствуйте, можно узнать данная функция прокладки маршрута будет работать для Узбекистана г. Ташкент
  • Гость: На картах Google для Ташкента маршрутизация работает, наверно будет работать и в API. Нужно попробовать на каком-либо простом примере
  • Гость: Подскажите, пожалуйста как сохранить в базе данных выбранный маршрут
  • Гость: Скажите, а можно ли проложить маршрут через третью точку? Причем из нескольких "третьих точек" выбрать автоматически одну по какому либо критерию?
  • Гость: Можно прокладывать маршрут указывая любое количество промежуточных точек, существует <a href="https://google-developers.appspot.com/maps/documentation/javascript/examples/directions-waypoints?hl=ru-RU" title="Пример указания промежуточных точек" target="_blank" rel="nofollow">пример</a> в документации с возможностью выбора одной или нескольких промежуточных точек.
  • Гость: Подскажите пожалуйста, как сделать карту оп типу как в первом примере только не по улицам заданного города, а допустим по городам Москвы и МО? и можно ли сделать чтобы автоматически по маршруту крупные города ставились как промежуточные точки?
  • Гость: Сделать можно, нужен готовый список городов Московской области
  • Гость: У меня в БД есть большое количество объектов с координитами. Как можно организовать фильтрацию объектов, например 30 мин "пешком" от заданной точки? Т.е. нужно отобразить на карте только те объекты (метки), до которых человек может дойти за 30 мин от заранее указанной точки.
  • Гость: Можно выводить данные в определенном радиусе от заданной точки. Еще я видел пример с построением маршрута в окружности определенного радиуса, найду пример, напишу ссылку
  • Гость: Есть некий сервис www.aptekarsk.ru. Не подскажете как можно организовать подобный поиск в зависимости от способа перемещения и времени в пути? Изначально думал, что это можно реализовать с помощью сервиса Google Distance Matrix API, но google накладывает существенные оганичения на использование данного сервиса и если учесть, что в моей БД боле 500 адресов, то данный сервис мне не подходит. Очень интересно как в одном запросе происходит расчет времени в пути для столь большого количества точек.
  • Гость: " и можно ли сделать чтобы автоматически по маршруту крупные города ставились как промежуточные точки?" меня тоже инетерсует данный вопрос, база городов имеется, координаты городов тоже не проблема подскажите пожалуйста как это реализовать
  • Гость: Надеюсь Вам поможет такой <a href="https://google-developers.appspot.com/maps/documentation/javascript/examples/directions-waypoints" title="Google Maps JavaScript API v3 Example: Directions Waypoints" target="_blank" rel="nofollow">пример</a>
  • Гость: пример этот я видел, здесь уже заранее известны города.. как именно по маршруту поставить метки городов? я думаю может циклом пройтись по всему маршруту и иискать их бд, если город есть то ставить метку... но мне кажется бред и будет долго работать
  • Гость: Подскажите пожалуйста, как убрать из вашего примера "поводыря"? Но так, что бы выбор альтернативного маршрута остался. После нахождения маршрута он постоянно выдает инструкции на пол страницы, у меня небольшое модальное окно, что вызывает скролл, а это мне ни коем образом не нужно. Только если убрать функцию на вывод directionPanel она исчезает, но как выше было сказано, мне ещё нужен выбор альтернативных маршрутов. Заранее благодарю.
  • Гость: Есть <a href="http://www.geocodezip.com/differentum_com_map-testA.html" target="_blank" rel="nofollow">пример</a> с выводом альтернативных маршрутов. Немного позже я попробую свой пример переделать.
  • Гость: Спасибо! Попробую покопаться, но всё равно жду вашего переделанного примера, т.к. я пока что плохо в maps api разбираюсь. Заранее благодарствую!
  • Гость: Скажите пожалуйста можно ли выделить цветом определённую улицу. Спасибо!
  • Гость: Нет, если только нарисовать полилинию поверх улицы
  • Гость: а можно ли расчитывать маршрут с учетом пробок ? если да то как
  • Гость: Нашел <a href="http://gmaps-samples-v3.googlecode.com/svn/trunk/drivingdirections/directions_tict.html" title="Google Maps JavaScript API v3 Example: Directions API - Time in current traffic" target="_blank" rel="nofollow">пример</a>, надеюсь он Вам поможет
  • Гость: Здравствуйте! У меня возникла такая проблема: даны просто два числа (координаты начала и конца маршрута). Требуется нарисовать карту, центрированную на середине между данными точками, изображающую маршрут. При этом при нажатии на маршрут, выпадает окошко с неким его описанием. В остальном карта абсолютно стандартная. Возможно ли такое?
  • Гость: Здравствуйте, как можно реализовать маршрут (наикротчайшего пути)если у меня две разные точки отправления и одна точка прибытия? если возможно то как?
  • Гость: отправил маркер с Вашего второго примера путешествовать по адресу назначения из г. Минска, РБ. переключил карту в режим спутника и настроил масштаб в соответствии со скоростью подкачки и рендеринга элементов карты. очень забавно наблюдать его путешествие по автострадам! : ) с масштабом можно баловаться в разных позициях - интересно по всякому. уже проехал г. Жодино. Спасибо : ) : ) : )
  • Гость: Здравствуйте а можно во втором примере просто вывести еще длину пути в км. как в первом? Заранее спасибо!
  • Гость: После строки directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions); добавить код: google.maps.event.addListener(directionsDisplay, 'directions_changed', function() { computeTotalDistance(directionsDisplay.directions); }); Добавить функцию вычисления расстояния computeTotalDistance из первого примера. И поле для вывода значения <p>Расстояние: <span id="total"></span></p> Смотрите <a href="http://webmap-blog.ru/files/marshruts-gmap/test-direct.html" title="Пример" target="_blank" rel="nofollow">пример</a>
  • Гость: Здравствуйте, подскажите как можно вывести массив городов от начальной и конечной точки)
  • Гость: Этого сделать нельзя
  • Гость: Спасибо,а может возможно преобразовать полученные координаты в адреса(например,в город или страну)?
  • Гость: Спасибо за статью, помогло )) есть засада я эту анимацию перевел в функцию тоесть есть provideRouteAlternatives:true если чел выбирает другой вариант маршрута то анимация запускается снова. и проблема в том что если запустить 4-ый вариант маршрута все ок, если нажать на 3-й то проигрывается заново 4 потом 3, если после нажать на 2й то будет так 4-&gt;3-&gt;2 где нужно сбросить параметры чтоб после проигрывания сразу сбрасывались данные.. ?
  • Гость: Почему-то во всех примерах перестал отображаться русский язык, как его вернуть?
  • Гость: Нужно посмотреть какой язык в браузере установлен. Обычно если браузер на русском и Вы находитесь в России (IP-адрес лежит в российском диапазоне), то все надписи на картах по русски отображаются.
  • Гость: Здравствуйте. Пытаюсь сделать по первому примеру маршрут из владивостока в москву, но не работает. Аналогично с более близкими городами - владивосток - хабаровск. Почему е работает? я только поменял это: var start = 'Владивосток, '; var end = 'Хабаровск, ';
  • Tanya Tiger: Большое спасибо за статью!
  • Гость: Здравствуйте, спасибо большое за статью. Есть вопрос: Как можно задать цвет линии маршрута, который рисуется?
  • Александр Курпенко: Здравствуйте. Подскажите пожалуйста, скачал "архив с файлами примера 2". Импортировал БД. При запуске не отображалась карта, с ней вопрос решил. Не хочет работать автозаполнение, пробовал создавать БД с таким же названием как и в экспортируемом файле "map_cek_ru", так же задавал произвольные названия, в php файлах соответсвенно менял название к подключаемой БД. Все равно не хочет работать, в чём может быть проблема? Спасибо. С Ув. Александр.
  • Александр Курпенко: т.е. "архив с файлами примера 1"
  • Александр Курпенко: Проблему решил. Спасибо за отклик.
  • Роман Рагозин: Здравствуйте, не подскажите как сделать подобное вдоль произвольной линии составленной на google maps, т.е. не заданные точки, а маршрут заданный линией
  • Сергей Угольников: По моему нельзя. Можно задавать не две, а несколько точек для построения маршрута, промежуточные точки.
  • Гость: Подскажите, а как можно вывести отдельно время маршрута? Чтобы потом сохранить в какую-нибудь переменную...
  • Гость: Подскажите пожалуйста как задать стартовую и конечную точки по клику на карте?
  • Андрей: Отличный урок, а как добавить автозаполнение средствами Google API? Ведь если хочется сделать прокладку маршрута по России, базу с городами и селами замучаешься составлять - не в Ватикане живем)))