Uploaded January 2025 | Updated September 2026, 3 days ago
Learn how to build an interactive map + listing grid layout in Bricks Builder using JetEngine and JetSmartFilters. In this step‑by‑step tutorial, Andrew shows how to create custom posts and listing templates in Bricks (loop‑style cards), connect them to a Map Listing, and then apply search, range, checkbox, and geolocation filters that update both the map and the listing grid at the same time.
JetEngine provides the dynamic data layer (custom post types, meta fields, queries, map coordinates), while JetSmartFilters powers proximity search, meta‑based filters, taxonomy filters, and geolocation. Bricks Builder is used as the front‑end builder, so you can design your map layouts and loop cards visually while still using the same JetEngine data and filters you already know from Elementor or Gutenberg.
✅ What you'll learn
• How to enable JetEngine Map Listings and connect a map provider
• How to create Bricks listings (loop templates) for map markers and grid cards
• How to add a Map Listing element and a Listing Grid in Bricks and sync them
• How to build search and range filters for text and numeric meta fields
• How to create a custom Geo‑Search query and apply it to both map and grid
• How to use location‑based filters (address + radius, user geolocation)
• How to add checkbox filters with indexers, active filters, and reset buttons
This setup is perfect for local directories, event maps, real estate, or any Bricks‑based site where users need to explore locations on a map and see more details in loop cards.
📄 Docs & guides
Map Listing overview:
out.crocoblock.com/4jm82QQ
JetEngine + Bricks tutorials (dynamic data & listings):
youtube.com/playlist?list=PL26jaHWVtLFwS079W__MX0SJLr6jprWYZ
JetSmartFilters overview & filter types:
crocoblock.com/plugins/jetsmartfilters
Dynamic WordPress sites with JetEngine
crocoblock.com/solution/dynamic
___________
💬 Add messaging to Bricks‑based directories (optional)
If your Bricks + JetEngine map is used as a directory or marketplace, you can add private messaging with JetMessenger. Visitors can find locations on the map, open a listing card built in Bricks, and start a direct conversation with the owner or vendor — all inside WordPress.
This turns your Bricks map listings into a full local platform: map + filters + loop cards + messaging.
► Get JetMessenger:
out.crocoblock.com/4wN9mD1
__________
Q: Can I show the same filtered posts on both a map and a listing grid?
A: Yes. Filters are connected to both the Map Listing and the Listing Grid as providers, so search, range, checkbox, and location filters update markers and loop cards at the same time.
Q: Do I need custom code for Geo‑Search and geolocation?
A: No. Geo‑Search is configured in a JetEngine Query Builder query, and geolocation is handled via JetSmartFilters’ distance and user location filters, which you connect to JetEngine Maps as the provider.
Q: What kind of websites benefit most from this setup?
A: Local business directories, event maps, real estate, service locators, or any Bricks‑based project where you want users to explore by map and refine results with structured filters.
Q: How does this affect performance on bigger datasets?
A: JetEngine queries and JetSmartFilters indexers are designed to work with large sets of posts and metadata; you can combine them with caching and performance‑oriented setups for data‑heavy maps and listings.
► TIMESTAMPS
00:00 Introduction
00:38 Setting Up JetSmartFilters, Maps Module, and Bricks Configuration
01:19 Custom Posts and Listings Overview
02:04 Exploring Filter Options
03:52 Adding Listings Elements to a Bricks Layout
06:08 Configuring Search and Range Filters
09:22 Creating and Applying a Custom Geo‑Search Query
11:52 Setting Up Geolocation Filter Elements
13:31 Using Checkbox Filter Widgets
15:00 Managing Active Filters and Reset Options
15:50 Testing Map Listings with Filters in Bricks
19:48 Wrap‑Up and Conclusion
---------------
► Get JetEngine:
out.crocoblock.com/4jmPAHu
► Get JetSmartFilters:
out.crocoblock.com/4gWPXab
► Choose Crocoblock subscription:
out.crocoblock.com/3PGFdkm
Watch related videos:
◎ JetEngine Tutorials
👉 youtube.com/playlist?list=PL26jaHWVtLFxD1yBmvWTqGbKckit4Ochc
◎ JetSmartFilters Tutorials
👉 youtube.com/playlist?list=PL26jaHWVtLFxxFyQwSzH_481qYg6eeRnH
◎ JetPlugins for Bricks Builder: The Ultimate Series
👉 youtube.com/playlist?list=PL26jaHWVtLFwS079W__MX0SJLr6jprWYZ
#JetEngine #JetSmartFilters #BricksBuilder #MapListings #GeoSearch #Crocoblock
Join us here:
► FB Community: facebook.com/groups/CrocoblockCommunity
► Facebook: facebook.com/crocoblock
► Twitter: twitter.com/mrcrocoblock
► Instagram: instagram.com/crocoblock
► LinkedIn: linkedin.com/company/crocoblock
Learn how to build an interactive map + listing grid layout in Bricks Builder using JetEngine and JetSmartFilters. In this step‑by‑step tutorial, Andrew shows how to create custom posts and listing templates in Bricks (loop‑style cards), connect them to a Map Listing, and then apply search, range, checkbox, and geolocation filters that update both the map and the listing grid at the same time.
JetEngine provides the dynamic data layer (custom post types, meta fields, queries, map coordinates), while JetSmartFilters powers proximity search, meta‑based filters, taxonomy filters, and geolocation. Bricks Builder is used as the front‑end builder, so you can design your map layouts and loop cards visually while still using the same JetEngine data and filters you already know from Elementor or Gutenberg.
✅ What you'll learn
• How to enable JetEngine Map Listings and connect a map provider
• How to create Bricks listings (loop templates) for map markers and grid cards
• How to add a Map Listing element and a Listing Grid in Bricks and sync them
• How to build search and range filters for text and numeric meta fields
• How to create a custom Geo‑Search query and apply it to both map and grid
• How to use location‑based filters (address + radius, user geolocation)
• How to add checkbox filters with indexers, active filters, and reset buttons
This setup is perfect for local directories, event maps, real estate, or any Bricks‑based site where users need to explore locations on a map and see more details in loop cards.
📄 Docs & guides
Map Listing overview:
out.crocoblock.com/4jm82QQ
JetEngine + Bricks tutorials (dynamic data & listings):
youtube.com/playlist?list=PL26jaHWVtLFwS079W__MX0SJLr6jprWYZ
JetSmartFilters overview & filter types:
crocoblock.com/plugins/jetsmartfilters
Dynamic WordPress sites with JetEngine
crocoblock.com/solution/dynamic
___________
💬 Add messaging to Bricks‑based directories (optional)
If your Bricks + JetEngine map is used as a directory or marketplace, you can add private messaging with JetMessenger. Visitors can find locations on the map, open a listing card built in Bricks, and start a direct conversation with the owner or vendor — all inside WordPress.
This turns your Bricks map listings into a full local platform: map + filters + loop cards + messaging.
► Get JetMessenger:
out.crocoblock.com/4wN9mD1
__________
Q: Can I show the same filtered posts on both a map and a listing grid?
A: Yes. Filters are connected to both the Map Listing and the Listing Grid as providers, so search, range, checkbox, and location filters update markers and loop cards at the same time.
Q: Do I need custom code for Geo‑Search and geolocation?
A: No. Geo‑Search is configured in a JetEngine Query Builder query, and geolocation is handled via JetSmartFilters’ distance and user location filters, which you connect to JetEngine Maps as the provider.
Q: What kind of websites benefit most from this setup?
A: Local business directories, event maps, real estate, service locators, or any Bricks‑based project where you want users to explore by map and refine results with structured filters.
Q: How does this affect performance on bigger datasets?
A: JetEngine queries and JetSmartFilters indexers are designed to work with large sets of posts and metadata; you can combine them with caching and performance‑oriented setups for data‑heavy maps and listings.
► TIMESTAMPS
00:00 Introduction
00:38 Setting Up JetSmartFilters, Maps Module, and Bricks Configuration
01:19 Custom Posts and Listings Overview
02:04 Exploring Filter Options
03:52 Adding Listings Elements to a Bricks Layout
06:08 Configuring Search and Range Filters
09:22 Creating and Applying a Custom Geo‑Search Query
11:52 Setting Up Geolocation Filter Elements
13:31 Using Checkbox Filter Widgets
15:00 Managing Active Filters and Reset Options
15:50 Testing Map Listings with Filters in Bricks
19:48 Wrap‑Up and Conclusion
---------------
► Get JetEngine:
out.crocoblock.com/4jmPAHu
► Get JetSmartFilters:
out.crocoblock.com/4gWPXab
► Choose Crocoblock subscription:
out.crocoblock.com/3PGFdkm
Watch related videos:
◎ JetEngine Tutorials
👉 youtube.com/playlist?list=PL26jaHWVtLFxD1yBmvWTqGbKckit4Ochc
◎ JetSmartFilters Tutorials
👉 youtube.com/playlist?list=PL26jaHWVtLFxxFyQwSzH_481qYg6eeRnH
◎ JetPlugins for Bricks Builder: The Ultimate Series
👉 youtube.com/playlist?list=PL26jaHWVtLFwS079W__MX0SJLr6jprWYZ
#JetEngine #JetSmartFilters #BricksBuilder #MapListings #GeoSearch #Crocoblock
Join us here:
► FB Community: facebook.com/groups/CrocoblockCommunity
► Facebook: facebook.com/crocoblock
► Twitter: twitter.com/mrcrocoblock
► Instagram: instagram.com/crocoblock
► LinkedIn: linkedin.com/company/crocoblock
