Map View for listings grid

Local directories often list real-life businesses. Some cases make it better for end-users to see locations on a map instead of a text list. This also helps to “find <item> near me” cases.

Something close to these:

Implementation

Listing Form

• The address field should get a “drop a pin on a map” button.

  • If a user didn’t drop a pin, lat & lng are retrieved by address

  • Otherwise, use the dropped pin regardless of the address relevance

Search Field in the Hero section

• The search bar should get the category selector (let’s treat the primary category as a location category)

• If the category is not selected, ask a user for a location (via browser APIs)

Map View Page

• Should display the relevant listings according to the selected location (if any)

• Should display a filter bar on the top (similarly to listing grid)

• If the category is not selected, ask a user for a location (via browser APIs)

When a user is allowed to get a location - fetch the “closest” listing, and set the category accordingly to this information (to avoid adding the “address” field to categories).