지도

지도는 단일 공급자(예: 호텔 또는 체험 제공자) 또는 인벤토리(예: 객실 유형, 회의실, 스파 등) 또는 큐레이션된 목록이나 저장된 검색과 같은 인벤토리 모음을 나타내며, 예약 가능한 지도 마커가 포함된 인터랙티브한 지도를 통해 해당 세부 정보를 노출합니다. 사용자는 다음과 같은 방식으로 지도와 상호작용할 수 있습니다:

지도를 확대, 축소, 이동하여 사용 가능한 인벤토리를 확인합니다.
지도 마커를 클릭하여 Card 형태로 인벤토리 세부 정보를 확인합니다.

이 문서의 나머지 부분에서는 지도를 생성, 맞춤 설정 및 공유하는 방법을 안내합니다.

지도 생성

지도는 두 가지 방법으로 생성할 수 있습니다:

단일 마커 지도: 검색 중 찾은 항목에서 지도를 생성합니다.
다중 마커 지도: 큐레이션된 목록 또는 저장된 검색에서 지도를 생성합니다.

단일 마커 지도

위 이미지는 검색에서 가져온 것으로, 검색 결과에서 할 수 있는 몇 가지 작업을 보여줍니다. 그 중 하나가 Make a map입니다. 이 버튼을 클릭하면 지도 양식 페이지로 리디렉션되어 지도를 맞춤 설정할 수 있습니다.

다중 마커 지도

큐레이션된 목록과 저장된 검색 모두 지도 생성을 위한 작업이 포함되어 있습니다. 이 지도는 해당 목록 내 모든 인벤토리에 대한 지도 마커를 포함합니다.

지도 맞춤 설정

양식에서는 다음과 같은 방식으로 지도를 맞춤 설정할 수 있습니다:

지도의 내용을 기억하기 쉽도록 이름을 지정합니다.
사용자가 지도를 이동할 수 있도록 허용할지 선택합니다.
지도의 높이를 픽셀 단위로 설정합니다.
사용자가 지도를 확대/축소할 수 있도록 허용할지 선택합니다.
지도를 삽입할 웹사이트에 어울리는 지도 스타일을 선택합니다.
마커 색상을 선택합니다.
사용자가 처음 보게 될 초기 카드 면을 선택합니다. 기본값은 해당 인벤토리의 기본 면입니다.
사용자가 관심을 가질 만한 다른 위치를 표시하기 위해 마커, 원, 사각형, 다각형을 추가할 수 있습니다.
Save 버튼을 클릭하여 계속 진행합니다.

지도를 저장하면 지도 페이지로 리디렉션되며, 이제 지도를 전 세계와 공유할 준비가 완료됩니다.

지도 공유

위 이미지는 지도에 사용할 수 있는 모든 작업을 보여줍니다:

Update 지도 구성을 업데이트합니다.
Add to WinkLinks 지도를 WinkLinks 계정에 추가합니다.
Embed 이 지도를 Map으로 웹사이트에 삽입하는 방법을 보여줍니다.
Use with 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번째 줄은 자바스크립트를 사이트에 삽입하는 방법을 보여줍니다.
13번째 줄은 wink-app-loader 웹 컴포넌트를 삽입하여 페이지 수준 구성 설정을 불러오는 방법을 보여줍니다.

API

지도를 관리하려는 개발자는 Developers > API > Inventory로 이동할 수 있습니다.

추가 자료

Web Components에 대해 더 알아보세요.
Wink WordPress 플러그인에 대해 더 알아보세요.