Как разместить несколько офисов компании на Яндекс карте

Но если нужно сделать карту с внешними элементами управления, то конструктора здесь окажется мало. Самый распространенный пример, когда есть несколько офисов компании, и при нажатии ссылки «Показать на карте», карта автоматически перестраивается и показывает адрес нужного офиса. В этой статье мы рассмотрим готовый пример реализации этого функционала.

В коде мы указываем точки с координатами и в конце обработчик, который при нажатии на ссылку плавно пролистывает карту к нужной точке.

<script src="//api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script>
<script>
ymaps.ready(init);
function init () {
 var myMap = new ymaps.Map("map", {
   center: [55.742932093456126,37.62389544445802],
   zoom: 16,
   controls: []
  }),
  myGeoObject = new ymaps.GeoObject({
  });
 var address1 = new ymaps.Placemark([55.742932093456126,37.62389544445802], {
  balloonContent: 'Точка 1',
 }, {
  preset: 'islands#dotIcon',
  iconColor: '#D13F22'
 });
 var address2 = new ymaps.Placemark([55.791055862396824,37.52825102327829], {
  balloonContent: 'Точка 2',
 }, {
  preset: 'islands#dotIcon',
  iconColor: '#D13F22'
 });
 var address3 = new ymaps.Placemark([55.82726918688044,37.637157631026405], {
  balloonContent: 'Точка 3',
 }, {
  preset: 'islands#dotIcon',
  iconColor: '#D13F22'
 });
 myMap.geoObjects
  .add(myGeoObject)
  .add(address1)
  .add(address2)
  .add(address3);
 var mapControls = $('.map-control');
 var destinations = {
  '#address1': address1,
  '#address2': address2,
  '#address3': address3
 };
 mapControls.each(function(item, i) {

 // Прокрутка к блоку с картой и переход к точке
 $(this).bind('click', function() {
   var position = $('#map').offset().top;
   window.scrollTo(0, position);
   var destination = destinations[$(this).attr('href')];
   myMap.panTo(destination.geometry.getCoordinates(), {
    flying: true,
    duration: 3000
   })
   return false;
  }
 );
});
}
</script>


<a href="#address1" class="map-control">Офис 1</a><br />
<a href="#address2" class="map-control">Офис 2</a><br />
<a href="#address3" class="map-control">Офис 3</a><br />
<style>
 #map {
  width: 100%; height: 400px; padding: 0; margin: 0;
 }
</style>
<div id="map"></div>