[Шпаргалка/Примеры] Яндекс.Карты (Yandex Maps API)

На многих сайтах организаций зачастую на странице с контактной информацией требуется вставить карту с меткой/метками для заданного адреса.

Документация по JS API | Песочница

Содержание:

  1. Как вставить карту с меткой для одного заданного адреса
  2. Как вставить карту с метками для нескольких заданных адресов
  3. Масштабирование карты так, чтобы было видно все объекты
  4. Как вставить карту с меткой для заданных координат и добавить свой балун и хинт
  5. Переключение разных коллекций меток на одной карте
  6. Работа с геокодером и автодополнение адресов

1. Как вставить карту с меткой для одного заданного адреса

В секции head подключаем загрузчик компонентов api яндекс.карт:

На странице создаем контейнер для карты :

И добавляем скрипт:

Демо:

2. Как вставить карту с метками для нескольких заданных адресов

Демо:

3. Масштабирование карты так, чтобы было видно все объекты

Если на карте немного объектов, и необходимо масштабировать карту так, чтобы отображались все объекты в активной области, обычно используется такой код:

Но, если на карте находится всего 1 объект, то карта масштабируется до максимума. Чтобы решить эту проблему, можно использовать такой код:

4. Как вставить карту с меткой для заданных координат и добавить свой балун и хинт

Демо:

5. Переключение разных коллекций меток на одной карте

Пример: У вас есть база с магазинами в разных городах. Необходимо вывести выпадающий список с городами и магазинами в этих городах.
При переключении города список магазинов и метки на карте должны изменяться на элементы из выбранного города.

HTML:

JS:

Демо:

6. Работа с геокодером и автодополнение адресов

По умолчанию маркер стоит в Москве. При перемещении маркера с помощью геокодера определяются его координаты, адрес и информация о ближайшем метро.
При изменении адреса в форме автоматически меняется расположение маркера.

HTML:

JS:

Демо:

Замечание: Если требуется сделать поле с автодополнением и подсказками адреса для России, удобнее всего пользоваться API сервиса DaData.