Multiple maps on a single page are not permitted; based on the design of parent themes Google Maps integration.
Therefore, the below maps will render a spinning grey circle, nothing more.
Example 2 – “Normal” contained layout
Normally the page is contained, as can be seen, the shortcode cannot render itself full-width inside a container
// shortcode used: ⟦ advanced-search fullwidth=0⟧
Example 3 – Contained but forced full
We are still within the normal contained page layout.
However now we will use the “fullwidth=1” flag on the shortcode, which uses some fancy CSS to force itself full-width.
The shortcode also has a “bgcolor=#efefef ” flag set, for handling the background coloring (if desired).
So the available options are:
- fullwidth = 1 // default is now ‘1’. set to ‘0’ to keep it in current container
- bgcolor = #<hexcode> || literal color
- fontcolor = #<hexcode> || literal color
// default off. set to ‘1’ to apply the bgcolor and fontoclor to the advanced search bar
// (make container background match advanced bar)
- applystyletosearch = 0
// apply padding on vertical aspect (top/bottom). 40 or 60 px is what is generally used. Affix is required (“60px” ; not “60”).
- vpadding = 0px
- showmap = 1 // default is 1, shows map right below it. set to 0 to disable map output.
- mapfilter = “” // default is empty string, meaning it’ll attain the most recent 10 (page size) listings. It’s not a live-map.
- nopaging = 0 // default is off. ‘1’ enables showing all listings on map output.
// shortcode used: ⟦ advanced-search bgcolor=#efefef fontcolor=white vpadding=60px nopaging=1 ⟧
As can be seen by this text, the page continues within the container block, but the rendered shortcode forces itself out of bounds.
Example 4 – map only
There’s also now a map-only shortcode using the same features as above.
// shortcode used: ⟦ listings-map⟧