Help Center
How to Set Geo Search Based on User Geolocation

How to Set Geo Search Based on User Geolocation

Learn how to set geo search on the WordPress website based on User geolocation via the JetEngine Query Builder tool and the User Geolocation widget/block from the JetSmartFilters plugin.

Before you start, check the tutorial requirements:

  • Elementor (Free version) or Block editor (Gutenberg)

  • JetEngine plugin installed and activated with the "Address" meta field created

  • JetSmartFilters plugin installed and activated

This feature for WordPress shows posts, terms, users, or CCT items within a given location radius of the users who visited the site if they allow sharing geolocation. You can set it via the JetEngine Query Builder tool and JetSmartFilters User Geolocation widget/block.

Activate a Maps Listings Module

Initially, make sure that you have activated the Maps Listings module. Otherwise, some of the setting options will not be available. 

This module can be activated by following the WordPress Dashboard > JetEngine > JetEngine path and opening the Modules tab. Then, enable the Maps Listings toggle and press the “Save” button.

jetengine modules tab

Create a Query

Navigate to the WordPress Dashboard > JetEngine > Query Builder tab on the WordPress Dashboard and hit the “Add New tab.

In the General Settings, type the query Name value. In the Query Type field, you can select “Posts Query,” “Terms Query,” “Users Query,” or “Custom Content Type Query” according to the object that you want to filter. These query types support the geo search.

After we selected the “Posts Query” Query Type, in the following General section, we filled in the Post Type and the Post Status fields.

general tab in query settings

Open the Geo Search tab to adjust such settings:

geo search tab in query settings
  • Select location — select the point on the map, and it will be the center of the query radius if users don’t allow access to their geolocation;
  • Address Field — enter the name of the post, term, user, or CCT meta fields with the address. Here, you can specify the same fields as in the Meta fields to preload option in the Maps Settings (without a prefix, as the query type is already selected in advance), a field of the “Map” type, or comma-separated fields in which latitude and longitude are stored (in separate fields);
  • Distance — enter the desired radius for the search results;
  • Units — select the measurement units: “Kilometers” or “Miles.”

When you finish, push the “Add/Update Query” button.

Add the Query to the Map Listing

Move to the  Elementor/Block Editor page with the Map Listing widget or block and click to edit it.

Without a query, the listing shows the entire map with all objects.

map listing general section in elementor

If you work with the Elementor editor, open the Map Listing widget, proceed to the Custom Query tab, enable the Use Custom Query toggle, and select the Custom Query name for the map from the drop-down list.

map listing custom query tab in elementor

The Map Listing block has the same settings in the Gutenberg editor.

map listing custom query tab in gutenberg

With the query, the Map Listing shows locations according to the static point in the center of the defined radius.

map listing on the front end

Create the User Geolocation Filter

Go to the WordPress Dashboard > Smart Filters > Add New tab.

Type the Filter Name, select the “User Geolocation” Filter Type, and complete the Field Label and Active Field Label fields.

Then, press the “Update button.

user geolocation filter settings

Place the User Geolocation widget or block onto the page containing Map Listing.

Select the newly created filter in the corresponding field and pick the “JetEngine Maps” option in the This filter for field.

user geolocation filter widget in elementor

In the Gutenberg editor, the settings are the same.

user geolocation filter in gutenberg

Check the Results

After finishing, update the page and open it on the front end.

All users visiting the page with the filter for the first time will see the notification asking permission to access their geolocation.

Users who click the “Block” button will see the results around the point selected in the query settings, as we showed in the second step.

If users hit the “Allow button, the objects on the map will be filtered depending on their location.

user geolocation result

That’s all. Now you know how to set the static point on the map with the JetEngine Query Builder and geo search based on user geolocation with the JetSmartFilters plugin.

Was this article helpful?
YesNo

Need help?

Ask Facebook community

Get answers from 22K Crocoblock Community experts from all over the world.

Start a live chat

Ask question to support agent and share its details via chat messages.