How to add distance (radius) search for directory items

May 18, 2014 9:17 pm

You incorporate a search into a custom module so that visitors can enter a zip code and a distance to locate items that are located within that radius. This search can simply list items within that radius, or with additional work, add Google mapping into the site.

To add a simple radius search to a custom module:

  1. In the Green interface, Toolbar module, turn on the Google module, if it is not already turned on.
  2. In the Green interface, Toolbar module, add a new custom module.
  3. On the custom module configuration page, select the Geocode the address field for radius searches (requires Google Account)" - Google account only require for Google maps checkbox.
  4. Create a custom module with the predefined address field.
  5. In the Green interface, switch to the Layouts module, Modules tab, and view the custom module layouts.
  6. Create or edit a search layout that you want to use for the radius search.
  7. In the first Output Method field, select "Radius - Select max distance from fields list, input is an address text box".
  8. In the first Fields list, enter the predefined search distances where the first value is the distance in miles and the second value is the displayed value that a visitor selects. For example:
  9. Change the output method for the first condition to "Radius - Select max distance from fields list, input is an address text box"
    10,10 miles
    50,50 miles
    100,100 miles
  10. In the HTML layout field, enter the html you want to use to display the search. Note that the displays the drop-down list where visitors select the distance and is the text field where the visitor enters a zip code. For example:

    <div class="searchradius">Search within of zip or postal code <input type="submit" name="submit" value="Search" /></div>

  11. Save the search layout.
  12. Insert the search layout in the appropriate custom module lister layout.
  13. In the Blue interface, make sure to add items with the addresses entered.
  14. Test the lister layout on the site.