Как проложить маршрут на карте Google | RUDEBOXВ данном уроке мы рассмотрим как можно проложить маршрут на карте Google? при этом у Вас будет самостоятельно указать пункты назначения в специальном  окне навигации, кроме этого после прокладывания пути Вы увидите расстояние в километрах. Для реализации такой манипуляции с картами нам понадобится небольшой кусок стилей, в котором мы укажем параметры для блока ввода информации и линия, которая будет обозначать маршрут. За расчет маршрута у нас будет отвечать функции js, с помощью которой также мы и узнаем дистанцию.

Такая карта станет полезная для информативных сайтов, работающие с картами, Вы сможете наглядно продемонстрировать желаемый маршрут в полноэкранном режиме. И так, давайте приступим.

Шаг 1. HTML

Разметка у нас будет проста, нам необходимо указать разметку для панели навигации и вызов самой карты, реализуем мы это с помощью следующих команд:

Кроме этого нам необходимо подключить пару скриптов с репозитория Google.

Как проложить маршрут на карте Google RUDEBOX

Шаг 2. CSS

Теперь нам необходимо стилизовать наши карты, задать стиль для маршрута, у нас будет красная, полупрозрачная линия, и оформление панели навигации:

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

Шаг 3. JS

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

Вот и все. Готово!

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

Читайте также: