How to build a Gravity Forms geolocation directory

How to Build a Gravity Forms Geolocation Directory

Written by Casey Burridge

Last updated:

Categories GravityView

Tags

Are you looking for a way to build geolocation applications using Gravity Forms? 🗺️

You can collect location information in Gravity Forms using the “Address” field type, but there’s no way to plot those addresses on a map, unless you use an add-on like GravityView.

In this post, we’ll show you how to build a Gravity Forms geolocation directory using the GravityView Maps layout. Keep reading to find out more! 👇

Sneak Peek

Here’s what our finished Gravity Forms geolocation directory looks like on the front end!

A Gravity Forms geolocation directory, built using the GravityView Maps layout

What Does “Geolocation” Mean?

The term “geolocation” generally refers to the use of technology for tracking the whereabouts of electronic devices. In a broader sense, geolocation is often used to refer to maps applications that display user/business locations based on their address.

What Is a Geolocation Directory?

A geolocation directory is a web application that displays information about certain people or businesses, as well as their location. Geolocation directories help users find professionals, businesses and services within a certain area.

For example, an online geolocation directory might allow you to…

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

Now let’s look at how to build a Gravity Forms geolocation directory using GravityView!

Building a Gravity Forms Geolocation Directory

Below, we’ll show you how to create a Gravity Forms geolocation directory using the GravityView Maps layout. The Maps layout allows you to display existing form entries as markers on a Google Map.

Here’s how it works…

When a user fills out your form and submits their address, GravityView geocodes that address (i.e. turns it into map coordinates) and then display it as a marker on an interactive Google Map.

📝  Google Maps is the most popular navigation app in the US with over 150 million users each month!

Ready to create your own geolocation directory using Gravity Forms? Follow the steps below 👇

Install GravityView

First, you’ll need to ensure you have access to the GravityView plugin, so if you don’t have one already, purchase a license from our website.

📝 The Maps layout is only available in our All Access package. However, if you only want GravityView and Maps, contact our support team, and we’ll see what we can do!

Go to your GravityView Account page, click on the Downloads tab, scroll down to GravityView and click Download Plugin.

Now follow the steps below to install GravityView on your website.

  • Log in to your WordPress dashboard, hover over Plugins and click Add New
  • Click Upload Plugin and then click Choose File and select the GravityView ZIP file
  • Click Install Now. When GravityView has finished installing, click Activate Plugin.

After installing GravityView, you’ll need to install the Maps layout.

Install the Maps Layout

The next step is to install the GravityView Maps layout. To do this, hover over Views and click on Manage Add-Ons. Next, locate the “Maps Premium View” and click Install

The Install button for the Maps Premium View on the GravityView Manage Add-Ons page

After installing Maps, you’ll need to sign up for a Google Maps API key and enter it on the Maps settings screen. For guidance on how to do this, follow this helpful guide on our docs site.

Create a Directory Listing Form

Now that you’ve installed GravityView and Maps, you can start constructing your geolocation directory. 

In this example, we’ll be creating a local business directory. We’ll start by creating a sign-up form allowing business owners to add their profile to the directory.

To create a new form, we’ll hover over Forms and click New Form. After giving our form a name, we can start adding fields to it using the Gravity Forms visual builder

The one field your form MUST have is an Address field. If you don’t include an Address field, GravityView won’t be able to determine the location of the listing. You’ll find the Address field under the Advanced Fields tab on the right.

The Gravity Forms Address field

Now feel free to add any other fields you feel are necessary. For our local business directory, we’ll include the following form fields:

  • 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 building your form, click Save Form at the top and embed it on a post or page.

Create a View Using the Maps Layout

The next step is to create a View so you can display entries on the front end!

📝 A View is a custom post type that you can configure using a drag and drop visual editor. Views allow you to display Gravity Forms submissions on your website.

To create a new View, hover Views and click New View. Now give your View a name, select your new form as the data source, and choose “Map” as your View Type.

Choosing a View Type when creating a new View in GravityView

After choosing a layout, the View editor will appear, allowing you to start configuring your directory. GravityView will display your entries on a map at the top and then list each entry below.

You can customize the layout of your directory by adding fields and widgets to the View editor. 

The Top Widgets area in the GravityView View editor

Widgets include search bars, and navigation tools like page links and pagination info. You can only add widgets to the top and bottom widget areas. 

Fields, on the other hand, represent user-submitted content. You can add fields to the Entries Fields section of the View editor.

The Entries Fields section of the View editor in GravityView

As you can see, under Entries Fields there are different sections for different fields – “Image”, “Listing Title” and “Details”. There is also a “Middle Row” and “Footer” section below.

When you’ve finished adding widgets and fields to your View, you’ll need to configure the Map settings.

Add Info Boxes and Configure the Map Settings

Scroll down to the View Settings meta box and click on the Maps tab on the left. Here you’ll find a range of options for customizing the look and feel of your map on the front end.

One of the most powerful features of GravityView’s Maps layout is called “Info boxes”. By enabling this option, a popup box with additional information about the listing will appear when users hover over a marker on the map.

A checkbox that says 'Show a popup box with additional entry details when clicking a map marker

After enabling Info Boxes, you’ll see four other options appear, allowing you to specify what content to include in your info boxes. You can add a title, body content and an image. To display content dynamically for each listing, you can use Gravity Forms field merge tags. (To add merge tags, simply click on the button to the right side of the input box).

Input boxes for Title, Content and Image

When you’re done, scroll down and ensure you configure the remaining options. Map settings allow you to change the look of the map, add custom map styles, enable marker clustering and much more!

When you’re satisfied, publish your View and check it out on the front end.

A Google Map with markers in New York City (each one is a Gravity Forms entry)

Get Started With Gravity Forms Geolocation Applications

If you’re looking for a Gravity Forms geolocation add-on, the GravityView Maps layout may be just what you need. The Maps layout allows you to display your form entries as markers on a Google Map and build powerful geolocation applications. 

In this post, we showed you how to create a Gravity Forms geolocation directory using the GravityView Maps layout. So what are you waiting for? Learn more about the Maps layout today or check out our different licensing options.