Maps

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

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

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

Оставшаяся часть статьи расскажет вам, как создавать, настраивать и делиться своими картами.

Создать карту

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

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

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

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

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

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

Настроить карту

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

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

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

Поделиться картой

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

ОбновлятьОбновляет конфигурацию вашей карты.
Добавить в WinkLinksДобавляет карту в ваш аккаунт WinkLinks.
ВстроитьПоказывает, как встроить эту карту в качествеКартана ваш сайт.
Использовать с 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 показывают, как использоватьwink-content-loaderВеб-компонент и укажите ему загрузить рекламный баннер для вашего кода.
В строке 11 показано, как встроить наш Javascript на ваш сайт.
Строка 13 показывает, как встроитьwink-app-loaderВеб-компонент и укажите ему, как получить настройки конфигурации на уровне страницы.

API

Разработчики, желающие управлять картами, могут перейти по ссылкеРазработчики > API > Инвентарь.

Дальнейшее чтение

Узнайте больше о нашей коллекцииВеб-компоненты.
Узнайте больше оWink WordPress плагин.