There are a few things we recommend when embedding a public map so your buyers have the best experience possible on both desktop browsers and mobile devices.
- Maps are loaded onto websites using an <iframe> tag. Width, Height, and other standard iframe tag options can be used.
- The recommended implementation to add styling is to add rules to a CSS file, and wrap a <div> with the set style around the <iframe> map tag.
HTTPS Websites
We only serve our maps securely over HTTPS. Please ensure that your website is HTTPS compatible otherwise you will receive an error and the map will not load.
Make Maps Full-Width
White-space should be avoided as it often takes up a large percent of screen space.
If a full width map isn't possible on the page, consider using a "View Full Size" button that opens the map directly in a new tab/window.
Example:
<div id="gmapdiv">
<iframe id="lwmap" src="https://ibsmaps.lotworks.ca/maps/ravenscrest/tsd/"
style="border: 0; width: 100%; height: 100%;"></iframe>
</div
Avoid Map Overlays
Overlays on the maps should be avoided as they can block interactive content in the map and prevent visitors from clicking on lots or contact links/buttons.
No Scrollbars
The map should be expanded to the bottom of the window without creating scrollbars on the screen. Interaction should be focused on panning the map versus scrolling content on the screen.
This can occasionally be difficult for web developers using stock responsive frameworks to implement as components are often auto-stacked and more content is handled with scrolling.
Scrollbars can be avoided on maps pages where all components besides the embed are hidden.
Comments
0 comments
Please sign in to leave a comment.