Maps

A map represents either a single supplier (e.g. hotel or experience provider) or inventory (i.e. room type, meeting room, spa etc) or a collection of inventory such as a curated list or saved search and exposes those details via an interactive map containing bookable map markers. A user can interact with a map in the following ways:

Map with markers — *Map with map markers*

Zoom, pan and drag the map to see available inventory.
Click on a map marker to see inventory details in the form of a Card.

Map with card open — *Map with bookable inventory*

The rest of this article walks you through how to create, customize and share your maps.

Create a map

Maps can be created in two ways:

Single marker map: Create a map from something you found while searching.
Multi marker map: Create a map from a curated list or saved search.

Single marker map

Above is an image taken from Search and shows you some of the things you can do with your search results. One of those actions is Make a map. Click on that button and it will redirect you to our map form page where you can start customizing your map.

Multi marker map

Both curated lists and saved searches come with an action that lets you create a map. This map will contain map markers for all inventory within those lists.

Customize map

The form lets you customize your map in the following ways:

Give it a name for you to remember what the map is about.
Choose whether you want the user to be allowed to move around the map.
Set how tall, in pixels, you want the map to be.
Choose whether you want the user to be allowed to zoom in and out of the map.
Choose a map style that goes with the website you will be embedding the map into.
Choose a marker color.
Select the initial card face you want users to see first. By default, it is the native face of that inventory.
You can add your own markers, circles, rectangles and polygons to indicate other locations on the map your users might find interesting.
Click the Save button to continue.

After saving your map, you are redirected to your maps page and your map is now ready to be shared with the world.

Map — *A map entry with collapsed actions menu*

Above shows you an image with all the available actions for your map:

Update Updates your map configuration.
Add to WinkLinks Adds the map to your WinkLinks account.
Embed Shows you how to embed this map as a Map into your website.
Use with WordPress Shows you how to use our WordPress plugin to embed this map into your website.

We cover some of these options, in more detail, below.

Embed

<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>

Here is how to embed your map into your site:

Line 3 shows you how to embed the Wink styles into your site.
Lines 6 through 9 shows you how to use the wink-content-loader Web Component and tell it to fetch an ad banner for your code.
Line 11 shows you how to embed our Javascript into your site.
Line 13 shows you how to embed the wink-app-loader Web Component and tell it to fetch your page-level configuration preferences.

API

Developers who want to manage maps can head over to Developers > API > Inventory.