Secrets

If you're reading this, we feel you can enjoy trying these out. Fair warning: if you reach out to our support chat, they will likely have no idea what you're talking about. You're on your own here.

These are advanced integration features built on top of the Maps iframe using our SMAPS script. They add display modes, button triggers, multi-instance deployments, and more. The iframe approach from the main docs is the recommended path - this is for people who want more control.

The SMAPS script

Instead of building the iframe yourself, you can let the SMAPS script handle it:

<script>
  window.Stay22 = {
    mapParams: {
      aid: '<AID>',
      address: 'Bell Centre, Montreal'
    },
    displaySettings: {
      display: 'onload_div',
      a22mapQS: '#hotel-map'
    }
  };
</script>
<script src="https://scripts.stay22.com/smaps.js" async></script>

<div id="hotel-map"></div>

The script reads your config and generates an iframe automatically.

Display modes

The script supports four display modes via displaySettings.display:

`onload_div` - Inline embed

Map renders directly into the page when it loads.

displaySettings: {
  display: 'onload_div',
  a22mapQS: '#hotel-map'
}

Map opens as a modal overlay when the page loads. Use sparingly.

displaySettings: {
  display: 'onload_popmodal'
}

`onclick_slidedown` - Button + slide reveal

A button appears; clicking it slides the map down.

displaySettings: {
  display: 'onclick_slidedown',
  a22mapQS: '#hotel-map',
  btnText: 'View Hotels Nearby',
  mainColor: '0069ed'
}

A button appears; clicking it opens the map in a modal.

displaySettings: {
  display: 'onclick_popmodal',
  a22mapQS: '#hotel-map',
  btnText: 'Find Accommodation',
  mainColor: '0069ed'
}

Choosing a mode

Mode	Use when...
`onload_div`	The map is a core part of the page
`onload_popmodal`	You want immediate visibility but the map isn't inline
`onclick_slidedown`	The map is secondary - let users opt in
`onclick_popmodal`	Same as slidedown, but you prefer a modal

Configuration reference

`mapParams`

Parameter	Type	Required	Default	Description
`aid`	string	Yes	—	Your Stay22 affiliate ID.
`address`	string	No	—	Destination address or place name. Can also be a CSS selector (e.g., `#venue-name`) - the script will read the text content of that element.
`lat`	number	No	—	Latitude. Takes priority over `address`.
`lng`	number	No	—	Longitude.
`checkin`	string	No	—	Check-in date in `YYYY-MM-DD` format.
`checkout`	string	No	—	Check-out date in `YYYY-MM-DD` format.
`eventstart`	string	No	—	Event start date in `YYYY-MM-DD` format.
`eventend`	string	No	—	Event end date in `YYYY-MM-DD` format.
`adults`	number	No	—	Number of adult guests.
`venue`	string	No	—	Venue name. Displayed on the map.
`campaign`	string	No	—	Campaign ID. Auto-generated from page title + address if not set.
`markerimage`	string	No	—	Custom marker icon URL.
`navimage`	string	No	—	Custom navigation icon URL.

`displaySettings`

Parameter	Type	Required	Default	Description
`display`	string	Yes	—	Display mode: `onload_div`, `onload_popmodal`, `onclick_slidedown`, `onclick_popmodal`.
`a22mapQS`	string	No	`.a22map`	CSS selector for the container element.
`btnText`	string	No	`View Hotels`	Button text for `onclick_*` modes.
`btnClass`	string	No	—	Custom CSS class for the button.
`mapClass`	string	No	—	Custom CSS class for the map container.
`presentationText`	string	No	—	Text displayed above the map.
`mainColor`	string	No	`0069ed`	Primary color. Hex without `#`.
`margin`	object	No	—	Map container margins: `{ top, bottom, left, right }`.
`parentBlock`	string	No	—	CSS selector for multi-instance mode. Each matched element gets its own map.
`autoDropFirst`	boolean	No	`false`	Auto-open the first slide on load (`onclick_slidedown` only).

Insertion points

Instead of a22mapQS, you can use explicit insertion positions:

Parameter	Type	Required	Default	Description
`insert_beforebegin`	string	No	—	CSS selector. Map inserted before this element.
`insert_afterbegin`	string	No	—	CSS selector. Map inserted at the start of this element.
`insert_beforeend`	string	No	—	CSS selector. Map inserted at the end of this element.
`insert_afterend`	string	No	—	CSS selector. Map inserted after this element.

Multi-instance with `parentBlock`

The key feature for deploying maps at scale. It tells the script: "find every element matching this selector, and create a map for each one."

<div class="event-card">
  <h3>Concert at Bell Centre</h3>
  <div class="map-slot"></div>
</div>

<div class="event-card">
  <h3>Festival at Place des Arts</h3>
  <div class="map-slot"></div>
</div>

window.Stay22 = {
  mapParams: {
    aid: '<AID>',
    address: 'h3'
  },
  displaySettings: {
    display: 'onclick_slidedown',
    parentBlock: '.event-card',
    a22mapQS: '.map-slot',
    btnText: 'View Hotels'
  }
};

The script finds every .event-card, reads the <h3> text as the address, and creates a map in each .map-slot.

URL-specific overrides

Both mapParams and displaySettings support urlSpecs for per-page overrides:

mapParams: {
  aid: '<AID>',
  address: 'Default City',
  urlSpecs: {
    'example.com/festivals': {
      address: 'Parc Jean-Drapeau, Montreal'
    }
  }
}

Styling

`mainColor`

Sets the primary color for buttons and UI accents. Hex value without the # prefix:

mainColor: 'ff5a5f'   // Airbnb-ish red
mainColor: '0069ed'   // Stay22 blue (default)

Custom CSS classes

displaySettings: {
  btnClass: 'btn btn-primary btn-lg',
  mapClass: 'my-map-container'
}

Map dimensions

Default: width 100%, max height 380px. Override with CSS:

.s22-responsive-wrap {
  max-height: 500px;
}

.s22-responsive-wrap iframe {
  height: 500px;
}

If the modal appears behind sticky headers:

.s22-frametoggle {
  z-index: 10000;
}

Schema.org JSON-LD auto-detection

The script auto-detects event details from application/ld+json markup:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Event",
  "name": "Summer Concert",
  "startDate": "2026-08-15",
  "location": {
    "@type": "Place",
    "name": "Bell Centre",
    "geo": {
      "@type": "GeoCoordinates",
      "latitude": 45.4960,
      "longitude": -73.5693
    }
  }
}
</script>

If JSON-LD data is present and no address/lat/lng is set, the script uses it automatically.

Need help?

Actually, remember what we said at the top? You're on your own here. But if you're truly stuck, try slava@stay22.com - he might know what you're talking about.

Secrets

On this page