Карты

Карта представляет собой либо одного поставщика (например, отель или поставщика впечатлений), либо инвентарь (т.е. тип номера, конференц-зал, спа и т.д.), либо коллекцию инвентаря, такую как кураторский список или сохранённый поиск, и отображает эти данные через интерактивную карту с бронируемыми маркерами. Пользователь может взаимодействовать с картой следующими способами:

Масштабировать, перемещать и перетаскивать карту, чтобы увидеть доступный инвентарь.
Нажимать на маркер на карте, чтобы увидеть детали инвентаря в виде Карточки.

Карта с открытой карточкой — *Карта с бронируемым инвентарём*

Далее в статье показано, как создавать, настраивать и делиться вашими картами.

Создание карты

Карты можно создавать двумя способами:

Карта с одним маркером: Создайте карту из того, что вы нашли при поиске.
Карта с несколькими маркерами: Создайте карту из кураторского списка или сохранённого поиска.

Карта с одним маркером

Выше изображение из Поиска, показывающее некоторые действия, которые вы можете выполнить с результатами поиска. Одно из этих действий — Создать карту. Нажмите на эту кнопку, и вы будете перенаправлены на страницу формы карты, где сможете начать настраивать вашу карту.

Карта с несколькими маркерами

И кураторские списки, и сохранённые поиски имеют действие, позволяющее создать карту. Эта карта будет содержать маркеры для всего инвентаря в этих списках.

Настройка карты

Форма позволяет настроить вашу карту следующими способами:

Дайте карте имя, чтобы помнить, о чём она.
Выберите, разрешить ли пользователю перемещаться по карте.
Установите высоту карты в пикселях.
Выберите, разрешить ли пользователю масштабировать карту.
Выберите стиль карты, который подходит для сайта, в который вы будете встраивать карту.
Выберите цвет маркера.
Выберите начальный вид карточки, который пользователи увидят первым. По умолчанию это нативный вид этого инвентаря.
Вы можете добавить свои собственные маркеры, круги, прямоугольники и полигоны, чтобы указать другие интересные для пользователей места на карте.
Нажмите кнопку Сохранить, чтобы продолжить.

После сохранения карты вы будете перенаправлены на страницу с вашими картами, и ваша карта будет готова к распространению.

Распространение карты

На изображении выше показаны все доступные действия для вашей карты:

Обновить Обновляет конфигурацию вашей карты.
Добавить в WinkLinks Добавляет карту в ваш аккаунт WinkLinks.
Встроить Показывает, как встроить эту карту как Map на ваш сайт.
Использовать с WordPress Показывает, как использовать наш плагин WordPress для встраивания этой карты на ваш сайт.

Некоторые из этих опций мы рассмотрим подробнее ниже.

Встраивание

<html>
  <head>
    <link rel="stylesheet" href="https://elements.wink.travel/styles.css"></link>
  </head>
  <body>
    <wink-content-loader
       layout="MAP"
       id="64d7cbc8-61df-11ef-9722-42004e494300"
    ></wink-content-loader>

    <script src="https://elements.wink.travel/elements.js" type="module" defer></script>

    <wink-app-loader
      client-id="YOUR CLIENT ID GOES HERE"
      configuration-id="YOUR CUSTOMIZATION ID GOES HERE"
    ></wink-app-loader>
  </body>
</html>

Вот как встроить вашу карту на сайт:

Строка 3 показывает, как встроить стили Wink на ваш сайт.
Строки с 6 по 9 показывают, как использовать Web Component wink-content-loader и указать ему загрузить рекламный баннер для вашего кода.
Строка 11 показывает, как встроить наш Javascript на ваш сайт.
Строка 13 показывает, как встроить Web Component wink-app-loader и указать ему загрузить ваши настройки конфигурации на уровне страницы.

API

Разработчики, желающие управлять картами, могут перейти в раздел Developers > API > Inventory.

Дополнительные материалы

Узнайте больше о нашей коллекции Web Components.
Узнайте больше о плагине Wink для WordPress.