map

by abolyc

HTML

<script src="//api-maps.yandex.ru/2.1/?lang=ru_RU"></script>
<script src="//code.jquery.com/jquery-2.2.0.min.js"></script>
<div id="calc">рассчитать</div>
<div id="result"></div>
<div id="map"></div>

CSS

html,
body,
#map {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}

#calc {
  padding: 5px;
  background: blue;
  margin: 5px;
  text-align: center;
  color: #fff;
  cursor: pointer;
}

#result {
  display: none;
  background: #fff;
}

#result.active {
  display: block;
}

JavaScript

$('#calc').on('click', function() {
  $('#result').addClass('active');
});

function init() {
  var myMap = new ymaps.Map('map', {
      center: [60.906882, 30.067233],
      zoom: 9,
      type: 'yandex#map',
      controls: []
    }),
    searchStartPoint = new ymaps.control.SearchControl({
      options: {
        useMapBounds: true,
        noPlacemark: true,
        noPopup: true,
        placeholderContent: 'Адрес начальной точки',
        size: 'large'
      }
    }),
    searchFinishPoint = new ymaps.control.SearchControl({
      options: {
        useMapBounds: true,
        noCentering: true,
        noPopup: true,
        noPlacemark: true,
        placeholderContent: 'Адрес конечной точки',
        size: 'large',
        float: 'none',
        position: {
          left: 10,
          top: 44
        }
      }
    }),
    calculator = new DeliveryCalculator(myMap, myMap.getCenter());

  myMap.controls.add(searchStartPoint);
  myMap.controls.add(searchFinishPoint);

  searchStartPoint.events.add('resultselect', function(e) {
      var results = searchStartPoint.getResultsArray(),
        selected = e.get('index'),
        point = results[selected].geometry.getCoordinates();

      calculator.setStartPoint(point);
    })
    .add('load', function(event) {
      // По полю skip определяем, что это не дозагрузка данных.
      // По getRusultsCount определяем, что есть хотя бы 1 результат.
      if (!event.get('skip') && searchStartPoint.getResultsCount()) {
        searchStartPoint.showResult(0);
      }
    });

  searchFinishPoint.events.add('resultselect', function(e) {
      var results = searchFinishPoint.getResultsArray(),
        selected = e.get('index'),
        point = results[selected].geometry.getCoordinates();

      calculator.setFinishPoint(point);
    })
    .add('load', function(event) {
      // По полю skip определяем, что это не дозагрузка данных.
      // По getRusultsCount определяем, что есть хотя бы 1 результат.
      if...