Яндекс карта с управлением для сайта

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

Подключение скриптов

Геокодер API Яндекс.Карт
Геокодер API Яндекс.Карт
Геокодер API Яндекс.Карт

Для начала необходимо подключить скрипт API Яндекс карт и наш скрипт для работы с картой (код скрипта main-map.js будет рассмотрен далее):

<script src="//api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script><script src="js/main-map.js" type="text/javascript"></script>

HTML-код

Добавляем для примера 3 ссылки «Показать на карте». Это будут ссылки на различные точки на карте. Далее контейнер для карты <div id="map"></map>. Еще я добавил стиль для этого блока, чтобы он растянулся по ширине.

HTML-код
HTML-код
HTML-код

JavaScript-код

К сожалению в Дзене не разрешается добавлять много кода в статью и выглядит он не читабельным, поэтому выкладываю скрин, а сам код вы можете скопировать на моем сайте it-blog.ru

JavaScript-код
JavaScript-код
JavaScript-код

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