Как вставить Яндекс-карту автомобильного маршрута на сайт, с выбором городов

JS 19.01.2016

Многие уже сталкивались с этой задачей как на сайте установить карту с правильным маршрутом до пункта назначения из своего города! У меня уже есть публикация Как проложить маршрут на карте Google, но мне она показалась не удобной. Вот и я решил реализовать на одном из своих проектов такую, на мой взгляд удобную функцию. Поискав в интернете разные варианты я нашел, по моему, самый оптимальный и удобный. На самом деле всё очень просто! На сайте Яндекса есть Расчёт стоимости доставки который вполне подходит к данной задаче, но я немного сделал подругому:

ДЕМО

И так начнем!

HTML

Вставляем в нужное место код:

<div id="controls">
    <label><span>От:</span> <input type="text" id="route-from" value="Москва" /></label>
    <label><span>До:</span> <input type="text" id="route-to" value="Саратов" /></label>
    <div><input type="submit" value="Построить маршрут" onclick="createRoute();" /></div>
    <br />
    <div id="route-length"></div>
</div>
<div id="map"></div>

Подключаем стили для вывода поисковой формы городов

CSS

#map {
  width: 100%;
  height: 650px;
  margin-top: 70px;
}
 #controls {
  position: absolute;
  top: 5.5em;
  right: 1.5em;
  z-index: 10;
  background: #fff;
  padding: 1em 2em;
  opacity: 0.9;
  box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.1);
}
#controls label {
  display: block;
  margin: 1em 0;
  font-size: 12pt;
}
#controls label span {
  display: inline-block;
  min-width: 3.5em;
}
#controls label input {
  font-size: 12pt;
  padding-bottom: .2em;
  width: 10em;
  border: none;
  border-bottom: solid 1px #999;
  color: #000;
  outline: none;
  webkit-appearance: none;
}

Ну и сам скрипт вывода карты

JS

var map, mapRoute;
    
      ymaps.ready(function() {
        map = new ymaps.Map('map', {
          center: [55.76, 37.64], 
          zoom: 5
        });
      });
      
      function createRoute() {
        // Удаление старого маршрута
        if (mapRoute) {
          map.geoObjects.remove(mapRoute);
        }
        
        var routeFrom = document.getElementById('route-from').value;
        var routeTo = document.getElementById('route-to').value;
        
        // Создание маршрута
        ymaps.route([routeFrom, routeTo], {mapStateAutoApply:true}).then(
          function(route) {
            map.geoObjects.add(route);
            document.getElementById('route-length').innerHTML = 'Длина маршрута = ' + route.getHumanLength();
            mapRoute = route;
          },
          function(error) {
            alert('Невозможно построить маршрут');
          }
        );
      }