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 смотрите здесь

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

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

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

function initialize() {
 var Options = {
  center: new google.maps.LatLng(56, 37),
  zoom: 8,
  disableDefaultUI: false,
  scrollwheel: true,
  zoomControl: true,
  zoomControlOptions: {
   style: google.maps.ZoomControlStyle.LARGE,
   position: google.maps.ControlPosition.TOP_LEFT
  },
  panControl: true,
  mapTypeControl: true,
  scaleControl: true,
  streetViewControl: true,
  overviewMapControl: true,
  mapTypeId: google.maps.MapTypeId.ROADMAP
 };
 var map = new google.maps.Map(document.getElementById("map-canvas"), Options);
}

Описание всех использованных выше настроек:
center - координата, которая будет использована в качестве центра карты после ее загрузки (56 - широта, 37 - долгота). Обязательная настройка.
zoom - зум над этой координатой (1 - максимальное отдаление, больше значение - сильнее увеличение. Максимальное значение зависит от точки (в городе может быть более 20, в лесу около 15). Обязательная настройка.
disableDefaultUI - будет ли отключен интерфейс карты (все последующие элементы).
scrollwheel - будет ли изменяться зум карты колесиком мыши (по-умолчанию - true).
zoomControl - будет ли выведен элемент управления масштабированием.
zoomControlOptions - настройки элемента управления масштабированием. Подобные настройки могут быть у всех элементов управления на карте. Подробнее о этих настройках - ниже.
panControl - будет ли выведен элемент управления панорамированием.
mapTypeControl - будет ли выведен элемент управления типом карты.
scaleControl - будет ли выведен элемент управления масштабом.
streetViewControl - будет ли выведен элемент управления street view.
overviewMapControl - будет ли выведен элемент управления обзорной картой.
mapTypeId - тип карты по-умолчанию (ROADMAP, SATELLITE, HYBRID, TERRAIN).

Так же можно установить дополнительные настройки для каждого элемента управления. В данном случае такие настройки есть у zoomControl. Для остальных элементов настройки нужно соответствующим образом назвать. Сами настройки у всех элементов не отличаются. Вот их описание:
style - размер элемента управления (LARGE, SMALL и DEFAULT (автоматически)).
position - расположение элемента управления (TOP_CENTER, TOP_LEFT, TOP_RIGHT, LEFT_TOP, RIGHT_TOP, LEFT_CENTER, RIGHT_CENTER, LEFT_BOTTOM, RIGHT_BOTTOM, BOTTOM_CENTER, BOTTOM_LEFT, BOTTOM_RIGHT).

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

var UIDiv = document.createElement('DIV');
UIDiv.index = 1;
UIDiv.style.display = 'block';
UIDiv.style.padding = '5px';
UIDiv.style.backgroundColor = 'white';
UIDiv.style.borderStyle = 'solid';
UIDiv.style.borderWidth = '1px';
UIDiv.innerHTML = document.getElementById('userUI').innerHTML;
map.controls[google.maps.ControlPosition.TOP_CENTER].push(UIDiv);

Этот код вставит весь код из контейнера с id=userUI в верхнюю центральную часть карты. Добавить в этот контейнер можно все что угодно. Это может быть обычная кнопка, или же таблица (не забудьте добавить фон, т.к. по-умолчанию фон будет прозрачным и за вашим элементом интерфейса сразу начнется карта).
Все стили к элементу можно добавить как показано в примере (UIDiv.style и далее в точности как в коде выше. Используйте обычные переменные CSS).
Как изменять расположение элемента вы уже знаете.

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

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