Yandex Maps API. Элементы управления и свой интерфейс карты

В этой статье будут описаны все настройки интерфейса карты и примеры установки в карту своих элементов интерфейса

Пример функции загрузки карты с расширенными настройками:

var map;
ymaps.ready(function () {
map = new ymaps.Map("map-canvas", {
center: [56, 37],
zoom: 8,
type: "yandex#map",
behaviors: ['DblClickZoom', 'Drag', 'LeftMouseButtonMagnifier', 'MultiTouch', 'RightMouseButtonMagnifier', 'RouteEditor', 'Ruler', 'ScrollZoom'],
controls: ['zoomControl', 'searchControl', 'routeEditor', 'fullscreenControl', 'TypeSelector', 'TrafficControl', 'RulerControl', 'GeolocationControl']
});
});

Описание всех использованных выше настроек:
center - координата, которая будет использована в качестве центра карты после ее загрузки (56 - широта, 37 - долгота). Обязательная настройка.
zoom - зум над этой координатой (1 - максимальное отдаление, больше значение - сильнее увеличение. Максимальное значение зависит от точки (в городе может быть более 20, в лесу около 15). Обязательная настройка.
type - тип карты по-умолчанию (map, satellite, hybrid, publicMap, publicMapHybrid).

behaviors:
DblClickZoom - включает поведение карты - масштабирование карты двойным щелчком кнопки мыши
Drag - включает поведение карты - перетаскивание карты с помощью мыши либо одиночного касания
LeftMouseButtonMagnifier - включает поведение карты - масштабирование карты при выделении области левой кнопкой мыши
MultiTouch - включает поведение карты - масштабирование карты мультисенсорным касанием
RightMouseButtonMagnifier - включает поведение карты - масштабирование карты при выделении области правой кнопкой мыши
RouteEditor - включает поведение карты - редактор маршрутов
Ruler - включает поведение карты - "Линейка". Позволяет отмечать на карте точки и отображать расстояния между ними
ScrollZoom - включает поведение карты - масштабирование карты колесом мыши

controls:
zoomControl - включает элемент управления масштабом карты
searchControl - включает элемент управления "Поиск по карте". Позволяет обрабатывать поисковый запрос пользователя и отображать результат в панели и на карте
routeEditor - включает элемент управления "Редактор маршрутов"
fullscreenControl - включает элемент управления "Полноэкранный режим".
TypeSelector - включает элемент управления "Типы карты".
TrafficControl - включает панель управления пробками на карте.
RulerControl - включает элемент управления "Линейка".
GeolocationControl - включает элемент управления "геолокация". Позволяет отразить положение пользователя на карте.

С настройками разобрались, теперь добавим свой элемент в интерфейс карты.
Добавьте следующий код в конце функции ymaps.ready (или вынесите в отдельную функцию. как в примере):

   var UI = $("#mapUI").html();
   $("#mapUI").remove();
   $('#map-canvas').prepend('
'+UI+'
');
   $("#map-canvas").css('position', 'relative');
   $("#mapUI").css({
    position: 'absolute',
    left: '45%',
    top: '0px',
    padding: '10px',
    backgroundColor: '#FFF',
    border: 'solid 1px #000',
    zIndex: '1',
    margin: '8px'
   });

Этот код вставит весь код из контейнера с id=mapUI в верхнюю центральную часть карты. Добавить в этот контейнер можно все что угодно. Это может быть обычная кнопка, или же таблица (не забудьте добавить фон, т.к. по-умолчанию фон будет прозрачным и за вашим элементом интерфейса сразу начнется карта).
Все стили к элементу можно добавить как показано в примере. Для простоты была использована библиотека jquery, не забудьте подключить и ее.
Расположение элемента изменяется стилями left (или right) и top.

Посмотреть пример

Список статей о Yandex Maps API смотрите здесь

Yandex Maps API. Подключение карты.

Дошла очередь и до яндекс карт. Снова начнем с самого простого - подключить карту к своему сайту.

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

Контейнер, куда будет остановлена карта:

Изменяя размеры и расположение контейнера - будет изменяться вся карта.

Теперь функция загрузки карты:

  var map;
  ymaps.ready(function () {
   map = new ymaps.Map("map-canvas", {
    center: [56, 37],
    zoom: 8,
    type: "yandex#map"
   });
  });

center - координата, которая будет использована в качестве центра карты после ее загрузки (56 - широта, 37 - долгота).
zoom - зум над этой координатой (1 - максимальное отдаление, больше значение - сильнее увеличение. Максимальное значение зависит от точки (в городе может быть более 20, в лесу около 15).
type - тип карты по-умолчанию (map, satellite, hybrid, publicMap, publicMapHybrid).

И все готово. Карта будет выведена на вашем сайте.

Посмотреть пример

В следующей статье вы сможете прочитать о настройках интерфейса карты и добавлении своих элементов в интерфейс.

Список статей о Yandex Maps API смотрите здесь