14500+ website owners are using this wordpress map plugin

Buy Now - $89

Topic: Filters

In our WP MAPS PRO plugin version 5.0, we have introduced a new feature where a user can able to filter the locations directly from the URL.

Step 1: Please Go to the Manage Maps page, Now Add/Edit Map and scroll down to the URL Filters Settings section.

Please switch on the Enable URL Filter.

How to do URL Filter in maps plugin

Step 2: Click on Save Map and You are done.

Now Go to the frontend page where the map is located and pass the parameter with the query string in the URL. Below Mentioned Query Parameters, you can pass along with the URL

search, category, limit, perpage, show_all_locations=true, zoom, hide_map=true, map_only=true

Examples:

1.) Search Filter: Filter the locations by matching the search text from the URL

Example: https://www.wpmapspro.com/example/filter-by-category-in-google-maps/?search=american

2.) URL Category Filter: Filter the category direct from the URL

Example: https://www.wpmapspro.com/example/filter-by-category-in-google-maps/?category=beaches

3.) URL Zoom Filter: You can change the zoom of the map using a Zoom URL filter.

Example: https://www.wpmapspro.com/example/filter-by-category-in-google-maps/?zoom=1

4.) URL Per Page Filter: Display # of Locations per page.

Example: https://www.wpmapspro.com/example/a-complete-listing-solution-for-google-maps/?perpage=3

5.) Hide Map Filter: You can hide the map using the URL Filter parameter ‘hide_map= true’.

Example: https://www.wpmapspro.com/example/a-complete-listing-solution-for-google-maps/?hide_map=true

6.) Map’s Only URL Filter: To show only maps. Tabs, filters, and listings will be hidden.

Example: https://www.wpmapspro.com/example/a-complete-listing-solution-for-google-maps/?maps_only=true

In WP Maps Pro, you have the ability to create custom filters that allow users to dynamically refine the displayed locations on Google Maps. These filters provide a powerful tool for enhancing user experience and improving the relevance of map-based content. In this tutorial, we’ll walk through the process of creating custom filters step by step, enabling you to effortlessly add this valuable feature to your maps.

Prerequisites:

  • WP Maps Pro plugin installed and activated on your WordPress site.
  • Locations already assigned to a map in the “Assign Locations To Map” section.

Step 1: Enable Custom Filters

  1. Go to Add/Manage Map:
    • Navigate to the “Add/Manage Map” section in WP Maps Pro.
  2. Edit the Desired Map:
    • Choose the map for which you want to enable custom filters.
    • Edit the map to access its settings.

Step 2: Assign Locations

  1. Assign Locations:
    • In the map editing interface, locate the “Assign Locations To Map” section.
    • Select the locations you want to display on the map.

Step 3: Enable Custom Filters

Custom Filters in Google Maps
Custom Filters in Google Maps
  1. Scroll Down:
    • Scroll down within the map editing interface to find the “Custom Filters” section.
  2. Enable Custom Filters:
    • Look for the “Display Custom Filters” option within this section.
    • Toggle it ON to enable custom filters for this map.

Step 4: Define Placeholders and Filter Labels

  1. Insert Placeholders:
    • In the same “Custom Filters” section, locate the text input fields.
    • Use placeholders like {country}, {state}, {city}, or any other relevant placeholders.
    • These placeholders correspond to the fields you want to use for filtering (e.g., location country, state, city).
  2. Set Filter Labels:
    • In the adjacent text input fields, insert the filter labels.
    • These labels will be displayed to users on the frontend, allowing them to understand the purpose of each filter.

Step 5: Save Map

  1. Save Changes:
    • Once you’ve added the placeholders and set the filter labels, scroll to the bottom of the map editing interface.
    • Click the “Save Map” button to save your changes.

Step 6: Observe Custom Filters on Frontend

  1. View the Map:
    • Visit the frontend page where the map is displayed.
  2. Explore Custom Filters:
    • You’ll now see the custom filters you created on the map.
    • Users can interact with these filters, refining the displayed locations based on the selected filter criteria.

Conclusion:

Congratulations! By following this tutorial, you’ve successfully created custom filters for your WP Maps Pro maps. These filters provide users with a convenient way to tailor the map’s content to their preferences, enhancing the usability and relevance of your map-based content. Experiment with different placeholders and filter labels to optimize the user experience, and enjoy the benefits of a more interactive map!

Before displaying categories in Tabs make sure you create and assign categories to the locations(Which locations are assigned to map).

To display the category tab you can follow the below steps :

Step 1 Go to Manage maps, Now Add/Edit Map, and scroll down to the Tabs Settings section.

Step 2 Enable the Display Tabs and Display Categories Tab options inside the Display Tabs.

How to display categories in Tabs Wpmapspro

Step 3 Click on Save Map and see the tab on the frontend map page.

Now you’ll see the category tab on the map in the right top corner.

Display Category Tab on google maps wpmapspro

Before displaying the search Form, category sorting filter, and Radius filter first you need to display listings below the map. Previously we have seen tutorial Display listings below the map. Refer to How to Display listings below the map.

In this tutorial, we will use a search form, category sorting filter, and Radius filter.

Search Form

Search Form is used to search any location and display it on a map.

Step 1 Enable the Display Search Form option in the Listing Settings section as below.

then you’ll see the search field below the map on the front end.

Step 2 Enter a search location into the search box. Search results will appear automatically in listing the location’s Filters as you type.

Category Sorting Filter

Sort locations by title, category name, or address, alphabetically, in both ascending and descending order.

Step 1 In the Listing Settings section enable the Display Category Filter option and also enable the Display Sorting Filter tab.

Step 2 Move to the browser and select any category and sorting filter from the listing. You’ll see a location display according to your category sorting. (See image)

Radius Filter

Mapping for single points on a map and filtering within a specific mile radius.

Step 1 Enable the Display Radius Filter option in the Listing Settings section.

Dimension: Dimension is the unit of distance, you can choose kilometers, or miles. The calculator will immediately calculate with the selected distance unit.
Radius Options: You can use this tool to find the radius around a point on the map.

Step 2 You can create as many radius using the comma(,). Then you’ll see the radius dropdown below the map on the front end.

Miscellaneous Options

You can display sorting, switch between grid & list view, and print listing options as well. If you tick all of them, it will give you an all-in-one solution.

then you’ll see awesome locations listing, with filters, below the map on the front end.

Install Plugin Now!

This plugin is exclusively available at codecanyon.net. You'll get free updates and full support to use this plugin.