Property Half Map

In the Zozonest plugin, the Property Half Map widget is a “split-screen” layout that offers a highly modern, interactive search experience. It mimics the functionality of top-tier platforms like Airbnb or Zillow, where an interactive map sits on one side and a list of properties sits on the other.

As the user moves the map or changes filters, the property list updates in real-time.

1. Core Layout & Structure

• Map Position: Choose whether the map appears on the Left or the Right side of the screen.

• Map Width: Adjust the percentage of the screen the map occupies (usually $50\%$ for a perfect split, but can be adjusted to $40\%$ or $60\%$).

• Mobile Behavior: Define how the widget looks on phones. Typically, it provides a toggle button to switch between “Map View” and “List View,” as showing both side-by-side is difficult on small screens.

2. Map Functionality & Markers

• Map Source: Choose between Google Maps (requires an API key) or OpenStreetMap (free/no key needed).

• Initial Zoom & Center: Set the default starting point of the map (e.g., centered on New York at zoom level 12).

• Cluster Markers: If you have many properties in one area, this grouping feature turns them into a single circle with a number (e.g., “15”). Clicking it zooms in to reveal the individual houses.

• InfoWindow/Popup: Customize what appears when a user clicks a pin on the map (usually a small thumbnail, the price, and a link).

3. Listing List & Query

• Listing Style: Choose the “Skin” for the property cards that appear in the scrollable list (e.g., List view vs. Grid view).

• Ajax Loading: As the user drags the map, the list automatically refreshes to show only the properties visible in the current map window (“Search as I move the map”).

• Items per Page: Define how many properties load in the side panel before a “Load More” or pagination appears.

4. Integrated Search & Filters

• Top Bar Filters: You can enable a horizontal filter bar at the top of the widget so users can refine results (Price, Beds, Type) without leaving the map view.

• Sort Options: Allow users to sort the list by “Newest,” “Price: Low to High,” etc., directly within the widget.

5. Style & Customization (Elementor)

• Map Styles: If using Google Maps, you can apply custom “Snazzy Maps” styles (e.g., Dark Mode, Silver, or Retro) to match your website’s aesthetic.

• Scrollbar Styling: Customize the look of the scrollbar for the property list side.

• Typography & Colors: Standard Elementor controls for the text, buttons, and prices within the property cards.