マップ

マップは、単一のサプライヤー（例：ホテルや体験提供者）、在庫（例：部屋タイプ、会議室、スパなど）、またはキュレーションされたリストや保存された検索のような在庫のコレクションを表し、予約可能なマップマーカーを含むインタラクティブなマップを通じてそれらの詳細を表示します。
ユーザーは以下の方法でマップと対話できます：

マップをズーム、パン、ドラッグして利用可能な在庫を確認します。
マップマーカーをクリックして、カード形式の在庫詳細を表示します。

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

マップを作成する

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

単一マーカーマップ：検索中に見つけたものからマップを作成します。
複数マーカーマップ：キュレーションリストまたは保存された検索からマップを作成します。

単一マーカーマップ

上の画像は検索からのもので、検索結果でできることの一部を示しています。そのアクションの一つに「マップを作成」があります。
そのボタンをクリックすると、マップフォームページにリダイレクトされ、マップのカスタマイズを開始できます。

複数マーカーマップ

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

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

フォームでは、以下の方法でマップをカスタマイズできます：

マップの内容を覚えておくための名前を付けます。
ユーザーがマップ上を移動できるかどうかを選択します。
マップの高さをピクセル単位で設定します。
ユーザーがマップをズームイン・ズームアウトできるかどうかを選択します。
マップを埋め込むウェブサイトに合うマップスタイルを選択します。
マーカーの色を選択します。
ユーザーが最初に見る初期カードフェイスを選択します。デフォルトはその在庫のネイティブフェイスです。
ユーザーが興味を持ちそうな他の場所を示すために、独自のマーカー、円、長方形、多角形を追加できます。
保存ボタンをクリックして続行します。

マップを保存すると、マップページにリダイレクトされ、マップが世界と共有できる状態になります。

マップを共有する

上の画像は、マップに利用可能なすべてのアクションを示しています：

更新マップの設定を更新します。
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行目は、wink-content-loader Webコンポーネントを使い、コード用の広告バナーを取得する方法を示しています。
11行目は、当社のJavascriptをサイトに埋め込む方法を示しています。
13行目は、wink-app-loader Webコンポーネントを使い、ページレベルの設定を取得する方法を示しています。

API

マップを管理したい開発者は、Developers > API > Inventoryにアクセスしてください。

さらに読む

当社のWeb Componentsコレクションについて詳しく学ぶ。
Wink WordPressプラグインについて詳しく学ぶ。