コンテンツにスキップ

Maps

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

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

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

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

アクション
検索結果のアクション

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

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

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

  1. マップの内容がわかるように名前を付けます。
  2. ユーザーがマップ内を移動できるようにするかどうかを選択します。
  3. マップの高さをピクセル単位で設定します。
  4. ユーザーがマップを拡大/縮小できるようにするかどうかを選択します。
  5. マップを埋め込む Web サイトに適したマップ スタイルを選択します。
  6. マーカーの色を選択します。
  7. ユーザーに最初に表示するカードの表面を選択します。デフォルトでは、そのインベントリのネイティブの表面になります。
  8. 独自のマーカー、円、四角形、多角形を追加して、ユーザーが興味を持つ可能性のある地図上の他の場所を示すことができます。
  9. クリック 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 > 在庫