Guides
Free SignupLogin to DashboardCustomer Support
  1. NO-CODE WIDGETS

Integrate a Map Widget

In this tutorial, you will learn how to integrate and use the LiteAPI Map Widget in your web application to display a dynamic, interactive map. Follow the steps below to get started.

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)
      • checkin(optional, string) — check-in date inYYYY-MM-DD` format. Controls the start of the searched stay. Defaults to today.
      • checkout (optional, string) — check-out date in YYYY-MM-DD format. Combined with checkin, determines the stay length reflected in the prices shown on map markers (e.g. set to the day after checkin to show 1-night rates). Defaults to today + 3 days.
      • filters (optional, object) — narrows the hotels rendered on the map server-side. Supported keys:
      • hotelTypes (array of numbers/strings, or comma-separated string) — e.g. [201, 208, 216, 222] or "201,208,216,222"
      • popularFilters (string) — e.g. "apartments"
      • 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”
      • popup (optional, object) customize the selected hotel popup shown when hovering over a map rate:
        • titleColor (optional, string) Hotel title text color. Example: "#0F1042"
        • textColor (optional, string) Popup body text color for price, rating, and address. Example: "#1C0C45"
        • backgroundColor (optional, string) Popup container background color. Supports any valid CSS color value, including hex, rgba, and 8-digit hex values. Example: "#ffffff96"

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


Dates and Filtering (optional)

Use the checkin, checkout, and filters options to control the searched stay and narrow which hotels appear on the map.

<script>
  LiteAPI.Map.create({
    selector: '#map',
    placeId: 'ChIJ5TCOcRaYpBIRCmZHTz37sEQ',
    primaryColor: '#7057F0',
    checkin: '2026-05-21',
    checkout: '2026-05-22',
    filters: {
      hotelTypes: [201, 208, 216, 222],
      popularFilters: 'apartments',
    },
  });
</script>

Notes:

  • checkin / checkout drive the prices shown on map markers and popups. To display 1-night totals, set checkout to the day after checkin. If both are omitted, the widget defaults to today through today + 3 days.
  • hotelTypes accepts either an array ([201, 208]) or a comma-separated string ("201,208").
  • Filters are applied server-side, so only matching hotels are returned and pinned on the map — no additional client-side filtering is required.

Common hotelTypes IDs

hotelTypes is a list of property-type IDs. The example above ([201, 208, 216, 222]`) restricts the map to apartments, B&Bs, guest houses, and homestays. Here are some of the most commonly used IDs:

IDProperty type
201Apartments
203Hostels
204Hotels
206Resorts
208Bed and breakfasts
213Villas
216Guest houses
219Aparthotels
220Holiday homes
222Homestays
225Capsule hotels
228Chalets
250Private vacation home
257Cabin
274All-inclusive property

You can combine any of these IDs in the hotelTypes array to broaden or narrow the result set. For example, to show only apartments and apart-hotels, use [201, 219]. The full ID-to-property-type mapping is available in the LiteAPI reference.

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.

Note: deepLinkParams is appended only to the click-through booking URL it does not filter the hotels shown on the map or change the searched dates. Use it for tracking parameters such as utm_source, affiliate, or clientReference. To filter results or set dates, use the dedicated filters, checkin, and checkout options described in the Dates and Filtering section above.

Customize popup styling (optional)

Change the selected hotel popup colors shown when users hover over a map rate. This is useful for matching your brand and maintaining sufficient text contrast for accessibility.

Per widget:

<script>
  LiteAPI.Map.create({
    selector: '#map',
    placeId: 'ChIJ5TCOcRaYpBIRCmZHTz37sEQ',
    popup: {
      titleColor: '#0F1042',
      textColor: '#1C0C45',
      backgroundColor: '#ffffff96',
    },
  });
</script>

Global:

<script>
  LiteAPI.theme.popupTitleColor = '#0F1042';
  LiteAPI.theme.popupTextColor = '#1C0C45';
  LiteAPI.theme.popupBackgroundColor = '#ffffff96';

  LiteAPI.Map.create({
    selector: '#map',
    placeId: 'ChIJ5TCOcRaYpBIRCmZHTz37sEQ',
  });
</script>

Supported keys: titleColor, textColor, backgroundColor.

Scope: the selected hotel popup displayed when hovering over a map rate.

Per-widget popup values take precedence over global LiteAPI.theme popup values. If no popup styling is provided, the widget uses the default popup appearance.

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',
				popup: {
          titleColor: '#0F1042',
          textColor: '#1C0C45',
          backgroundColor: '#ffffff96',
        }
        // Optional: control dates and filter results
        checkin: '2026-05-21',
        checkout: '2026-05-22',
        filters: {
          hotelTypes: [201, 208, 216, 222],
          popularFilters: 'apartments',
        },
      });
    </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
  • The map queries a 1-night stay (May 21 → May 22, 2026) and restricts pins to apartments and apart-hotels via the filters option.

Summary of Steps:

  1. Include the LiteAPI SDK using a <script> tag.
  2. Get your WhiteLabel domain (e.g., example.nuitee.link).
  3. Add a container in your HTML for the map.
  4. 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.

Updated 9 days ago

What’s Next