Создать карту в конструкторе Яндекс карт наверное самый простой и быстрый способ, когда надо добавить местоположение на сайте. Но если нужно сделать карту с внешними элементами управления, то конструктора здесь окажется мало. Самый распространенный пример, когда есть несколько офисов компании, и при нажатии ссылки «Показать на карте», карта автоматически перестраивается и показывает адрес нужного офиса. В этой статье мы рассмотрим готовый пример реализации этого функционала. Итак, давайте приступим!
Подключение скриптов
Для начала необходимо подключить скрипт 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>. Еще я добавил стиль для этого блока, чтобы он растянулся по ширине.
JavaScript-код
К сожалению в Дзене не разрешается добавлять много кода в статью и выглядит он не читабельным, поэтому выкладываю скрин, а сам код вы можете скопировать на моем сайте it-blog.ru
В коде мы указываем точки с координатами и в конце обработчик, который при нажатии на ссылку плавно пролистывает карту к нужной точке. Кстати координаты точек вы можете получить в Геокодере API Яндекс.Карт.