Maps

マップは、単一のサプライヤー（ホテルや体験プロバイダーなど）または在庫（客室タイプ、会議室、スパなど）、あるいは厳選リストや保存された検索などの在庫のコレクションを表し、予約可能なマップマーカーを含むインタラクティブマップを通じてそれらの詳細を公開します。ユーザーは、次の方法でマップを操作できます。

地図をズーム、パン、ドラッグして、利用可能な在庫を確認します。
地図マーカーをクリックすると、在庫の詳細がカード。

この記事の残りの部分では、マップを作成、カスタマイズ、共有する方法について説明します。

マップを作成する

マップは次の 2 つの方法で作成できます。

単一マーカーマップ: 見つけたものから地図を作成する検索。
マルチマーカーマップ: マップを作成する厳選リストまたは保存した検索。

単一マーカーマップ

上の画像は検索検索結果でできることをいくつか紹介します。その一つがMake a mapそのボタンをクリックすると、マップフォームページにリダイレクトされ、マップのカスタマイズを開始できます。

マルチマーカーマップ

両方キュレーションリストそして保存した検索マップを作成できるアクションが付属しています。このマップには、リスト内のすべての在庫のマップマーカーが含まれます。

マップをカスタマイズする

このフォームでは、次の方法でマップをカスタマイズできます。

マップの内容がわかるように名前を付けます。
ユーザーがマップ内を移動できるようにするかどうかを選択します。
マップの高さをピクセル単位で設定します。
ユーザーがマップを拡大/縮小できるようにするかどうかを選択します。
マップを埋め込む Web サイトに適したマップスタイルを選択します。
マーカーの色を選択します。
ユーザーに最初に表示するカードの表面を選択します。デフォルトでは、そのインベントリのネイティブの表面になります。
独自のマーカー、円、四角形、多角形を追加して、ユーザーが興味を持つ可能性のある地図上の他の場所を示すことができます。
クリック 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行目は、ウィンクコンテンツローダーWeb コンポーネントに、コードの広告バナーを取得するように指示します。
11 行目では、Javascript をサイトに埋め込む方法を示しています。
13行目は、ウィンクアプリローダーWeb コンポーネントにページレベルの構成設定を取得するように指示します。

API

マップを管理したい開発者は、開発者 > API > 在庫。

さらに読む

当社のコレクションについてさらに詳しくWebコンポーネント。
詳細はこちらウィンクWordPressプラグイン。