Integrate a Map Widget

Here's a live example of what you will be integrating:

Step 1: Include the LiteAPI SDK

To begin, include the LiteAPI SDK in your HTML file by adding the following script tag inside the <head> section of your HTML document:

<head>
  <script src="https://components.liteapi.travel/v1.0/sdk.umd.js"></script>
</head>

This script imports the LiteAPI components SDK, which will allow you to use LiteAPI's features, including rendering maps.

Step 2: Get your WhiteLabel Domain

Next, you'll need your WhiteLabel Domain (for example: example.nuitee.link). This domain will be used directly when initializing the SDK.

Step 3: Add a Container for the Map

To display the map, you need to add an HTML element that will act as a container for the map. Add the following <div> element anywhere in your HTML body where you want the map to appear:

<div id="map" style="height: 500px;"></div>

The id attribute should be unique (e.g., id="map"), and you can customize the style attribute to adjust the map’s height or other CSS properties.

Step 4: Initialize the SDK and Render the Map

Now that you’ve included the SDK, encoded your WhiteLabel URL, and set up a container for the map, the next step is to initialize the SDK and render the map in your application.

Here’s how you can do it in a <script> tag.

<script>
  // Initialize the SDK with your domain
  LiteAPI.init({
    domain: 'whitelabel.nuitee.link'
  });

  // Create and display the map inside the container
  LiteAPI.Map.create({
    selector: '#map',  // The container where the map will be rendered
    placeId: 'ChIJ5TCOcRaYpBIRCmZHTz37sEQ',  // The placeId to center the map (e.g. Barcelona)
    primaryColor: '#7057F0'  // Your brand color (hex code) to use for buttons
  });
</script>

LiteAPI.init(): Initializes the SDK with your domain (your WhiteLabel domain, e.g., example.nuitee.link).
LiteAPI.Map.create(): Creates the map and injects it into the container specified by the selector. The placeId is used to center the map on a specific location (e.g., Rome or another point of interest). You can look up for a specific placeId using our Places API endpoint.
- Options that can be provided:
  - selector (required, string)
  - placeId (optional, string)
  - primaryColor (optional, string)
  - hideLogo (optional, boolean)
  - currency (optional, string e.g. USD)
  - onHotelClick (optional, Function)
    - When this is provided, clicking a rate will call this function with all the relevant data instead of opening up your connected Whitelabel site. The data will contain hotel: Object, checkin: string, checkout: string, adults: number, children: Array.
  - deepLinkParams (optional, string) Query string added to every White Label URL opened by the widget (e.g., lang, currency). Don’t include a leading “?”. See Deep linking to White Label.
  - labelsOverride (optional, object) customize Search Bar labels:
    - searchAction (string) Search button label. Default: “Search”
    - placePlaceholderText (string) input placeholder. Default: “Search for a destination”

Please ensure that this <script> tag is placed after the script tag from Step 1, which is responsible for loading the SDK.

Deep linking (optional)

Add your own query parameters to the White Label URL opened from the map.
Global via LiteAPI.init:

<script>
  LiteAPI.init({
    domain: 'whitelabel.nuitee.link',
    deepLinkParams: 'language=fr&currency=EUR',
  });
</script>

Per widget (overrides global):

<script>
  LiteAPI.Map.create({
    selector: '#map',
    placeId: 'ChIJ5TCOcRaYpBIRCmZHTz37sEQ',
    deepLinkParams: 'language=fr&currency=EUR',
  });
</script>

Notes: pass a plain query string (no leading ?). If you implement onHotelClick, you control navigation and should append your params yourself.

Customize labels (optional)

Change the Search Bar button and placeholder text shown on the map.
Global:

<script>
  LiteAPI.init({
    domain: 'whitelabel.nuitee.link',
    labelsOverride: {
      searchAction: 'Search',
      placePlaceholderText: 'Search for a destination',
    },
  });
</script>

Per widget:

<script>
  LiteAPI.Map.create({
    selector: '#map',
    placeId: 'ChIJ5TCOcRaYpBIRCmZHTz37sEQ',
    labelsOverride: {
      searchAction: 'Find hotels',
      placePlaceholderText: 'Where to?',
    },
  });
</script>

Supported keys: searchAction, placePlaceholderText. Scope: the embedded Search Bar inside the Map.

Full Example

Here’s a complete example of how your HTML file might look after following these steps:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>LiteAPI Map Example</title>
    <!-- Include LiteAPI SDK -->
    <script src="https://components.liteapi.travel/v1.0/sdk.umd.js"></script>
  </head>
  <body>
    <!-- Container for the map -->
    <div id="map" style="height: 500px"></div>

    <script>
      // Initialize LiteAPI SDK with your domain
      LiteAPI.init({
        domain: 'whitelabel.nuitee.link',
        deepLinkParams: 'language=fr&currency=EUR',
        labelsOverride: {
          searchAction: 'Search',
          placePlaceholderText: 'Search for a destination',
        },
      });

      // Create the map and render it inside the container
      LiteAPI.Map.create({
        selector: '#map',
        placeId: 'ChIJ5TCOcRaYpBIRCmZHTz37sEQ',
        primaryColor: '#7057F0',
      });
    </script>
  </body>
</html>

In this example:

The map is rendered inside a <div> element with id="map".
The map is initialized and centered using the provided Place ID ('ChIJ5TCOcRaYpBIRCmZHTz37sEQ'). You can look up for a specific placeId using our Places API endpoint.
The brand color for the buttons is set to #7057F0

Summary of Steps:

Include the LiteAPI SDK using a <script> tag.
Get your WhiteLabel domain (e.g., example.nuitee.link).
Add a container in your HTML for the map.
Initialize the SDK and render the map using LiteAPI.Map.create().

With these simple steps, you'll be able to display a map on your web page using the LiteAPI SDK.