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 tutorial requirements:

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.

Create a Query

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

In the General Settings, type the query Name. As the Query Type, you can select “Posts Query,” “Terms Query,” “Users Query,” or “Custom Content Type Query,” according to the object that you want to filter.

query builder general settings

Scroll down and click on the Geo Search tab. There are such settings:

  • 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 in which the address is stored. Here you can specify the same fields as in the Preload option in the Map Settings (without a prefix, it is not necessary because 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);
select location
  • Distance. Enter the results radius;
  • Units. Select the measurement units:
    • Kilometers;
    • Miles.
distance and units

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

Add the Query to the Map Listing

Move to the page with the Map Listing widget or block and click to edit it.

That’s how the listing looks without query — it shows the whole map with all objects.

map listing without query

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 query name for the map from the drop-down list.

map listing custom query in elementor

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

map listing custom query in gutenberg

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

map listing shows results according to the radius in query

Create the User Geolocation Filter

Go to the Smart Filters > Add New tab.

Type the filter name and labels, select the “User Geolocation” Filter Type, and enter any value in the Query Variable field (this field is not required for the User Geolocation filter, but you cannot save the filter settings if this field is empty).

Then, press the “Publish/Update button.

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

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

user geolocation filter in elementor editor

In the Gutenberg editor, the settings are the same.

user geolocation filter in Gutenberg editor

Check the Results

When you’re done, update the page and open it on the front end.

All users, who visit the page with the filter for the first time, will see the notification that asks for permission to see their geolocation.

user geolocation filter notification

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 are filtered depending on their location.

map listing shows results according to user location

That’s all. You now 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?

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.