Google Maps Controls

Карта Google - с набором управления по умолчанию:

Google Maps - Элементы управления по умолчанию

При показе стандартной карты Google, она поставляется с набором управления по умолчанию:

Масштаб - отображает ползунок или "+/-" кнопки для управления уровнем масштабирования карты
Pan - отображает пан управления для прокрутки карты
MapType - позволяет тумблер пользователя между типами карт (roadmap and satellite)
Street View - отображает значок человечка, который можно перетащить на карту, чтобы позволить Street View

Google Maps - Дополнительные элементы управления

В дополнение к управления по умолчанию, Google Maps также имеет:

Масштаб - отображает масштаб карты элемент
Поворот - отображает маленькую круглую иконку, которая позволяет вращать карты
Обзор Карта - отображает обзор миниатюр карту, отражающую текущее окно просмотра карты в пределах более широкой области

Можно указать , который контролирует , чтобы показать при создании карты (inside MapOptions) или позвонив по телефону setOptions() , чтобы изменить параметры карты.

Google Maps - Отключение управления по умолчанию

Вместо этого вы хотите, чтобы отключить управление по умолчанию.

Для этого, установите свойство disableDefaultUI карты (в пределах объекта опции Карта) истина:

пример

disableDefaultUI:true

Попробуй сам "

Google Maps - Включите все элементы управления

Некоторые элементы управления отображаются на карте по умолчанию; в то время как другие не будут появляться, если вы установите их.

Добавление или удаление элементов управления из карты указан в карте Объект параметров.

Установите управление истинным, чтобы сделать его видимым - Установите регулятор ложь, чтобы скрыть его.

В следующем примере получается "on" всех элементов управления:

пример

panControl:true,
zoomControl:true,
mapTypeControl:true,
scaleControl:true,
streetViewControl:true,
overviewMapControl:true,
rotateControl:true

Попробуй сам "

Google Maps - Изменение элементов управления

Некоторые из элементов управления карты настраиваются.

Элементы управления могут быть изменены с помощью указания опций управления полей.

Например, варианты модификации управления масштабированием указаны в поле ZoomControlOptions. Поле ZoomControlOptions может содержать:

google.maps.ZoomControlStyle.SMALL - отображает контроль мини-масштабирования (только кнопки + и -)
google.maps.ZoomControlStyle.LARGE - показывает стандартный ползунок масштабирования
google.maps.ZoomControlStyle.DEFAULT - выбирает лучший контроль над масштабированием в зависимости от устройства и размера карты

пример

zoomControl:true,
zoomControlOptions: {
style:google.maps.ZoomControlStyle.SMALL
}

Попробуй сам "

Note: При изменении элемента управления, всегда позволяют управлять первым (set it to true) .

Другой настраиваемый контроль является контроль MapType.

Варианты модификации контроля указаны в поле MapTypeControlOptions. Поле MapTypeControlOptions может содержать ::

google.maps.MapTypeControlStyle.HORIZONTAL_BAR - дисплей одна кнопка для каждого типа карты
google.maps.MapTypeControlStyle.DROPDOWN_MENU - выбрать тип карты с помощью выпадающего меню
google.maps.MapTypeControlStyle.DEFAULT - отображает "default" по (depends on screen size) "default" поведение (depends on screen size) в (depends on screen size)

пример

mapTypeControl:true,
mapTypeControlOptions: {
style:google.maps.MapTypeControlStyle.DROPDOWN_MENU
}

Попробуй сам "

Также можно поместить элемент управления, со свойством ControlPosition:

пример

mapTypeControl:true,
mapTypeControlOptions: {
style:google.maps.MapTypeControlStyle.DROPDOWN_MENU,
position:google.maps.ControlPosition.TOP_CENTER
}

Попробуй сам "

Google Maps - пользовательские элементы управления

Создайте пользовательский элемент управления , который всегда принимает вас обратно в Лондон, при нажатии (if the map is dragged) :

пример

controlDiv.style.padding = '5px';
var controlUI = document.createElement('div');
controlUI.style.backgroundColor = 'yellow';
controlUI.style.border='1px solid';
controlUI.style.cursor = 'pointer';
controlUI.style.textAlign = 'center';
controlUI.title = 'Set map to London';
controlDiv.appendChild(controlUI);
var controlText = document.createElement('div');
controlText.style.fontFamily='Arial,sans-serif';
controlText.style.fontSize='12px';
controlText.style.paddingLeft = '4px';
controlText.style.paddingRight = '4px';
controlText.innerHTML = '<b>Home<b>'
controlUI.appendChild(controlText);

Попробуй сам "