yandex maps control

by aka_SKIff

HTML

<script src="//api-maps.yandex.ru/2.1/?load=package.full&lang=ru_RU"></script>
<div id="map"></div>

CSS

#map {
  width: 100%;
  height: 600px;
}

.mc-btn{
  padding: 5px;
  background: red;
}

@media (max-width: 400px) {
  .mc-btn {
    padding: 15px;
  }
}

JavaScript

ymaps.ready(function() {
  var myMap;
  var closestButtonTemplate = '<div class="mc-btn">' +
    '<svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 11 11"><path d="M0 3.667L11 0 5.867 11l-.734-5.867L0 3.667z"/></svg>' +
    'Ближайшие' +
    '</div>';
  var ClosestButton = new ymaps.control.Button({
    data: {
      content: 'Ближайшие'
    },
    options: {
      layout: ymaps.templateLayoutFactory.createClass(
        closestButtonTemplate
      )
    }
  });

  myMap = new ymaps.Map('map', {
    center: [55.75396, 37.620393],
    zoom: 14,
    controls: []
  }, {
    maxZoom: 18,
    yandexMapAutoSwitch: false
  });

  myMap.controls.add(ClosestButton, {
    position: {
      left: '50%',
      bottom: 30
    }
  });

});