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