How to further customize the Map widget
Services query parameters
By default, we provide users with all service options, starting with accommodations.
|
Name |
Type |
Default Value |
Description |
|
disableservices |
string |
|
Comma-separated list to disable switching into certain services |
|
hidemodeswitcher |
boolean |
false |
True if you want to disable the user completely from changing services |
|
invmode |
string |
accommodation |
The inventory service to show on the default load. The other value accepted is “experience” |
Other query parameters
To further customize your widget, use the following parameters:
|
Name |
Type |
Default Value |
Description |
|
adults |
number |
2 |
Number of adults. Up to a maximum of 30. |
|
children |
number |
0 |
Number of children. Up to a maximum of 10. |
|
chpincolor |
hex string |
|
If you have custom hotels, in hex (without the #). |
|
chpinfontcolor |
hex string |
|
If you have custom hotels, the font colours in hex (without the #). |
|
currency |
string |
|
We automatically detect the user’s currency, but if you prefer to override it, we support all major currencies. Write in 3-letter format. For example, “JPY”. |
|
customfontlink |
string |
|
The full URL for the Google font link |
|
customfont |
string |
Helvetica |
Your custom font name. |
|
disableautohover |
boolean |
false |
Automatically set to “true” if you want to disable a recommended listing to automatically hover and pop up on load. |
|
disabledirections |
boolean |
false |
If set to true, this will hide the polyline generated when hovering over a listing. |
|
disablehotels |
boolean |
false |
Disable Stay22’s current default hotel provider (Booking). |
|
disablerentals |
boolean |
false |
Disable Stay22’s current rental provider (Vrbo). |
|
dotlistings |
boolean |
false |
Compact the price pins into dots for more mapping space. |
|
featuredhcids |
string |
|
Comma-separated list of hotel IDs to stand out from other hotels. |
|
featuredabids |
string |
|
Comma-separated list of Vrbo IDs to stand out from other rental listings. |
|
fitmaptopoi |
boolean |
false |
If you happen to have any Point of Interests (POIs), you can make sure they all show on the initial map load. |
|
fontcolor |
hex string |
auto |
The navbar’s font color in hex (without the #). This will define the branding color of the "See Accommodations" button. |
|
freezeviewport |
boolean |
false |
If you want to disable automatic zoom out/in when the map is loaded. |
|
hideadults |
boolean |
false |
If set to “true”, the adults field will be hidden. |
|
hidecheckinout |
boolean |
false |
If set to true, the check-in and check-out inputs will be hidden. |
|
hidechildren |
boolean |
false |
If set to true, the children field will be hidden. |
|
hidecurrency |
boolean |
false |
If set to “true”, the currency section will be hidden. |
|
hideenlargemap |
boolean |
false |
If set to “true”, the enlarged map buttons will be hidden. |
|
hidefilters |
boolean |
false |
If set to “true”, the filters section will be hidden. |
|
hideguestpicker |
boolean |
false |
If set to true, the guest picker will be hidden. |
|
hideguestrating |
boolean |
false |
If set to true, the guest rating filter will be hidden. |
|
hidelanguage |
boolean |
false |
If set to “true”, the language selection will be hidden. |
|
hidemainmarkercover |
boolean |
false |
If set to “true”, the background color behind the main market will be hidden and it will remove the default marker shape. |
|
hidemappanels |
boolean |
false |
If set to true, this will hide map panels (e.g: zoom control, etc.). |
|
hidemapstyles |
boolean |
false |
If set to true, the customization section will be hidden. |
|
hideppn |
boolean |
false |
If set to true, the price information (price per night or total) in the footer will be hidden. |
|
hidepricefilter |
boolean |
false |
If set to true, the budget slider will be hidden. |
|
hidepriceper |
boolean |
false |
If set to “true”, the price per night/total toggle in the dropdown filter menu will be hidden. |
|
hiderooms |
boolean |
false |
If set to true, the rooms field will be hidden. |
|
hideroomtypefilter |
boolean |
false |
If set to “true”, Stay22’s room type filter section from the dropdown filter menu will be hidden. |
|
hidesearchbar |
boolean |
false |
If set to true, the search bar will be hidden. |
|
hidesettings |
boolean |
false |
If set to “true”, the settings section will be hidden. |
|
hideshare |
boolean |
false |
If set to “true”, the share button will be hidden. |
|
hidestarrating |
boolean |
false |
If set to true, the star filter will be hidden. |
|
isnear |
boolean |
|
Toggle this to true or false if you want to forcefully show or hide the center main pin. |
|
ljs |
string |
|
We automatically detect the user’s language and presently support these languages: (‘en’, ‘fr’, ‘es’, ‘de’, ‘pt’, ‘it’, ‘nl’, ‘pl’, ‘zh’, ‘zh-tw’, ‘ja’, ‘cs’, ‘no’, ‘tr’, 'sv'). Feel free to let us know if you'd like us to consider adding a language! |
|
loadingbarcolor |
hex string |
|
The loading bar color in hex (without the #). |
|
mapstyle |
string |
|
Choose a theme for the map. Choices are: “default”, “streets”, “satellite”, “terrain”, “outdoors”, “light”, and “dark”. If you use “streets”, you will get the same view as “default” and the same goes for “outdoors” for “terrain”. Contact us if you would like to explore further options. |
|
max |
number |
1000 |
Maximum nightly price range in USD. If set to 1000 or more, it’ll assume it’s 1000 or more. |
|
min |
number |
0 |
Minimum price range per night, in USD. |
|
minguestrating |
number |
1 |
Minimum guest ratings for rentals and Hotel listings. Max of 5. |
|
minstarrating |
number |
1 |
Minimum stars for hotel listings. Max to 5. |
|
nelat |
number |
|
To force a map viewport (needs all 4 variables). North-East Latitude. |
|
nelng |
number |
|
To force a map viewport (needs all 4 variables). North-East Longitude. |
|
onlyhcids |
string |
|
Comma-separated list of hotel IDs to display exclusively on the map. Only applicable to hotels listed on Booking.com. |
|
openmenu |
string |
|
If you want to open the menu when the map loads. You can set it as “null” not to open anything. The menu will only open for non-mobile devices if space allows. Options currently are: “null”, “filters”, “guestpicker”, “datepicker” and “settings”. |
|
parking |
boolean |
|
If set to false, parking pins will not show on the map. Parking pins will be displayed on all EU-based map by default and will only display at zoom levels 15 and up. |
|
poibgcolor |
hex string |
|
The background color (without the #) for the POI pins if you have any displayed. Defaults to the maincolor if not overwritten. |
|
priceper |
string |
|
The displayed price. You can also display it by “total”. |
|
priceslidercolor |
hex string |
|
The price slider color in hex (without the #). If not set, will mimic navbarcolor. |
|
rentalapi |
string |
vrbo |
“vrbo” is the default hotel API pin for the map. You can set “airbnb” if you want to switch. Take note that only vrbo pays revenue share at the moment until further notice |
|
rooms |
number |
1 |
Number of rooms - up to a maximum of 30. Also works as the number of bedrooms for Vrbo’s (including studios for the default 1). |
|
scroll |
string |
|
Zooming and dragging are initially disabled by default to avoid conflict with the page. Once we detect user intent, we will automatically enable zoom scrolling. You can force it to be always enabled by setting it as “enabled”. |
|
showairbnbs |
boolean |
false |
Show Vrbo spaces (filter pre-checked). |
|
showgmapsicon |
boolean |
false |
If set to true, a Google Maps icon on the footer will show for your user’s convenience. |
|
showhotels |
boolean |
false |
Show hotel rooms (filter pre-checked). |
|
skipabids |
string |
|
Comma-separated list of Airbnb/Vrbo IDs to hide from the map. |
|
skiphcids |
string |
|
Comma-separated list of hotel IDs to hide from the map. |
|
skipotasrp |
boolean |
false |
If you want your users to skip landing on Booking.com’s or Airbnb’s.com or Vrbo.com’s search results page and go directly to the hotel details page. Note, we don’t recommend turning this on, as our A/B test shows, it converts better to leave it automatic default to us to control. |
|
supportedcurrencies |
string |
|
To force the list of currencies to your liking. Use commas like “usd,cad,eur” to separate them. |
|
supportedlang |
string |
|
To force the list of languages to your liking. Use commas like “en,fr,es,de” to separate them. |
|
swlat |
number |
|
To force a map viewport (needs all 4 variables). South-West Latitude. |
|
swlng |
number |
|
To force a map viewport (needs all 4 variables). South-West Longitude. |
|
zoom |
number |
16 |
The initial zoom level. The higher the number, the zoomier the map will be |
Map (only) or ListView Mode
By default, your iframe will be the Stay22 Hybrid Map. Map (only) or ListView will only be displayed in the iframe if you implement the parameters below.
|
Name |
Type |
Default Value |
Description |
|
viewmode |
string |
all |
If set, then your display will be either a standalone map via `viewmode=map` or only a listview via `viewmode=listview` |
|
listviewexpand |
string |
true |
If set, on every initial load of your iframe, ListView will be open with your Hybrid Map. This parameter is only applicable for Hybrid Map. If set to false, ListView of options will be collapsed on initial load with Hybrid Map. |
**We recommend setting the iframe to a minimum of 350px x 400px in width and height for optimal display of Hybrid Map or ListView. ** Any iframe with a width of 321px or a height less than 400px will default to Map only, even if you have the params to display Hybrid Map or ListView.**
Adding GPX trails and pins on the map
If you want to showcase your trail on the map, we currently support this by linking your GPX file to the &gpx= parameter. Make sure the GPX file is hosted in an SSL-secured environment, so we can link to external files and load them via https.
https://www.stay22.com/embed/gm?lat=45.753075&lng=3.106983&gpx=https://www.example.com/agpxfile.gpx
Example with a GPX trail:
|
Name |
Type |
Default Value |
Description |
|
gpxlinecolor |
hex |
45aaf2 |
Trail color (without the #). |
|
gpxlineopacity |
number |
1 |
Float between 0 to 1 on its opacity. |
|
gpxlinethickness |
number |
4 |
Trail thickness in pixels. |
If you want to display your own pins on the map, you will need to use waypoints (<wpt/> or routes (<rte/>). For example:
<rte> |
<!-- REQUIRED: The pin coordinates -->
|
Example of GPX trail and pins, using <rte>:
https://www.stay22.com/embed/gm?address=world&gpx=gpx/bitexamplerte.gpx.
Feel free to download the GPX file and inspect them using your favourite text or code editor!
Example of GPX pins only, using <wpt>:
https://www.stay22.com/embed/gm?address=world&gpx=gpx/bitexamplewpt.gpx&fitmaptopoi=true.
Feel free to download the GPX file and inspect it using your favourite text or code editor!