You can show the results of a custom search on your map. Results can be filtered and updated in real time as you change your search parameters.

It is possible to display multiple markers on a single map but sometimes you want to filter out the results. You can create a View that uses one or more filters to get the content that you needed. A similar principle can be used when you want to display custom search results on a map. We are going to take a look at one simple example.

You can use our Toolset Reference Directory website to easily test how to display custom search results on a map.

We have a directory website that lists classic cars that are being sold at different locations. We are using custom post type with custom fields to store all the necessary data. Custom field Advertiser location holds the address of the seller.

Custom field with location
Custom field with location

To display listings based on custom search options do the following:

  1. Create a new View that uses front-end filters. When creating a View it is necessary to select Display the results as a custom search option. Be sure to check AJAX results update when visitors change any filter values option within the Custom Search Settings section. This will allow users to change their search results without the need to click on the search button. As soon as they change search parameters a map will be updated.
  2. In the Search and Pagination section click the New filter button and add as many filters as you need. In the Loop editor do not forget to add map field to your Loop.

Add map to Loop editor

  1. Add your map markers to Templates for this View section and you can assign your view to a page. To do this, click the Fields and Views button and then the Marker button in the Toolset Maps section. Make sure to use the correct map ID.

Depending on your styling settings your final result could look something like this.

Results of custom search on a map
Results of custom search on a map