Для каждой организации является важным показать на сайте в разделе контакты как до нее можно добраться.
В этой заметке я покажу пример реализации этого с использованием 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 предназначены для реализации автозаполнения.
В заключении заметки приведу еще один пример, где маршрут не просто строиться, но происходит анимация движения по маршруту.
Мой пример создан с использованием этого кода.
А как отловить событие при выборе альтернативного маршрута??
Я не написал, что в функцию directionsService.route может передаваться параметр provideRouteAlternatives — возможность расчета альтернативных маршрутов. Если его значение равно true, то возможен выбор альтернативного маршрута. Смотрите пример
Здравствуйте!
А можно ли как-то получить результат расчета маршрута в виде географических координат отрезков?
Можно. Подготовил пример с выводом координат маршрута
Здравствуйте, можно узнать данная функция прокладки маршрута будет работать для Узбекистана г. Ташкент
На картах Google для Ташкента маршрутизация работает, наверно будет работать и в API.
Нужно попробовать на каком-либо простом примере
Подскажите, пожалуйста как сохранить в базе данных выбранный маршрут
Скажите, а можно ли проложить маршрут через третью точку? Причем из нескольких «третьих точек» выбрать автоматически одну по какому либо критерию?
Можно прокладывать маршрут указывая любое количество промежуточных точек, существует пример в документации с возможностью выбора одной или нескольких промежуточных точек.
Подскажите пожалуйста, как сделать карту оп типу как в первом примере только не по улицам заданного города, а допустим по городам Москвы и МО? и можно ли сделать чтобы автоматически по маршруту крупные города ставились как промежуточные точки?
Сделать можно, нужен готовый список городов Московской области
У меня в БД есть большое количество объектов с координитами.
Как можно организовать фильтрацию объектов, например 30 мин «пешком» от заданной точки?
Т.е. нужно отобразить на карте только те объекты (метки), до которых человек может дойти за 30 мин от заранее указанной точки.
Можно выводить данные в определенном радиусе от заданной точки.
Еще я видел пример с построением маршрута в окружности определенного радиуса, найду пример, напишу ссылку
Есть некий сервис http://www.aptekarsk.ru. Не подскажете как можно организовать подобный поиск в зависимости от способа перемещения и времени в пути?
Изначально думал, что это можно реализовать с помощью сервиса
Google Distance Matrix API, но google накладывает существенные оганичения на использование данного сервиса и если учесть, что в моей БД боле 500 адресов, то данный сервис мне не подходит. Очень интересно как в одном запросе происходит расчет времени в пути для столь большого количества точек.
» и можно ли сделать чтобы автоматически по маршруту крупные города ставились как промежуточные точки?»
меня тоже инетерсует данный вопрос, база городов имеется, координаты городов тоже не проблема
подскажите пожалуйста как это реализовать
Надеюсь Вам поможет такой пример
пример этот я видел, здесь уже заранее известны города..
как именно по маршруту поставить метки городов?
я думаю может циклом пройтись по всему маршруту и иискать их бд, если город есть то ставить метку… но мне кажется бред и будет долго работать
Подскажите пожалуйста, как убрать из вашего примера «поводыря»? Но так, что бы выбор альтернативного маршрута остался. После нахождения маршрута он постоянно выдает инструкции на пол страницы, у меня небольшое модальное окно, что вызывает скролл, а это мне ни коем образом не нужно. Только если убрать функцию на вывод directionPanel она исчезает, но как выше было сказано, мне ещё нужен выбор альтернативных маршрутов. Заранее благодарю.
Есть пример с выводом альтернативных маршрутов. Немного позже я попробую свой пример переделать.
Спасибо! Попробую покопаться, но всё равно жду вашего переделанного примера, т.к. я пока что плохо в maps api разбираюсь. Заранее благодарствую!
Скажите пожалуйста можно ли выделить цветом определённую улицу.
Спасибо!
Нет, если только нарисовать полилинию поверх улицы
а можно ли расчитывать маршрут с учетом пробок ?
если да то как
Нашел пример, надеюсь он Вам поможет
Здравствуйте! У меня возникла такая проблема: даны просто два числа (координаты начала и конца маршрута). Требуется нарисовать карту, центрированную на середине между данными точками, изображающую маршрут. При этом при нажатии на маршрут, выпадает окошко с неким его описанием. В остальном карта абсолютно стандартная. Возможно ли такое?
Здравствуйте, как можно реализовать маршрут (наикротчайшего пути)если у меня две разные точки отправления и одна точка прибытия? если возможно то как?
отправил маркер с Вашего второго примера путешествовать по адресу назначения из г. Минска, РБ. переключил карту в режим спутника и настроил масштаб в соответствии со скоростью подкачки и рендеринга элементов карты. очень забавно наблюдать его путешествие по автострадам! : )
с масштабом можно баловаться в разных позициях — интересно по всякому. уже проехал г. Жодино.
Спасибо : ) : ) : )
Здравствуйте а можно во втором примере просто вывести еще длину пути в км. как в первом? Заранее спасибо!
После строки directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions); добавить код:
google.maps.event.addListener(directionsDisplay, ‘directions_changed’, function() {
computeTotalDistance(directionsDisplay.directions);
});
Добавить функцию вычисления расстояния computeTotalDistance из первого примера.
И поле для вывода значения
Расстояние:
Смотрите пример
Здравствуйте, подскажите как можно вывести массив городов от начальной и конечной точки)
Этого сделать нельзя
Спасибо,а может возможно преобразовать полученные координаты в адреса(например,в город или страну)?
Спасибо за статью, помогло ))
есть засада я эту анимацию перевел в функцию
тоесть есть provideRouteAlternatives:true
если чел выбирает другой вариант маршрута то анимация запускается снова.
и проблема в том что
если запустить 4-ый вариант маршрута все ок,
если нажать на 3-й то проигрывается заново 4 потом 3, если после нажать на 2й то будет так 4->3->2
где нужно сбросить параметры чтоб после проигрывания сразу сбрасывались данные.. ?
Почему-то во всех примерах перестал отображаться русский язык, как его вернуть?
Нужно посмотреть какой язык в браузере установлен. Обычно если браузер на русском и Вы находитесь в России (IP-адрес лежит в российском диапазоне), то все надписи на картах по русски отображаются.