API компонентов

Панорамная галерея

gwd-360gallery

Объект галереи, в котором можно показывать вращающиеся объекты.

Свойства

Название Описание
images:string Разделенный запятыми список URL кадров галереи.
autoplay:boolean Автоматический запуск показа изображений при загрузке галереи.
wrap:boolean Пользователь может по кругу пролистывать все кадры галереи без остановки.

События

Название Описание
firstinteraction Отправляется, когда пользователь впервые взаимодействует с галереей.
allframesviewed Отправляется, когда все кадры галереи показаны хотя бы один раз.
allframesloaded Отправляется, когда все кадры галереи загружены.
frameshown Отправляется при показе нового кадра.
frameactivated Отправляется в начале активации нового кадра, даже если он ещё не виден.
frametap Отправляется, когда пользователь касается кадра.

Методы

Название Описание
goToFrame(frame:number, opt_animate:string, opt_direction:string) Анимировать до заданного кадра.
rotateOnce(opt_duration:number, opt_direction:string) Повернуть объект в галерее один раз.
goForwards() Перейти на один кадр вперед.
goBackwards() Перейти на один кадр назад.
Добавить в Календарь

gwd-addtocalendar

Добавляет событие в календарь.

Свойства

Название Описание
event-title:string Название события, которое будет отображаться в календаре пользователя.
start-date:string Дата начала события.
start-time:string Время начала события (в 24-часовом формате).
end-date:string Дата окончания события.
end-time:string Время окончания события (в 24-часовом формате).
timezone:string Часовой пояс для события. Если свойство задано, время будет изменяться с изменением часового пояса пользователя.
location:string Место проведения события.
description:string Описание события.
icalendar:boolean Позволяет выбрать, использовать ли файл iCalendar.
google:boolean Позволяет выбрать, использовать ли Google Календарь.
windows-live:boolean Позволяет выбрать, использовать ли Календарь Windows Live.
yahoo:boolean Позволяет выбрать, использовать ли Yahoo Calendar.
bg-color:string Шестнадцатеричный код цвета фона в раскрывающемся меню.
font-color:string Шестнадцатеричный код цвета шрифта в раскрывающемся меню.
font-family:string Название шрифта в раскрывающемся меню.
font-size:string Размер шрифта в раскрывающемся меню.
font-weight:string Насыщенность шрифта в раскрывающемся меню.
highlight-color:string Шестнадцатеричный код цвета, которым выделяется выбранный календарь в раскрывающемся меню.
Аудио

gwd-audio

Компонент с интерфейсом HTMLAudioElement.

Свойства

Название Описание
autoplay:boolean Позволяет выбрать, воспроизводить ли аудиозапись автоматически при загрузке страницы.
loop:boolean Позволяет выбрать, повторять ли воспроизведение аудиозаписи.
muted:boolean Позволяет выбрать, отключать ли звук.
controls:boolean Позволяет выбрать, активировать ли стандартные элементы управления встроенного проигрывателя.
sources:string Разделенный запятыми список URL аудиозаписей в разных форматах.

События

Название Описание
play Отправляется, когда пользователь возобновляет воспроизведение медиафайла после паузы.
pause Отправляется, когда пользователь приостанавливает воспроизведение.
playing Отправляется после начала воспроизведения медиафайла (в первый раз, после паузы, после окончания и повторного воспроизведения).
ended Отправляется после завершения воспроизведения.
volumechange Отправляется после изменения громкости звука (если изменить настройки громкости или атрибут свойства muted).
seeked Отправляется после завершения перемотки.
waiting Отправляется, когда запрошенная операция (например, воспроизведение) задерживается до завершения другой операции (например, перемотки).

Методы

Название Описание
mute() Отключить или включить звук.
pause() Приостановить воспроизведение аудиозаписи.
play() Воспроизвести аудиозапись.
replay() Воспроизвести аудиозапись ещё раз.
seek(time:number) Перейти к указанному времени в аудиозаписи.
Круговая галерея

gwd-carouselgallery

Объект галереи, в котором можно перелистывать кадры.

Свойства

Название Описание
images:string Разделенный запятыми список URL кадров галереи.
groups:string Разделенный запятыми список идентификаторов групп.
transition-duration:number Скорость анимации в галерее в миллисекундах.
start-frame:number Номер изображения, которое должно показываться первым.
autoplay:boolean Позволяет выбрать, воспроизводить ли кадры автоматически один раз.
has-navigation:boolean Позволяет выбрать, включать ли элементы навигации по галерее автоматически.
navigation-thumbnails:boolean Позволяет выбрать, использовать ли для навигации эскизы вместо точек.
navigation-highlight:color CSS-код цвета, которым выделяется активный кадр на панели навигации.
scaling:string Принцип, по которому изображение будет масштабироваться в кадре.
frame-width:number Ширина панели содержимого.
frame-height:number Высота панели содержимого.
neighbor-rotation-y:number Вращение по оси Y панелей, которые находятся рядом с текущей центральной панелью. Используется для наклона соседних панелей.
neighbor-translation-x:number Преобразование по оси X панелей, которые находятся рядом с текущей центральной панелью. Используется для выравнивания соседних панелей.
neighbor-translation-y:number Преобразование по оси Y панелей, которые находятся рядом с текущей центральной панелью.
neighbor-translation-z:number Преобразование по оси Z панелей, которые находятся рядом с текущей центральной панелью.
exit-urls:string Разделенный запятыми список URL перехода, соответствующих каждому кадру галереи.
show-reflection:boolean Позволяет выбрать, показывать ли отражение в формате CSS3.
pause-front-media:boolean Позволяет выбрать, приостанавливать ли воспроизведение мультимедийного элемента (например, видео или аудио) в предыдущем кадре при смене кадра.
resume-next-media:boolean Позволяет выбрать, возобновлять ли воспроизведение мультимедийного элемента (например, видео или аудио) в новом кадре при смене кадра.

События

Название Описание
firstinteraction Отправляется, когда пользователь впервые взаимодействует с галереей.
allframesviewed Отправляется, когда все кадры галереи показаны хотя бы один раз.
allframesloaded Отправляется, когда все кадры галереи загружены.
autoplayended Отправляется после окончания автовоспроизведения по любой причине. Если истекла заданная продолжительность, значение event.detail.completed будет true, в ином случае – false.
frameshown Отправляется при показе нового кадра.
frameactivated Отправляется в начале активации нового кадра, даже если он ещё не виден.
frameautoplayed Отправляется после активации кадра для автовоспроизведения. Может запускаться чаще, чем frameshown, поскольку активируется отдельно для каждой группы одновременно отображаемых кадров.
frametap Отправляется, когда пользователь касается кадра.
reachleftend Отправляется, когда достигнут левый край галереи.
reachrightend Отправляется, когда достигнут правый край галереи.
trackstart Отправляется, когда начинается перетаскивание касанием или мышью.
track Регистрация координат компонента (X и Y) во время перетаскивания мышью или касанием.
trackend Отправляется, когда оканчивается перетаскивание касанием или мышью.

Методы

Название Описание
goToFrame(index:number, opt_animate:string) Перейти к указанному кадру.
goForwards(opt_animate:string) Перейти к следующему кадру (если имеется).
goBackwards(opt_animate:string) Перейти к предыдущему кадру.
rotateOnce(opt_duration:number, opt_direction:string) Показать все кадры в галерее по одному разу.
stopRotation() Прекратить автоматическое перелистывание.
Временная точка

gwd-cuepoint

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

Свойства

Название Описание
time:number Время активации события (в секундах).

События

Название Описание
cuepoint Отправляется, когда воспроизведение медиафайла достигает времени, указанного во временной точке.

Методы

Название Описание
seek() Перейти ко времени, указанному во временной точке.
setTime(time:number) Задать время временной точки.
Смена даты

gwd-dateswap

Компонент "Смена даты" отображает элементы в зависимости от того, совпадает ли текущая дата с указанным диапазоном.

Свойства

Название Описание
from_date:string Дата в формате RFC2822 или ISO 8601.
to_date:string Дата в формате RFC2822 или ISO 8601.

События

Название Описание
before Отправляется, когда текущая дата раньше from_date (но не соответствует ей).
during Отправляется, когда текущая дата находится в промежутке между from_date и to_date (включительно).
after Отправляется, когда текущая дата позже to_date (но не соответствует ей).

Методы

Название Описание
checkDate() Сравнить текущую дату с указанным диапазоном.
Навигация по галерее

gwd-gallerynavigation

Панель навигации для галерей в Google Web Designer.

Свойства

Название Описание
for:string Разделенный запятыми список URL кадров галереи.
highlight:color CSS-код цвета, которым выделяется активный кадр на панели навигации.
use-thumbnails:boolean Позволяет выбрать, использовать ли для навигации эскизы вместо точек.
Обычное объявление

gwd-genericad

Этот компонент реализует контейнер обычного объявления.

События

Название Описание
adinitialized Отправляется непосредственно перед тем, как элемент "Обычное" отобразит содержимое объявления.

Методы

Название Описание
initAd() Запустить объявление, когда будут получены соответствующие события от активатора.
goToPage(opt_pageId:string, opt_transition:string, opt_duration:number, opt_easing:string, opt_direction:string) Перейти к развернутому объявлению. Если идентификатор страницы не указан, объявление переходит к странице по умолчанию.
exit(url:string, opt_collapseOnExit:boolean, opt_pageId:string) Выйти из объявления и, если необходимо, свернуть его.
Жест

gwd-gesture

Этот компонент позволяет регистрировать ряд жестов.

Свойства

Название Описание
touch-action:string Определяет, как будут интерпретироваться касания. Поддерживаются значения auto, none, pan-x и pan-y. По умолчанию используется none.

События

Название Описание
hover Отправляется, когда курсор мыши или касание пользователя входят в границы компонента.
hoverend Отправляется, когда указатель или касание пользователя покидают границы компонента.
trackstart Отправляется, когда начинается перетаскивание касанием или мышью.
track Регистрация координат компонента (X и Y) во время перетаскивания мышью или касанием.
trackend Отправляется, когда оканчивается перетаскивание касанием или мышью.
tap Отправляется, когда регистрируется касание или нажатие мышью.
swipeleft Отправляется, когда пользователь листает влево.
swiperight Отправляется, когда пользователь листает вправо.
swipeup Отправляется, когда пользователь листает вверх.
swipedown Отправляется, когда пользователь листает вниз.
Объявление Google

gwd-google-ad

Этот компонент реализует контейнер объявления Google.

Свойства

Название Описание
polite-load:boolean Позволяет выбрать, должна ли соблюдаться в объявлении семантика управляемой загрузки.
fullscreen:boolean Позволяет выбрать, будет ли объявление пытаться переходить в полноэкранный режим.

События

Название Описание
adinitialized Отправляется непосредственно перед тем, как элемент отобразит содержимое объявления.
expandstart Отправляется, когда активатор инициирует событие "Начало раскрытия".
expandfinish Отправляется, когда активатор инициирует событие "Конец раскрытия".
collapsestart Отправляется, когда активатор инициирует событие "Начало свертывания".
collapsefinish Отправляется, когда активатор инициирует событие "Конец свертывания".
fullscreensupport Отправляется, если поддерживается полноэкранный режим.

Методы

Название Описание
initAd() Запустить объявление, когда будут получены соответствующие события от активатора.
goToPage(opt_pageId:string, opt_transition:string, opt_duration:number, opt_easing:string, opt_direction:string) Перейти к развернутому объявлению. Если идентификатор страницы не указан, объявление переходит к странице по умолчанию.
exit(exitId:string, url:string, opt_collapseOnExit:boolean, opt_pauseMedia:boolean, opt_pageId:string) Выйти из объявления и, если необходимо, свернуть его.
exitOverride(exitId:string, url:string, opt_collapseOnExit:boolean, opt_pauseMedia:boolean, opt_pageId:string) Перейти из объявления на указанный URL независимо от значения, заданного в DoubleClick Studio. Объявление сворачивается, если для метода opt_collapseOnExit задано значение true.
incrementCounter(metric:string, opt_isCumulative:boolean) Отслеживать событие счетчика.
startTimer(timerId:string) Запустить таймер событий.
stopTimer(timerId:string) Остановить таймер событий.
reportManualClose() Записать, что вручную было закрыто объявление одного из следующих типов: плавающее, всплывающее, раскрывающееся, объявление на странице со всплывающими или плавающими элементам. Этот метод – аналог Enabler.reportManualClose.
Интерактивный элемент

gwd-hotspot

Компонент, который показывает и скрывает интерактивный элемент в определенное время воспроизведения видео.

Свойства

Название Описание
show-time:number Время, когда интерактивный элемент появляется (в секундах).
hide-time:number Время, когда интерактивный элемент исчезает, (в секундах).
left:string Левое положение интерактивного элемента над видео относительно ширины видеокадра (например, 5 %).
top:string Верхнее положение интерактивного элемента над видео относительно высоты видеокадра (например, 5 %).
width:string Ширина интерактивного элемента над видео относительно ширины видеокадра.
height:string Высота интерактивного элемента над видео относительно высоты видеокадра.

События

Название Описание
hotspotshown Отправляется, когда интерактивный элемент появляется.
hotspothidden Отправляется, когда интерактивный элемент исчезает.

Методы

Название Описание
show(showHide:boolean) Изменить видимость интерактивного элемента. Интерактивный элемент появляется, если для метода showHide задано значение true, и исчезает, если значение метода showHide – false.
seek(showHide:boolean) Установить время воспроизведения видео на время, когда интерактивный элемент исчезает или появляется. Использует время появления, если для параметра showHide задано значение true, и время исчезновения, если значение метода showHide – false.
setTimes(showTime:number, hideTime:number) Задать время появления и исчезновения интерактивного элемента.
Окно iframe

gwd-iframe

Компонент с интерфейсом HTMLIframeElement.

Свойства

Название Описание
source:string URL внешнего элемента. Заменяет атрибут свойства src в стандартном элементе "Изображение".
scrolling:string Позволяет выбрать, показывать ли в окне iframe полосы прокрутки.

События

Название Описание
iframeload Отправляется, когда окно iframe загрузилось.

Методы

Название Описание
setUrl(url:string) Изменить URL внешнего элемента и сразу загрузить его.
Изображение

gwd-image

Компонент с интерфейсом HTMLImageElement, который позволяет откладывать загрузку изображения из источника.

Свойства

Название Описание
source:file Источник изображения. Заменяет атрибут свойства src в стандартном элементе "Изображение".
alt:string Замещающий текст для изображения.
scaling:string Принцип, по которому изображение будет масштабироваться во фрейме.
alignment:string Как изображение будет выравниваться в области просмотра.
Графическая кнопка

gwd-imagebutton

Этот компонент позволяет разместить на экране кнопку с тремя визуальными состояниями: "кнопка не нажата", "на кнопку наведен указатель" и "кнопка нажата".

Свойства

Название Описание
up-image:file URL изображения кнопки в ненажатом состоянии.
over-image:file URL изображения кнопки, когда на нее наведен указатель.
down-image:file URL изображения кнопки в нажатом состоянии.
bgcolor:string Цвет фона кнопки.
alignment:string Как изображение будет выравниваться в области просмотра.
scaling:string Как изображения будут адаптироваться к размеру родительского контейнера.
disabled:boolean Позволяет выбрать, отключать ли кнопку.

События

Название Описание
imagebuttonloaded Отправляется, когда все изображения загружены.

Методы

Название Описание
toggleEnable() Включить или отключить кнопку.
setImages(upSrc:string, opt_overSrc:string, opt_downSrc:string) Задать источники изображений для всех состояний кнопки.
Карта

gwd-map

Этот компонент добавляет в интерфейс HTMLElement возможность упаковывать вызовы API Google Карт.

Свойства

Название Описание
api-key:string Ключ Google API. Подробнее: https://developers.google.com/maps/documentation/javascript/get-api-key.
query:string Поисковый запрос для местоположений, которые возвращает API Google Адресов. Необходим при отсутствии идентификатора сводной таблицы.
start-latitude:decimal Широта начальной точки. Значение от -90 до 90 (градусов).
start-longitude:decimal Долгота начальной точки. Значение от -180 до 180 (градусов).
request-user-location:boolean Позволяет выбрать, запрашивать ли местоположение пользователя. Если включить, пользователю будет отправлен запрос на предоставление этой информации.
fusion-table-id:string Идентификатор общедоступной сводной таблицы.
client-id:string Идентификатор премиум-пользователя Google Карт (устарело).
search-radius:number Минимальный радиус поиска места в метрах.
result-limit:number Максимальное количество результатов поиска по одному запросу.
start-zoom:number Начальный уровень масштабирования в единицах, принятых в API Google Карт. По умолчанию равен 16, что соответствует уровню микрорайона.
marker-src:string Название файла изображения метки в виде спрайта, содержащего компоненты off, on и shadow.
gps-src:string Название файла с изображением синей точки GPS-координат пользователя.
msg-start-position-prompt:string Локализованный запрос выбрать начальное местоположение.
msg-gps-button-label:string Локализованный текст кнопки, с помощью которой пользователь может запросить свое местоположение в API геолокации.
msg-manual-position-button-label:string Локализованный текст кнопки для вызова поля поиска мест.
msg-manual-position-prompt:string Локализованный текст с запросом определить начальное местоположение на карте.
msg-manual-position-placeholder:string Локализованный заполняющий текст в поле поиска начального местоположения на карте.
msg-geocode-failure:string Локализованный запрос, который отображается при неудачной попытке использовать API определения местоположения.
msg-no-results-found:string Локализованный текст сообщения о том, что запрошенные места не найдены в указанной области карты.

События

Название Описание
pinclick Пользователь выбирает маркер на карте.

Методы

Название Описание
setCenter(latitude:number, longitude:number, opt_accuracy:number) Установить центр карты в месте с указанной широтой и долготой.
Страница

gwd-page

Страница представляет собой одну карту в очереди.

Свойства

Название Описание
expanded:boolean Позволяет выбрать, считать ли страницу развернутой (только для объявлений).
centered:boolean Позволяет выбрать, выравнивать ли содержимое текущей страницы по центру.
alt-orientation-page:string Идентификатор страницы, на которой оптимально представлено это содержимое с альтернативной ориентацией.

События

Название Описание
attached Отправляется сразу после прикрепления страницы к DOM.
detached Отправляется сразу после удаления страницы из DOM.
pageactivated Отправляется, когда страница готова к отображению.
pagedeactivated Отправляется, когда страница больше не отображается.
pageload Отправляется после успешной загрузки содержимого страницы.
pagepresenting Отправляется непосредственно перед началом анимации.
shake Отправляется при встряхивании устройства.
tilt Отправляется при наклоне устройства.
rotatetoportrait Отправляется при смене ориентации устройства на вертикальную.
rotatetolandscape Отправляется при смене ориентации устройства на горизонтальную.
Группа страниц

gwd-pagedeck

Группа страниц – это контейнер с несколькими страницами, которые можно поочередно показывать в любом порядке и с любыми из поддерживаемых переходов. Одновременно в контейнере может отображаться только одна страница.

Свойства

Название Описание
default-page:string Идентификатор страницы по умолчанию.

События

Название Описание
pagetransitionstart Отправляется при начале перехода между страницами.
pagetransitionend Отправляется, когда переход между страницами завершен.

Методы

Название Описание
goToNextPage(opt_loop:boolean, opt_type:string, opt_duration:number, opt_easing:string, opt_direction:string) Перейти к следующей странице в группе.
goToPreviousPage(opt_loop:boolean, opt_type:string, opt_duration:number, opt_easing:string, opt_direction:string) Перейти к предыдущей странице в группе.
goToPage(pageId:string, opt_type:string, opt_duration:number, opt_easing:string, opt_direction:string) Перейти к указанной странице в группе.
getCurrentPage() Показать текущую страницу или ноль, если страница не отображается.
getDefaultPage() Показать страницу по умолчанию, если она указана, или первую страницу.
getPage(pageId:string) Вернуть страницу с указанным идентификатором.
findPageIndexByAttributeValue(attributeName:string, value:string|number|boolean) Вернуть элемент страницы с заданным значением атрибута или -1, если страница не найдена.
getOrientationSpecificPage(orientation:string, pageId:string) Вернуть страницу с заданной ориентацией.
getElementById(id:string) Найти элемент с указанным идентификатором на всех страницах в этой группе. Поскольку gwd-pagedeck только сохраняет активную страницу в DOM, стандартный document.getElementById(id) не возвращает элементы неактивных страниц. Этот метод часто используется для обращения к элементам неактивных страниц, особенно в динамических объявлениях. В таких случаях его можно использовать, чтобы разыменовать элемент по его идентификатору.

Примеры

Переход к следующей странице в объявлении после двухсекундной паузы

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

  • Цель Выберите страницу. Первой будет page1.
  • Событие. Выберите Страница > Страница готова к показу.
  • Действие. Выберите Пользовательское > Добавить дополнительное действие.

В диалоговом окне "Собственный код" укажите название функции, например turnpage. Затем вставьте следующий код:

setTimeout(nextPage, 2000);
function nextPage() {
   document.getElementById('pagedeck').goToNextPage();
}

И, наконец, добавьте это событие на каждую страницу, используя то же дополнительное действие.

Параллакс

gwd-parallax

Компонент "Параллакс".

Свойства

Название Описание
images:string Атрибут-заполнитель на панели "Свойства". Показывает список контроллеров assetList, используемых в компоненте "Параллакс".
yscroll:decimal Коэффициент прокрутки для анимации с компонентом "Параллакс", используется только в рабочей области.

События

Название Описание
ready Отправляется, когда загружены все объекты компонента "Параллакс".
Таблица спрайтов

gwd-spritesheet

Этот компонент отображает ключевой кадр или анимацию из таблицы спрайтов.

Свойства

Название Описание
imagesource:file URL для изображения таблицы спрайтов.
offsetx:number

Смещение в пикселях от левой стороны таблицы спрайтов:

  • к левому краю определенного изображения из таблицы спрайтов;
  • к левому краю первого изображения спрайта, которое используется для создания анимации.
offsety:number

Смещение в пикселях от верхней части таблицы спрайтов:

  • к верхнему краю определенного изображения из таблицы спрайтов;
  • к верхнему краю первого изображения спрайта, которое используется для создания анимации.
clipwidth:number

Ширина в пикселях:

  • определенного изображения из таблицы спрайтов;
  • первого изображения спрайта, которое используется для создания анимации.
clipheight:number

Высота в пикселях:

  • определенного изображения из таблицы спрайтов;
  • первого изображения спрайта, которое используется для создания анимации.
alignment:string Выравнивание изображения в контейнере.
scaling:string Определяет адаптацию размеров изображений в компоненте.
totalframecount:number Количество кадров анимации.
duration:number Продолжительность показа каждого кадра в миллисекундах.
loopcount:number Количество повторов анимации. Установите 0, чтобы зациклить анимацию.
autoplay:boolean Позволяет выбрать, воспроизводить ли анимацию автоматически.
endonstartframe:boolean Позволяет выбрать, заканчивать ли анимацию на начальном кадре.
reverseplay:boolean Позволяет выбрать, воспроизводить ли анимацию в обратном порядке.

События

Название Описание
animationend Отправляется, когда анимация заканчивается.
animationpause Отправляется, когда анимация приостанавливается.
animationplay Отправляется, когда начинается воспроизведение анимации.
animationrestart Отправляется, когда анимация воспроизводится после паузы.

Методы

Название Описание
newAnimation(offsetx:number, offsety:number, clipwidth:number, clipheight:number, totalframecount:number, duration:number, loopcount:number, autoplay:boolean, reverseplay:boolean) Создает новую анимацию.
play() Воспроизводит анимацию.
pause() Приостанавливает анимацию.
togglePlay() Запускает и приостанавливает воспроизведение анимации.
restart() Перезапускает анимацию.
previousFrame() Показывает предыдущий кадр.
nextFrame() Показывает следующий кадр.
goToFrame(id:number) Показывает кадр с определенным номером.
Рейтинги

gwd-starratings

Компонент для визуализации ряда звездочек, представляющих рейтинг.

Свойства

Название Описание
ratingvalue:decimal Значение оценки.
iconsize:number Размер значка.
isemptyshown:boolean Позволяет определить, показываются ли пустые звездочки.
isemptycolored:boolean Позволяет определить, закрашены ли пустые звездочки.
colorprimary:color Основной цвет заливки.
colorsecondary:color Дополнительный цвет градиента.
gradienttype:string Тип градиента.
ratingmax:number Максимальный рейтинг.
ratingmin:number Минимальный рейтинг.

События

Название Описание
complete Отправляется, когда созданы значки рейтинга.
validationerror Отправляется, когда значение рейтинга меньше минимального.
Просмотр улиц

gwd-streetview

Компонент Google Просмотр улиц.

Свойства

Название Описание
key:string Ключ Google Maps Platform API. Информацию о том, как получить уникальный ключ для своего приложения можно найти на странице https://developers.google.com/maps/documentation/javascript/get-api-key.
latitude:decimal Значение широты местоположения.
longitude:decimal Значение долготы местоположения.
interaction:boolean Возможность панорамировать или повернуть вид.
heading:decimal Указывает направление камеры по компасу. Допустимые значения от 0 до 360 (оба эти значения соответствуют направлению на север, 90 – на восток, 180 – на юг). Если направление не указано, будет рассчитано значение, направляющее камеру на указанное местоположение из точки, в которой была сделана ближайшая фотография.
pitch:decimal Определяет угол наклона камеры вверх и вниз по отношению к автомобилю Просмотра улиц. Обычно, но не всегда, камера расположена горизонтально. Положительные значения соответствуют поднятию камеры (90º – вверх под прямым углом), отрицательные – ее опусканию (–90º – вниз под прямым углом).
zoom:number Масштабирование изображения по отношению к автомобилю Просмотра улиц.
Перелистываемая галерея

gwd-swipegallery

Объект галереи, в котором кадры отображаются в виде ленты, перелистываемой одним движением.

Свойства

Название Описание
images:string Разделенный запятыми список URL кадров галереи.
groups:string Разделенный запятыми список идентификаторов групп.
transition-duration:number Скорость анимации в галерее в миллисекундах.
start-frame:number Начальный кадр.
num-frames-to-display:number Количество одновременно отображаемых кадров.
frame-snap-interval:number Количество кадров, перелистываемых за один раз.
autoplay:boolean Позволяет выбрать, показать ли все кадры в галерее один раз автоматически.
has-navigation:boolean Позволяет выбрать, включать ли элементы навигации по галерее.
navigation-thumbnails:boolean Позволяет выбрать, использовать ли для навигации эскизы вместо точек.
navigation-highlight:color CSS-код цвета, которым выделяется активный кадр на панели навигации.
scaling:string Принцип, по которому изображение будет масштабироваться в кадре.
swipe-axis:string Ось, для которой обнаружено перелистывание.
offset:number Расстояние между соседними кадрами.
frame-width:number Ширина одного кадра. Переопределяет свойство num-frames-to-display.
frame-height:number Высота одного кадра.
autoplay-duration:number Общая продолжительность автовоспроизведения кадров.
autoplay-step-interval:number Интервал между кадрами во время автовоспроизведения.
exit-urls:string Разделенный запятыми список URL перехода, соответствующих каждому кадру галереи.
disable-gesture:boolean Позволяет отключить или включить компонент "Жест" для сенсорной навигации по галерее.
pause-front-media:boolean Позволяет выбрать, приостанавливать ли воспроизведение мультимедийного элемента (например, видео или аудио) в предыдущем кадре при смене кадра.
resume-next-media:boolean Позволяет выбрать, возобновлять ли воспроизведение мультимедийного элемента (например, видео или аудио) в новом кадре при смене кадра.

События

Название Описание
firstinteraction Отправляется, когда пользователь впервые взаимодействует с галереей.
allframesviewed Отправляется, когда все кадры галереи показаны хотя бы один раз.
allframesloaded Отправляется, когда все кадры галереи загружены.
autoplayended Отправляется после окончания автовоспроизведения по любой причине. Если истекла заданная продолжительность, значение event.detail.completed будет true, в ином случае – false.
frameshown Отправляется при показе нового кадра после завершения необходимой анимации.
frameactivated Отправляется в начале активации нового кадра, даже если он ещё не виден.
frameautoplayed Отправляется после активации кадра для автовоспроизведения. Может запускаться чаще, чем frameshown, поскольку активируется отдельно для каждой группы одновременно отображаемых кадров.
frametap Отправляется, когда пользователь касается кадра.
reachleftend Отправляется, когда достигнут левый край галереи.
reachrightend Отправляется, когда достигнут правый край галереи.
framemouseover Отправляется, когда пользователь наводит указатель на кадр.
framemouseout Отправляется, когда пользователь выводит указатель из кадра.
trackstart Отправляется, когда начинается перетаскивание касанием или мышью.
track Регистрация координат компонента (X и Y) во время перетаскивания мышью или касанием.
trackend Отправляется, когда оканчивается перетаскивание касанием или мышью.

Методы

Название Описание
goToFrame(frame:number, opt_animate:string) Перейти к указанному кадру.
rotateOnce(opt_duration:number, opt_direction:string) Показать все кадры в галерее по одному разу.
stopRotation() Прекратить автоматическое перелистывание.
goForwards() Перейти на один кадр вперед.
goBackwards() Перейти на один кадр назад.

Примеры

Отображение подписи для каждого кадра перелистываемой галереи

В этом примере показано, как создать подпись для каждого изображения в перелистываемой галерее. Предполагается, что вы разместили в рабочей области компонент "Перелистываемая галерея" с идентификатором gwd-swipegallery_1 (по умолчанию) и добавили в него изображения.

Кроме того, для подписей необходимо создать элемент div и назначить ему идентификатор caption-div.

  • Цель. Выберите перелистываемую галерею с идентификатором gwd-swipegallery_1
  • Событие. Выберите Перелистываемая галерея > Кадр показан.
  • Действие. Выберите Пользовательское > Добавить дополнительное действие.

В окне собственного кода укажите имя функции, например showcaption. Затем вставьте следующий код:

var gallery = document.getElementById('gwd-swipegallery_1');
var div = document.getElementById('caption-div');
var text = {
  1: "The text for frame 1",
  2: "The text for frame 2",
  3: "The text for frame 3"
};
div.textContent = text[gallery.currentIndex];
Интерактивная область

gwd-taparea

Этот компонент позволяет регистрировать действия нажатия.

Свойства

Название Описание
exit-override-url:string URL для перехода после касания интерактивной области.

События

Название Описание
action Отправляется, когда пользователь касается кнопки на мобильном устройстве или нажимает ее на компьютере.
Кнопка вызова/SMS

gwd-taptocall

Этот компонент позволяет по нажатию позвонить или отправить SMS на указанный номер телефона.

Свойства

Название Описание
number:string Номер телефона для вызова или отправки SMS.
action:string Позволяет выбрать действие: вызов или отправка SMS.

События

Название Описание
action Отправляется, когда пользователь касается кнопки на мобильном устройстве или нажимает ее на компьютере.
taptocall Отправляется, когда пользователь запрашивает вызов или SMS.

Методы

Название Описание
dial() Сделать вызов или отправить SMS на заданный номер.
Видео

gwd-video

Компонент с интерфейсом HTMLVideoElement.

Свойства

Название Описание
autoplay:boolean Позволяет выбрать, воспроизводить ли видео автоматически при загрузке страницы.
loop:boolean Позволяет выбрать, повторять ли воспроизведение видео.
muted:boolean Позволяет выбрать, начинать ли воспроизведение видео без звука.
controls:boolean Позволяет выбрать, активировать ли стандартные элементы управления встроенного проигрывателя.
sources:file Разделенный запятыми список URL видео в разных форматах.
poster:string URL кадра, который отображается до запуска или переключения между кадрами видео.

События

Название Описание
play Отправляется, когда пользователь возобновляет воспроизведение медиафайла после паузы.
pause Отправляется, когда пользователь приостанавливает воспроизведение.
playing Отправляется после начала воспроизведения медиафайла (как после паузы, так и после окончания и повторного воспроизведения).
ended Отправляется после завершения воспроизведения.
volumechange Отправляется после изменения громкости звука (если изменить настройки громкости или атрибут свойства muted).
seeked Отправляется после завершения перемотки.
waiting Отправляется, когда запрошенная операция (например, воспроизведение) задерживается до завершения другой операции (например, перемотки).

Методы

Название Описание
mute() Отключить или включить звук в видео.
pause() Приостановить воспроизведение видео.
play() Воспроизвести видео.
replay() Воспроизвести видео ещё раз.
seek(time:number) Перейти к указанному времени в видео.
setVolume(volume:number) Настроить громкость видео.
setSources(sources:string) Указать источники видео.

Примеры

Всегда включать звук при воспроизведении видео

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

  • Цель. Выберите видео. Если оно одно, в качестве идентификатора по умолчанию будет использован gwd-video_1.
  • Событие. Выберите Видео > Воспроизведение после паузы.
  • Действие. Выберите Пользовательское > Добавить дополнительное действие.

В диалоговом окне "Собственный код" укажите название функции, например mutebtn. Затем вставьте следующий код:

if (document.getElementById('gwd-video_1').muted) {
  document.getElementById('gwd-video_1').mute();
}
YouTube

gwd-youtube

Этот компонент добавляет в интерфейс HTMLElement возможность упаковывать вызовы API YouTube.

Свойства

Название Описание
video-url:string URL видео YouTube.
autoplay:string Автовоспроизведение видео YouTube после загрузки в поддерживаемых средах.
preview-duration:number Длительность предварительного просмотра. Используется, только если для атрибута autoplay задано значение preview.
controls:string Отображение элементов управления видео (значения: none, autohide).
color:string Цветовая тема индикатора проигрывателя (красная или белая).
muted:boolean Позволяет выбрать, начинать ли воспроизведение видео без звука.
annotations:boolean Позволяет выбрать, показывать ли аннотации к видео.
related:boolean Позволяет выбрать, показывать ли похожие видео после завершения текущего.
loop:boolean Позволяет выбрать, повторять ли воспроизведение видео.
pause-on-end:boolean Позволяет приостановить воспроизведение видео за 1 секунду до его окончания.
start-position:number Воспроизведение видео с заданного момента времени (в секундах).
allowfullscreen:boolean Позволяет выбрать, разрешать ли полноэкранный режим.
extra-player-args:string Дополнительные параметры проигрывателя YouTube описаны на странице https://developers.google.com/youtube/player_parameters?playerVersion=HTML5#Parameters.

События

Название Описание
buffering Буферизация проигрывателя YouTube.
ended Видео YouTube закончилось.
paused Видео YouTube приостановлено.
playing Начато воспроизведение видео YouTube.
replayed Видео YouTube воспроизведено повторно.
viewed0percent Отправляется, когда просмотрено 0 % видео.
viewed25percent Отправляется, когда просмотрено 25 % видео.
viewed50percent Отправляется, когда просмотрено 50 % видео.
viewed75percent Отправляется, когда просмотрено 75 % видео.
viewed100percent Отправляется, когда просмотрено 100 % видео.
previewed0percent Отправляется, когда просмотрено 0 % предварительного просмотра.
previewed25percent Отправляется, когда просмотрено 25 % предварительного просмотра.
previewed50percent Отправляется, когда просмотрено 50 % предварительного просмотра.
previewed75percent Отправляется, когда просмотрено 75 % предварительного просмотра.
previewed100percent Отправляется, когда просмотрено 100 % предварительного просмотра.

Методы

Название Описание
toggleMute() Отключить или включить звук в видео.
pause() Приостановить воспроизведение видео.
play() Воспроизвести видео.
replay() Воспроизвести видео ещё раз.
seek(time:number) Перейти к указанному времени в видео.
setYouTubeId(id:string, opt_cueOnly:boolean) Изменить источник видео YouTube на указанный идентификатор.
Эта информация оказалась полезной?
Как можно улучшить эту статью?