Property Full Map

In the Zozonest plugin, the Property Full Map widget is a high-impact, immersive element that occupies the entire width (and often height) of a section. It is designed for “Geography-First” browsing, where users explore properties primarily by their physical location rather than a list.

1. Map Display & Source Settings

• Map Engine Selection: Choose between Google Maps (best for Street View and detailed styling) or OpenStreetMap/Leaflet (the privacy-friendly, free alternative).

• Initial Focus: Set the Default Latitude, Longitude, and Zoom Level. This ensures that when the page loads, the map is perfectly centered on your primary market (e.g., Downtown London).

• Map Styles: If using Google Maps, you can paste JSON styling code (from sites like Snazzy Maps) to turn the map into Dark Mode, Grayscale, or colors that match your brand.

2. Marker & Pin Customization

• Custom Pin Icons: Instead of a generic red pin, you can upload your own Brand Icon or use dynamic pins that display the Property Price directly on the map.

• Marker Clustering: A vital feature for high-inventory sites. It groups nearby properties into a single “Cluster” with a number (e.g., a circle showing “50”). Clicking the cluster automatically zooms in to separate them.

• Infobox/Popup Design: Customize the small window that pops up when a pin is clicked. It usually displays the property’s featured image, price, and title with a “View Details” link.

3. Interactive Navigation Features

• “Search as I Move”: When enabled, the map acts as a live filter. As the user drags the map to a new neighborhood, the system automatically fetches and displays properties for that new area.

• Geolocation (“Find My Location”): Adds a button that allows users to center the map on their current GPS position to find houses nearby.

• Full-Screen Toggle: Provides a button to expand the map to fill the user’s entire monitor, providing a distraction-free searching experience.

4. Integrated Overlay Filters

• Float Search Bar: You can choose to overlay a search bar or “Quick Filters” (e.g., Price, Type) directly on top of the map. This allows users to filter without the map reloading or disappearing.

• Result Count: A small floating badge that shows how many properties are currently visible in the map view.

5. Style & Mobile Behavior (Elementor)

• Height Control: Set a specific pixel height (e.g., $800px$) or use Viewport Height ($100vh$) to make the map fill the screen.

• Mobile Interaction: You can choose to disable “Mouse Wheel Zoom” on mobile to prevent users from getting “stuck” on the map while trying to scroll down the page.

• Typography: Style the text inside the Infobox popups to match your site’s fonts.