{"id":46286,"date":"2025-01-02T13:31:05","date_gmt":"2025-01-02T13:31:05","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=article&p=46286"},"modified":"2025-05-28T08:39:55","modified_gmt":"2025-05-28T08:39:55","slug":"how-to-update-map-listing-on-pan","status":"publish","type":"article","link":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-update-map-listing-on-pan\/","title":{"rendered":"How to Update Map Listing on Pan\/Zoom"},"content":{"rendered":"
<\/svg><\/div>
Things to know<\/div>

For this guide, we use a website built on a BaliRento dynamic template<\/a>.<\/p><\/div><\/div>\n\n\n\n

Filter Map Listing on Zoom<\/h2>\n\n\n\n
\n

First, we will describe how to apply Map Sync <\/strong>to the Map Listing <\/strong>widget\/block\/element so that whenever the map is moved, only the posts within the visible area will be displayed.<\/p>\n\n\n\n

Add Map Sync to a page\/template<\/h3>\n\n\n\n

Head to the page\/template editor you work with. In our case, it\u2019s Elementor.<\/p>\n\n\n\n

Add the Map Sync <\/strong>widget\/block\/element to the page and set the Query ID <\/strong>\u2014 the ID that will connect Map Sync <\/strong>with Map Listing<\/strong>.<\/p>\n\n\n\n

\"map<\/a><\/div>\n\n\n\n

Add the Map Listing <\/strong>widget\/block\/element to the page. <\/p>\n\n\n\n

Pick the Listing <\/strong>you built for the map beforehand and complete the Address Meta Field <\/strong>with the name of the meta field you use to store addresses.<\/p>\n\n\n\n

\"map<\/a><\/div>\n\n\n\n

Head to the Advanced <\/strong>settings tab. In the opened Layout <\/strong>section, find the CSS ID <\/strong>field and paste there value you entered in the Query ID <\/strong>field of the Map Sync <\/strong>widget\/block\/element before.<\/p>\n\n\n\n

\"map<\/a><\/div>\n\n\n\n

Now, when you make all the changes, you can publish the page.<\/p>\n\n\n\n

Check the front end<\/h3>\n\n\n\n

Open the just-built page.<\/p>\n\n\n\n

As you pan or zoom the map, the posts within the visible boundaries will be shown, while those outside will be hidden.<\/p>\n\n\n

<\/svg><\/div>
Things to know<\/div>

The center settings from the query will be overridden by this filter. As a result, the user will see posts that fall within the boundaries, regardless of the settings in the geocoding query.<\/p><\/div><\/div>\n\n\n\n

\"map<\/a><\/div>\n<\/div><\/div>\n\n\n\n

Filter Map Listing and Additional Providers on Zoom<\/h2>\n\n\n\n
\n

Now, let\u2019s check how to use Map Sync <\/strong>not only with Map Listing <\/strong>but also with other providers. <\/p>\n\n\n\n

In the described tutorial, we want to sync Map Listing <\/strong>with the Listing Grid,<\/strong> so depending on the zoomed area, the posts will be synched between these two widgets.<\/p>\n\n\n\n

Build a query<\/h3>\n\n\n\n
<\/svg><\/div>
Warning<\/div>

This feature now works only for posts.<\/p><\/div><\/div>\n\n\n\n

Head to WordPress Dashboard > JetEngine > Query Builder <\/em><\/strong>and press \u201cAdd New<\/strong>\u201d to build a new query<\/a>.<\/p>\n\n\n\n

Set the Name<\/strong>; for instance, in our case, it is \u201cProperties listing map query.\u201d<\/p>\n\n\n\n

Leave the default \u201cPosts Query<\/a>\u201d Query Type<\/strong> and head to the Posts Query <\/strong>section.<\/p>\n\n\n\n

Here, pick the Post Type<\/strong> you work with. In our case, we select the \u201cProperties\u201d Custom Post Type<\/strong><\/a>.<\/p>\n\n\n\n

\"posts<\/a><\/div>\n\n\n\n

Open the Geo Search<\/strong><\/a> <\/strong>tab. Here, pick the point on the displayed map to get values around it when you open the page.<\/p>\n\n\n\n

Then, complete the Address Field <\/strong>with the Name\/ID <\/strong>value <\/strong>of the meta field <\/strong>that stores the address. In our case, it\u2019s \u201c_address.\u201d<\/p>\n\n\n\n

Also, set the Distance <\/strong>and pick the desired Units<\/strong>.<\/p>\n\n\n\n

Press the \u201cAdd Query<\/strong>\u201d button.<\/p>\n\n\n\n

\"geo<\/a><\/div>\n\n\n
<\/svg><\/div>
Things to know<\/div>

If the meta field you work with has a \u201cText\u201d Field type<\/strong>, you should head to the WordPress Dashboard > JetEngine > Maps Settings<\/i><\/strong> tab and activate the Preload coordinates by address<\/strong> toggle. Then, add the needed value in the Meta fields to preload<\/strong> field.<\/p><\/div><\/div>\n\n\n\n

\"preload<\/a><\/div>\n<\/div><\/div>\n\n\n\n

Add Map Sync and additional provider to page\/template<\/h3>\n\n\n\n
\n

Head to the page\/template where you want to display the synchronized Listing Grid <\/strong>and Map Listing<\/strong>. <\/p>\n\n\n\n

This page\/template can be edited with Elementor, Gutenberg (Block editor,) or Bricks. In this case, we use Elementor, but the customization process will be the same for all mentioned builders.<\/p>\n\n\n\n

Place the Map Sync <\/strong>widget\/block\/element on the page.<\/p>\n\n\n\n

Set the Query ID<\/strong>, which will be later attached to the Map Listing<\/strong><\/a> <\/strong>widget. For instance, \u201cmap.\u201d<\/p>\n\n\n\n

Then, activate the Additional Providers Enabled <\/strong>toggle.<\/p>\n\n\n\n

\"map<\/a><\/div>\n\n\n\n

Pick the provider in the Additional Provider <\/strong>field. In this case, \u201cJetEngine.\u201d<\/p>\n\n\n\n

Also, set the Additional Query ID <\/strong>so it can be later attached to the Listing Grid<\/strong><\/a>. In our case, \u201clist.\u201d<\/p>\n\n\n\n

If more than one provider is needed, press the \u201cAdd Item<\/strong>\u201d button once again.<\/p>\n\n\n\n

\"additional<\/a><\/div>\n\n\n\n

Next, we add a two-column layout and place the Listing Grid <\/strong>widget in the first column. <\/p>\n\n\n\n

Pick the desired Listing<\/strong>. In this case, the \u201cProperties Listing Item\u201d option.<\/p>\n\n\n\n

We also set the Columns Number <\/strong>to \u201c1\u201d and move to the Custom Query <\/strong>tab.<\/p>\n\n\n\n

\"listing<\/a><\/div>\n\n\n\n

Activate the Use Custom Query <\/strong>toggle and pick the added query in the Custom Query <\/strong>dropdown.<\/p>\n\n\n\n

\"listing<\/a><\/div>\n\n\n\n

Open the Advanced <\/strong>tab of the widget settings. In the opened Layout <\/strong>sub-tab, complete the CSS ID <\/strong>field with the value you added to Map Sync<\/strong>\u2019s Map Listing ID <\/strong>field before. In this case, it\u2019s the \u201clist\u201d value.<\/p>\n\n\n\n

\"css<\/a><\/div>\n\n\n\n

Next, add the Map Listing <\/strong>widget to the page. Pick the Listing <\/strong>you want to display; in this case, it\u2019s the \u201cProperties Map Listing\u201d listing item.<\/p>\n\n\n\n

Also, complete the Address Meta Field <\/strong>with the meta field\u2019s Name\/ID <\/strong>value where the address is stored.<\/p>\n\n\n\n

We also change the Posts Number <\/strong>to \u201c20\u201d to display more points on the map.<\/p>\n\n\n\n

\"map<\/a><\/div>\n\n\n\n

Navigate to the Advanced <\/strong>tab and complete the CSS ID <\/strong>field with the value you added to Map Sync<\/strong>\u2019s Query ID <\/strong>field before.<\/p>\n\n\n\n

\"css<\/a><\/div>\n\n\n\n

Now, save the page by pressing the corresponding button.<\/p>\n<\/div><\/div>\n\n\n\n

Check the result<\/h3>\n\n\n\n
\n

Open the just-edited page on the front end. As you can observe, the Map Listing <\/strong>is centered according to the set query.<\/p>\n\n\n\n

It is not yet synced with the Listing Grid<\/strong>. The synchronization will work only when you move the map.<\/p>\n\n\n\n

\"map<\/a><\/div>\n\n\n\n

If you zoom in on a random place on the map, you will observe that the listing items will be filtered, and only those that are displayed on the Map Listing<\/strong> will be shown in the Listing Grid<\/strong>.<\/p>\n\n\n

<\/svg><\/div>
Things to know<\/div>

The Map Sync<\/strong> filtering results for various views (Listing Grid<\/strong>, Dynamic Calendar<\/strong><\/a>, Map Listing<\/strong>, Products Grid<\/strong><\/a>, Products List<\/strong><\/a>, etc.) always display posts within the boundaries selected on the map, while the filters applied to the map do not affect the display of results and do not exclude items from the Listing Grid<\/strong>, Dynamic Calendar<\/strong>, Map Listing<\/strong>, etc.<\/p><\/div><\/div>\n\n\n\n

\"map<\/a><\/div>\n\n\n
<\/svg><\/div>
Things to know<\/div>

If you apply the Location & Distance<\/strong><\/a> \/ User Geolocation<\/strong><\/a> filters on the page, they can not be used simultaneously with the Map Sync<\/strong>. Whenever you move the map, the Location & Distance<\/strong> \/ User Geolocation<\/strong> filters on the page reset.<\/p><\/div><\/div>\n<\/div><\/div>\n<\/div><\/div>\n\n\n\n

That\u2019s all; now you know how to sync the Listing Grid <\/strong>and Map Sync <\/strong>posts with the help of the Map Sync <\/strong>widget\/block\/element from the JetEngine <\/em>plugin for WordPress.<\/p>\n","protected":false},"excerpt":{"rendered":"

Discover how to sync Map Listing posts display with the Map Sync widget\/block\/element.<\/p>\n","protected":false},"author":9,"featured_media":0,"template":"","format":"standard","builder-category":[],"article-category":[396],"yoast_head":"\nHow to Update Map Listing on Pan\/Zoom \u2013 JetEngine | Crocoblock<\/title>\n<meta name=\"description\" content=\"Learn how to update Map Listing on pan\/zoom with the help of the Map Sync widget\/block\/element available with JetEngine for WordPress.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-update-map-listing-on-pan\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Update Map Listing on Pan\/Zoom \u2013 JetEngine | Crocoblock\" \/>\n<meta property=\"og:description\" content=\"Learn how to update Map Listing on pan\/zoom with the help of the Map Sync widget\/block\/element available with JetEngine for WordPress.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-update-map-listing-on-pan\/\" \/>\n<meta property=\"og:site_name\" content=\"Help Center\" \/>\n<meta property=\"article:modified_time\" content=\"2025-05-28T08:39:55+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/01\/map-sync-content-settings-1024x640.webp\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-update-map-listing-on-pan\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-update-map-listing-on-pan\/\",\"name\":\"How to Update Map Listing on Pan\/Zoom \u2013 JetEngine | Crocoblock\",\"isPartOf\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\"},\"datePublished\":\"2025-01-02T13:31:05+00:00\",\"dateModified\":\"2025-05-28T08:39:55+00:00\",\"description\":\"Learn how to update Map Listing on pan\/zoom with the help of the Map Sync widget\/block\/element available with JetEngine for WordPress.\",\"breadcrumb\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-update-map-listing-on-pan\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-update-map-listing-on-pan\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-update-map-listing-on-pan\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Articles\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/articles\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Update Map Listing on Pan\/Zoom\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"name\":\"Help Center\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\",\"name\":\"Help Center\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"contentUrl\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"caption\":\"Help Center\"},\"image\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Update Map Listing on Pan\/Zoom \u2013 JetEngine | Crocoblock","description":"Learn how to update Map Listing on pan\/zoom with the help of the Map Sync widget\/block\/element available with JetEngine for WordPress.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-update-map-listing-on-pan\/","og_locale":"en_US","og_type":"article","og_title":"How to Update Map Listing on Pan\/Zoom \u2013 JetEngine | Crocoblock","og_description":"Learn how to update Map Listing on pan\/zoom with the help of the Map Sync widget\/block\/element available with JetEngine for WordPress.","og_url":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-update-map-listing-on-pan\/","og_site_name":"Help Center","article_modified_time":"2025-05-28T08:39:55+00:00","og_image":[{"url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/01\/map-sync-content-settings-1024x640.webp"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-update-map-listing-on-pan\/","url":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-update-map-listing-on-pan\/","name":"How to Update Map Listing on Pan\/Zoom \u2013 JetEngine | Crocoblock","isPartOf":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#website"},"datePublished":"2025-01-02T13:31:05+00:00","dateModified":"2025-05-28T08:39:55+00:00","description":"Learn how to update Map Listing on pan\/zoom with the help of the Map Sync widget\/block\/element available with JetEngine for WordPress.","breadcrumb":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-update-map-listing-on-pan\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-update-map-listing-on-pan\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-update-map-listing-on-pan\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/crocoblock.com\/knowledge-base\/"},{"@type":"ListItem","position":2,"name":"Articles","item":"https:\/\/crocoblock.com\/knowledge-base\/articles\/"},{"@type":"ListItem","position":3,"name":"How to Update Map Listing on Pan\/Zoom"}]},{"@type":"WebSite","@id":"https:\/\/crocoblock.com\/knowledge-base\/#website","url":"https:\/\/crocoblock.com\/knowledge-base\/","name":"Help Center","description":"","publisher":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization","name":"Help Center","url":"https:\/\/crocoblock.com\/knowledge-base\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/","url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","contentUrl":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","caption":"Help Center"},"image":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article\/46286"}],"collection":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/types\/article"}],"author":[{"embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/users\/9"}],"wp:attachment":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/media?parent=46286"}],"wp:term":[{"taxonomy":"builder-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/builder-category?post=46286"},{"taxonomy":"article-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article-category?post=46286"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}