AVUXI's TopPlace™ Location Pages Simple can be integrated into any webpage. They will display a compound card with location information and a map for a specific Latitude - Longitude. The component itself is presented in any of 2 different styles:
map with list of transportation and points of interest (”map-rs-1”)
only a map (”map-trans-1”)
To integrate the widget simply load the script from our CDN https://scripts.avuxi.com/travel/location-pages/latest/location-page-simple-widget.js (please note that you can replace latest with any specific version — i.e. 1.0.0 — to freeze the codebase) and execute it on an empty div with the data- settings as needed:
<div id="vxapp" data-avuxi-key="YOUR AVUXI KEY" data-page-style="map-trans-1"></div>
When ready, simply execute the downloaded script:
new AvuxiLocationPagesSimpleWidget("vxapp")
There are many customization options that can be specified as data- properties or via configuration in the dashboard. data- properties will override dashboard configurations. If none is supplied, sensible defaults are used. Icons are specified as data URLs (https://developer.mozilla.org/en-US/docs/web/http/basics_of_http/data_urls).
data-avuxi-key you must always include a data-avuxi-key in your HTMLdata-location you must always include a latitude and longitude in your HTMLdata-page-style you can specify the style of the page either through dashboard configuration or in your HTML if none is specified map-with-scores-1 is used by default. Possible options are:
map-rs-1map-trans-1data-accent-color allows you to change the color of the graphical elementsdata-mode change the default from time to distancedata-language force the widget to operate in a specific language (use ISO 639-1 codes) if not available will fallback to Englishdata-custom-text override the default texts with your own! To use, provide a JSON object with the language and the alternative texts. For example: '{"en":{"very good":"excellent","Good":"Nice", "Superb": "Very Excellent"}}'data-home-icon provide your own icon for the accommodation. Use data URLs in base64 (https://developer.mozilla.org/en-US/docs/web/http/basics_of_http/data_urls)