マップ

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

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

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

マップの作成

マップは以下の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プラグインについて詳しく学ぶ。