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 URL and Encode It

Next, you’ll need to grab your WhiteLabel URL (for example: example.nuitee.link). This URL will act as your public key when initializing the SDK.

In your browser's console, use the btoa() function to encode the URL as Base64:
```
btoa('your-whitelabel-url.nuitee.link')
```
The result will be your public key. For example, encoding the URL whitelabel.nuitee.link would result in:
```
d2hpdGVsYWJlbC5udWl0ZWUubGluaw==
```

This encoded URL will be used in the SDK initialization.

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 public key (the base64-encoded WhiteLabel URL)
  LiteAPI.init({
    publicKey: 'd2hpdGVsYWJlbC5udWl0ZWUubGluaw=='
  });

  // 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 public key (which is the Base64-encoded WhiteLabel URL).
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.

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

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 the public key
    LiteAPI.init({
      publicKey: 'd2hpdGVsYWJlbC5udWl0ZWUubGluaw=='
    });

    // Create the map and render it inside the container
    LiteAPI.Map.create({
      selector: '#map',
      placeId: 'ChIJ5TCOcRaYpBIRCmZHTz37sEQ', // Example Place ID for Barcelona
      primaryColor: '#7057F0'  // Your brand color (hex code) to use for buttons
    });
  </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.
Encode your WhiteLabel URL as Base64 to use as the public key.
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.