search-map
Micro Fronted displaying markers with hotel information like image, price and link on a map using Google Dynamic Maps api.
The search-map component displays search results on a Google map.
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/search-map/current/search-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-search-map
locale="VALUE"
market="VALUE"
show-consent="VALUE">
</tui-search-map>Examples
Basic example
<tui-search-map
market="se"
locale="sv-SE"
category-icon="tui">
</tui-search-map>
Attributes
This microfrontend accepts the following attributes:
| Name | Description | Values | Default | Required |
|---|---|---|---|---|
ab-test-show-mini-map | Hide desktop searchmap and show map in the modal A/b test ACCOONLY-7487 | no | ||
category-icon | Icon that should be used for TUI rating | 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, nb-NO, nl-BE, nl-NL, sv-SE | yes | |
market | Market to which API calls would be sent | at, be, ch, de, dk, fc, fi, ie, nl, no, se, uk | yes | |
price-format | Should component display total price or price per person | pricePerPerson, totalPrice | no | |
show-consent | Shows a consent dialog for using Google Maps for Central region | yes | ||
theme | Theme to be used within UI | firstchoice, tui-light | no | |
tracking-id | The id to be used for click tracking | no |
Events
This microfrontend emits the following events:
| Event | Schema |
|---|---|
Emitted when component is initially rendered. | |
Emitted when map viewport got updated. | |
Emitted when marker on the map was clicked by the user | |
Emitted when map was clicked by the user | |
Tracking event | |