hotel-map
Component displaying a map with location of the hotel. It can also display nerby hotels when proper event is fired with search data.
<?xml version="1.0" encoding="UTF-8"?> <Error><Code>AccessDenied</Code><Message>Access Denied</Message><RequestId>F6S9V7GXBFZAEEK3</RequestId><HostId>xGLy6El/6GHOcoxgEHiUSObWTkyGpeE7xCQoNzwmul9pSp7GI/WBD9OI8hMJi3hQYg3NDbIgekRK7F5Q2hFSe1QRxJV0IN22d8FWPIn7WkE=</HostId></Error>
Screenshots
Usage
Add the following script tag to your web page to load the microfrontend. Note: This is required only once per webpage, even when you embed multiple instances of the microfrontend.
<script src="https://nonprod.cloud.tui.com/osp/ao/ui/hotel-map/current/hotel-map.esm.js" defer></script>
Add the following HTML code anywhere in your webpage at the position where you want the microfrontend to show. You can create multiple instances of the microfrontend.
<tui-hotel-map
api-key="VALUE"
show-consent="VALUE">
</tui-hotel-map>
Examples
Basic example
<tui-hotel-map
hotel-id="A2961126"
market="uk"
locale="en-GB"
api-key="googleMapsAPIKey"
mode="STATIC"
source-system="TRIPS"
alt-text="Map over Palma">
</tui-hotel-map>
Attributes
This microfrontend accepts the following attributes:
Name | Description | Values | Default | Required |
---|---|---|---|---|
alt-text | Alt text for static map | no | ||
api-key | Google Maps API key | yes | ||
category-icon | Icon that should be used for TUI rating | star , sun , tui | no | |
coordinates | Coordinates could be passed instead of an hotel id. Like 59.32932349999999,18.0685808 (lat,lng) | no | ||
hotel-id | Id of the hotel to mark on the map | no | ||
hotel-limit | When search-type is set to REGION, number of hotel data to fetch would be limited. | no | ||
is-lafs-map | Set to true if map is included in LAFS. So Google consent can be correct rendered. | no | ||
locale | Locale to be used within UI | da-DK , de-AT , de-CH , de-DE , en-GB , en-IE , fi-FI , fr-BE , fr-CH , fr-FR , nb-NO , nl-BE , nl-NL , sv-SE | no | |
market | Market to which API calls would be sent | at , be , ch , de , dk , fc , fi , ie , nl , no , se , uk | no | |
mode | Which map mode should be rendered initially. For static mode, interactive map is opened via click on static map. | DYNAMIC , SLOT , STATIC | no | |
price-format | Should price be displayed as price per person or totalprice | pricePerPerson , totalPrice | no | |
search-type | Search for offers using GeoPolygon or Region definition. | DESTINATION , GEO | no | |
show-consent | Shows a consent dialog for using Google Maps for Central region | yes | ||
source-system | Source for content | LEGACY , NORDIC , TRIPS | no | |
static-map-sizes | Array of sizes for static maps (to handle responsive image sizes). Stringified JSON of { media: string; width: number; height: number }[]. | no | ||
theme | Theme to be used within UI | firstchoice , tui-light | no | |
tracking-id | The id to be used for click tracking | no | ||
tracking-map-section-name | The name of the section(mfe) where map located | no | ||
use-generic-static-map | Show static map or image | no |
Events
This microfrontend emits the following events:
Event | Schema |
---|---|
Emitted when component initialization is finished. |
|
Emitted when modal window is opened. Integration layer should set styles on body that prevent double scrolling. |
|
Emitted when modal window is closed. Integration layer should remove styles on body that prevent double scrolling. |
|