September 27, 2023

Show Events Near User Location on Google Maps with Elementor, JetEngine & JetSmartFilters

Play Video

In this tutorial, you will learn how to show events near user location on Google Maps using a combination of Elementor, JetEngine, and JetSmartFilters. This feature is incredibly useful for websites that host events, workshops, or any location-specific activities. You’ll be able to set up a dynamic map that adjusts based on where your website visitor is located.


To ensure a smooth process, make sure you have:

  1. Installed and activated the Elementor, JetEngine, and JetSmartFilters plugins.
  2. Enabled the Map listing module in JetEngine.
  3. Set up Google Maps API for geolocation services.

Crafting the Map Query

  1. Navigate to JetEngine > Query Builder > Add New.
  2. Name your query. For this tutorial, we’ll use “Map Query”.
  3. Set the query type to “Post Query” and select your post type (e.g., “Events”).
  4. Under the Geo Search section, input your desired location. For demonstration purposes, we used Toronto.
  5. Under Address Field fill in the name/ID of your custom post type (CPT) address field.
  6. Specify the distance (radius) for which events should be displayed. For instance, setting it to 1000 kilometers will show events within that radius from Toronto.

Designing the Event Listing

  1. Create a listing template for your events or custom post type (CPT).
  2. Use Elementor to design a simple template that includes the event date, title, location, and organizer.
  3. Ensure you have a meta field named “_address” (or however you named your address field) to store event locations.

Displaying the Map on a Page

  1. Create a new page and title it “Map”.
  2. Use Elementor to drag and drop the Map Listing widget onto the page.
  3. Select your event listing and set the address meta field to “_address”.
  4. Enable custom queries and select the “Map Query” you created earlier.

Implementing User Geolocation with JetSmartFilters

  1. Go to JetSmartFilters and click Add New.
  2. Name the filter “User Geolocation”.
  3. Select User Geolocation as the filter type.
  4. Assign this filter to JetEngine Maps.
  5. Return to your “Map” page in Elementor and add the User Geolocation widget.
  6. Link this widget to the “User Geolocation” filter you just created.

Now, when a user visits your map page, they’ll be prompted to share their location. Once they do, the map will automatically adjust to show events near them!

Show Events Near User Location on Google Maps – Conclusion

With the combination of Elementor, JetEngine, and JetSmartFilters, creating a dynamic map that showcases events near a user’s location becomes a breeze. This feature not only enhances user experience but also increases the likelihood of them attending an event. So, gear up and integrate this fantastic feature into your WordPress site!

Required Resources

JetSmartFilters Logo
Payment required
JetEngine Logo
Payment required
Elementor Logo
Free Options
Credit to Crocoblock
Crocoblock is a YouTube channel dedicated to providing tutorials, tips, and insights on WordPress and web design. With a focus on the Crocoblock suite of plugins and themes, the channel offers valuable content for WordPress enthusiasts, developers, and designers looking to enhance their skills and create websites with their tools. Through step-by-step tutorials, product overviews, and expert advice, Crocoblock helps its audience master the art of WordPress website building and customization.
Show Events Near User Location on Google Maps with Elementor, JetEngine & JetSmartFilters
Welcome back!
Enter your Helwp credentials to sign in.

No Account yet? Sign Up

My Account
Give Feedback
Describe your feedback *
Rate Helwp
Problem *
Describe the problem
Want us to reply?
Your E-Mail
Affiliate Disclosure

At Helwp, we’re committed to transparency and honesty. Therefore, we want to inform you that some of the links on our website are affiliate links. This means that, at no additional cost to you, we may earn a small commission if you click through and make a purchase.

We only promote products or services that we genuinely believe in. These affiliate commissions help us to maintain the website and continue to provide you with free, high-quality WordPress content.

If you are interested in how you can support us even further, check out our support page.