How to build a Gravity Forms geolocation directory

Gravity Forms can collect addresses, but it can’t show them on a map.

In this tutorial, I’ll show you how to build a business directory that plots every listing on a Google Map, using Gravity Forms and the GravityView Maps layout. Visitors can enter an address and a distance to find listings near them.

Sneak peek

Here’s the finished directory on the front end:

Visitors can search for businesses within a set distance of any address, and each listing appears as a marker on the map.

What you’ll need

• Gravity Forms – collects each listing through a sign-up form, including the business address.
• GravityView Pro – displays the listings on your site and includes the Maps layout, which plots them on a Google Map.

What does “geolocation” mean?

Geolocation means working out where something is on a map. In a directory, that means turning each listing’s street address into map coordinates so it can appear as a marker.

What is a geolocation directory?

A geolocation directory is a web application that lists people, businesses, or services along with where they are, so visitors can find what’s nearby.

For example, a geolocation directory could help someone:

• Find a nearby ice cream shop
• Find apartments to rent in Manhattan
• Locate a dog park near you
• Find the closest hardware store

Here’s how to build one with Gravity Forms and GravityView.

Building a Gravity Forms geolocation directory

We’ll use the GravityView Maps layout, which shows Gravity Forms entries as markers on a Google Map.

When someone submits the form, GravityView turns their address into map coordinates (this is called geocoding) and shows it as a marker on an interactive Google Map.

Let’s get started!

Install GravityView

First, you’ll need GravityView Pro. If you don’t have a license yet, you can buy one on our pricing page.

Pro tipThe Maps layout is included with GravityView Pro and the All Access Pass.

Log in to your GravityKit account, open the Downloads tab and click Download Plugin next to GravityView. Then install it on your site:

• In WordPress, hover over Plugins and click Add New Plugin
• Click Upload Plugin, then Choose File, and select the GravityView ZIP file
• Click Install Now, then Activate Plugin

Finally, hover over GravityKit, click Manage Your Kit, and activate your license key. Our docs cover installing GravityView step by step.

Install the Maps layout

Next, install the Maps layout. On the same Manage Your Kit screen, find Maps Premium View (the Maps layout’s name in the list) and click Install.

Maps also needs a Google Maps API key, which lets it show maps and geocode addresses. Follow our guide to getting a Google Maps API key, then add it by hovering over GravityKit, clicking Settings, and opening the GravityView Maps tab.

Create a directory listing form

For this example, we’ll build a local business directory, starting with the form business owners use to add their listing.

To create a new form, we’ll hover over Forms and click New Form. After giving the form a title, we’ll add fields in the Gravity Forms visual form builder.

Your form needs an Address field, because that’s what GravityView uses to place each listing on the map. You’ll find it under Advanced Fields on the right.

Pro tipIn the Address field settings, check “Enable GravityView Maps geolocation autocomplete”. Visitors get address suggestions as they type, and the listing’s map coordinates are saved when the form is submitted.

Add any other fields you need. For our directory, we’ll use:

• Business Name (Single Line Text)
• Business Summary (Single Line Text)
• Business Description (Paragraph)
• Address (Address Field)
• Business Phone (Phone)
• Business Email (Email)
• Web Address (Website)
• Featured Image (File Upload)

When you’re finished, click Save Form and embed the form on a page. To save time, download the free business listing form template.

Create a View with the Maps layout

Next, create a View to show the listings on your site. A View is where you choose which entries to display and how they look, using a drag-and-drop editor.

Hover over GravityKit and click New View. Give your View a name, select your form as the data source, and choose a View type. The Map View type puts a map beside a list of entries, but you can add a map to any View type with the Multiple Entries Map widget.

For this example, we’ll choose the List View type.

The View editor opens next. This is where you’ll add widgets and fields.

First, add the map. In the Top Widgets area, click Add Widget and select Multiple Entries Map.

Widgets add tools around your listings, such as search bars and page links. They go in the top and bottom widget areas.

Next, let visitors search by distance. New Views already include a Search Bar widget. Click its gear icon, click Add Search Field, and choose Geolocation Radius. Visitors can then enter an address and pick a radius to see listings nearby. We’ve also added a Business Name field, and used Add Row to put the Submit Button on its own row below the fields.

Fields show the listing details. Add them in the Entries Fields section of the View editor.

The List layout has an area for each part of a listing: Listing Title, Subheading, Image, Other Fields, and two footer areas. We’ve used the business name as the title, the summary as the subheading, and the featured image as the image, with the address, phone number, and website under Other Fields. The full description shows on each listing’s own page.

To show the listings as cards in a grid, scroll down to Settings, open the Styles tab, and choose 3 under Columns. Columns are part of the Vantage theme, which new Views use by default.

Next, configure the map.

Add info boxes and configure the map settings

Scroll down to Settings and click the Maps tab. Under Address Fields, select your form’s Address field, then check Enable automatic geocoding. This turns each listing’s address into map coordinates when the View loads, so listings still appear on the map even if they were added without address autocomplete.

Next, turn on Info Boxes. An info box is a popup with more about the listing, and it appears when a visitor clicks a marker.

Once Info Boxes are on, you choose what each one shows: a title, content, and an image. Use merge tags to pull in each listing’s details; click the merge tag button next to a box to insert one. We’ve used the business name, summary, and featured image.

The rest of the Maps tab controls how the map looks and behaves, including the map type, zoom levels, custom map styles, marker clustering, and radius search defaults.

Save your View, then open it on the front end. Here’s our directory after a 5-mile search around Union Square:

Get started with Gravity Forms geolocation applications

With Gravity Forms and the GravityView Maps layout, any form with an Address field can become a searchable map of listings, without writing code.

Ready to build yours? Learn more about the Maps layout or try it on a free demo site.