Articles in this section

Mobile-Friendly Maps

Displaying maps on mobile devices has it's own challenges to present the viewer with the best possible experience and ease in accessing information. There are also some best practice ways to achieve this:

Full Width Maps

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.

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.

Standard Features

Public Maps include many additional features that improve the user experience when viewing the maps on mobile devices.

Side-Panel Info Window

Instead of opening as a pop-up when a lot is clicked, this opens the info window in a side-panel configuration. Opening as a side-panel improves the use of space on mobile devices, and the ease-of-access to information on the lot. Links (email, phone, register, etc.) are also easier to select in this mode.

Resize Map Changes

Once a public map falls below set width threshold, features on the map (Legend, other buttons and features) are hidden to improve the map view.

CTRL-Scroll and Gesture Controls

LotWorks Maps are always updated and use the latest Google Maps framework. Both gesture controls (pinch, grab, drag) and CTRL-scroll controls are enabled by default on Public Maps.