The Travel Agency Finder Component

Description

The component shows the travel agencies on a Google Maps and below in a list.

Screenshots

The map.

The list.

Meta

Maintainer technikportalentwicklung@tui.at
Locales en-US, de-DE, de-AT, fr-CH

Usage

Add the following script tag (or something similar) to your web page to have the component load. Note: This is required only once per webpage, even when you embed multiple instances of the component.

<script src="https://cloud.tui.com/cdn/travel-agency-finder/travel-agency-finder.js" async defer></script>

Add the following HTML code anywhere in your webpage at the position where you want the component to show. You can create multiple instances of the component. Remember to replace VALUE with actual valid values for the given attribute.

<travel-agency-finder
	google-api-key="VALUE"
	country="VALUE">
</travel-agency-finder>

Read more about using components ›

Attributes

This component can be configured with the following attributes:

Name Description Allowed Values Default Required
google-api-key

Google Maps API Key with the following APIs enabled: Maps JavaScript API, Places API

 yes
country

The country of which the travel agencies should be shown.

 AT, DE, CH yes
brand

Allows setting a brand, which will used to style the component.

 airtours, gulet, robinson, tui tui no
scope

scope for avoiding naming collision and allowing to use different versions of the component in your code.

 * no
locale

used for localisation and translations.

 en-US, de-DE, de-AT, fr-CH en-US no
location

Latitude, longitude. The map will be centered to this location. The list entries are sorted by distance of this location.

 ^(\-?([0-8]?[0-9](\.\d+)?|90(.[0]+)?));(\-?([1]?[0-7]?[0-9](\.\d+)?|180((.[0]+)?)))$ 0;0 no
enable-geolocation-on-startup

Whether the map should be centered by the stored location in the session storage (available if the user interacted with the map in the same browser session) or by the current position (geolocation) of the user.

 true no
sort-modes

If given the list can be sorted by recommendation or distance.

 recommendation,distance, distance,recommendation no
sort-by

Sort the list by this value.

 recommendation, distance recommendation no
zoom

Initial zoom of the map.

 8 no
recommended-only

If set, only recommended travel agencies will be returned/shown.

 no
cta-button-label

Specifies the label and functionality of the CTA button in the list view. 'detail' for a link to the detail page, 'send' to send to this travel agency, or 'contact' to send an appointment request to this travel agency.

 details, send, contact details no
show-appointment-button

Whether the 'make an appointment' button should be shown.

 no
search-placeholder

The placeholder text within the search field.

 What are you looking for? Zip code, city, street, travel agency no
search-headline

Headline above the search field.

 no
search-headline-icon

Name of the ui-icon for the headline above the search field.

 no
variant

Specifies which sub-components should be displayed. 'full' for map and list, 'map' for map nad 'list' for list.

 full, list, map full no
listVariant

Variant of the list

 default, compact default no
appointments-only

If true, only travel agencies are displayed that allow making an appointment

 no
link-to-detail-page

If there should be a button linking to the detail page.

 true no
list-max-results

The number of travel agencies that should be shown in the list view. Defaults to '0', which means that all travel agencies are shown.

 no
is-map-visible

If the map view should be shown initially.

 true no
is-list-visible

If the list view should be shown initially.

 true no
show-heart

If the heart icon should be shown (which is used for setting a travel agency as favorite)

 no
list-taf-overview-page

Link to the 'Travel Agency Finder Overview Page'

 no

Events

Event map-initialized
Type publish
Description

Event will be triggered when the google map has been loaded.
Payload none
Event map-autocomplete-enter-key-pressed
Type publish
Description

Event will be triggered when the user presses the enter key in the autocomplete field.
Payload none
Event map-autocomplete-place-selected
Type publish
Description

Event will be triggered when the user selects an autocomplete entry.
Payload

The payload object of this event has the following properties:

Name place
Description

The google maps PlaceResult object.
Type object
Event map-change-list-location
Type publish
Description

Event will be triggered when the location of the list has been updated. This happens when the bounds of the maps has been changed.
Payload none
Event map-geolocation-icon-clicked
Type publish
Description

Event will be triggered when the user clicks on the 'my location' icon.
Payload none
Event map-infowindow-opened
Type publish
Description

Event will be triggered when the user clicks on a map marker to open the infowindow.
Payload

The payload object of this event has the following properties:

Name placeId
Description

The place id of the travel agency.
Type string
Event list-pagination-changed-page
Type publish
Description

Event will be triggered when the user changes the page.
Payload

The payload object of this event has the following properties:

Name page
Description

The requested page number.
Type integer
Event list-sorting-changed
Type publish
Description

Event will be triggered when the user changes the list sorting.
Payload

The payload object of this event has the following properties:

Name sortBy
Description

The requested sorting (recommendation or distance).
Type string
Event list-detail-link-button-clicked
Type publish
Description

Event will be triggered when the user clicks on a link to open the detail page.
Payload

The payload object of this event has the following properties:

Name placeId
Description

The place id of the travel agency.
Type string
Name name
Description

The name of the travel agency.
Type string
Event list-appointment-button-clicked
Type publish
Description

Event will be triggered when the user clicks on the appointment button in the list view.
Payload

The payload object of this event has the following properties:

Name placeId
Description

The place id of the travel agency.
Type string
Name name
Description

The name of the travel agency.
Type string
Name town
Description

The name of the town the travel agency is located in.
Type string
Event map-appointment-button-clicked
Type publish
Description

Event will be triggered when the user clicks on the appointment button in the map view.
Payload

The payload object of this event has the following properties:

Name name
Description

The name of the travel agency.
Type string
Name town
Description

The name of the town the travel agency is located in.
Type string
Event agencySelected
Type publish
Description

Event will be triggered when an agency has been selected (if cta-button-label is not 'detail')
Payload

The payload object of this event has the following properties:

Name agencyId
Description

The TUI agency id.
Type string
Name level
Description

The agency level.
Type number
Name name
Description

The name of the travel agency.
Type string
Name town
Description

The name of the town the travel agency is located in.
Type string
Name zip
Description

The zip code of the town the travel agency is located in.
Type string
Name street
Description

The name of the town the travel agency is located.
Type string
Name email
Description

The email address of the travel agency.
Type string
Name phone
Description

The phonenumber of the travel agency.
Type string
Event list-email-address-clicked
Type publish
Description

Event will be triggered when the user clicks on the email address of an agency in the list view.
Payload

The payload object of this event has the following properties:

Name placeId
Description

The place id of the travel agency.
Type string
Name emailAddress
Description

The email address of the travel agency.
Type string
Event list-phone-number-clicked
Type publish
Description

Event will be triggered when the user clicks on a phone number in the list view.
Payload

The payload object of this event has the following properties:

Name placeId
Description

The place id of the travel agency.
Type string
Name phoneNumber
Description

The phone number of the travel agency.
Type string
Event map-email-address-clicked
Type publish
Description

Event will be triggered when the user clicks on the email address of an agency in the map view.
Payload

The payload object of this event has the following properties:

Name placeId
Description

The place id of the travel agency.
Type string
Name emailAddress
Description

The email address of the travel agency.
Type string
Event map-phone-number-clicked
Type publish
Description

Event will be triggered when the user clicks on a phone number in the map view.
Payload

The payload object of this event has the following properties:

Name placeId
Description

The place id of the travel agency.
Type string
Name phoneNumber
Description

The phone number of the travel agency.
Type string
Event contact-request
Type publish
Description

Event will be triggered when the user clicks on an appointment button.
Payload

The payload object of this event has the following properties:

Name placeId
Description

The place id of the travel agency.
Type string
Name countryCode
Description

The country code of the travel agency.
Type string
Name locale
Description

The locale set in the travel agency finder.
Type string
Name scope
Description

The current scope.
Type string
Event map-autocomplete-enter-key-pressed
Type publish
Description

Event will be triggered when the user uses the enter key in the search box.
Payload none
Event autocomplete-focus
Type publish
Description

Event will be triggered when the user clicks into the search box.
Payload none