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 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 thestyle
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 theselector
. TheplaceId
is used to center the map on a specific location (e.g., Rome or another point of interest).
Please note that this <script>
tag must be placed after the previous script tag that in step 1 that is responsible for including 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 withid="map"
. - The map is initialized and centered using the provided Place ID (
'ChIJ5TCOcRaYpBIRCmZHTz37sEQ'
). - 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.
Updated 1 day ago