So you’re using Gravity Forms to collect business information and you’re wondering how to display that data on a Google Map?
The Maps Premium View by GravityView offers the perfect solution by allowing you to display Gravity Forms entries as markers on a map. It also comes with a host of powerful settings for customizing the look and feel of your maps on the front end.
Google Maps is the go-to when it comes to Maps applications. In fact, Google Maps powers 83% of all websites using map technologies!
Using the GravityView Google Maps integration, you can create directories, review websites, business listings, and hundreds of other map-based applications!
The GravityView Maps Premium View
GravityView is an add-on for Gravity Forms that allows you to display Gravity Forms entries on the front end of your website. In a previous post, we showed you how to use our Calendar add-on to display your form entries as events on a calendar. In this post, we’re going to focus on the GravityView Maps Premium layout.
GravityView comes with several layouts, allowing you to display form entries in a variety of ways. In this post, we’re going to focus on the Maps layout. To use the Maps layout, you’ll need a GravityView All Access license.
Here’s what it looks like on the front end.
The Maps Premium view comes with dozens of configuration options, allowing you to build the ideal map for your web application. But remember – before you can start configuring the Google Maps integration, you need to install GravityView on your WordPress website.
Create a Form with an Address Field
First, create a new form in Gravity Forms by hovering over Forms and clicking Add New. Next, add an Address field to your form. You can find the Address field under the Advanced Fields tab on the right.
The Maps premium view uses the Gravity Forms Address field as the source when geocoding your data, so this step is crucial. Having said that, if you want to pull the address from a field that isn’t an Address type, you can do so using this code snippet.
Now feel free to add any other fields that you want to. In this example, we’re going to build a View that displays restaurants in New York City, so we’ve added the following fields:
- Featured Image
- Restaurant Name
- Restaurant Summary
- Website URL
- Phone Number
- Opening Hours
When you’re finished constructing your form, click Update.
Creating a Google Maps API Key
Before you can start configuring your Maps layout, you need to create a Google Maps API key. You can create a new API key by following the instructions on this page.
After creating your key, ensure that you enable both the Geocoding API and the Geolocation API.
Next, you need to paste your key into the box on the GravityView Settings page. To do this, go to your WordPress dashboard, hover over Views and click on Settings.
Scroll down to the bottom where it says “Google Maps API Key” and paste your key into the box.
When you’re done, click the button that says “Save Settings”.
Creating the Maps View in GravityView
Now that your API key is active, you can create a new map view in GravityView. To do this, hover over Views and click Add New. Give your View a name and make sure to select your new form as the Data Source.
Under where it says “Choose a View Type”, make sure to choose “Map”.
Now you can start adding fields to your View.
Adding Widgets and Fields to Your View
At the top, you’ll see three widget areas. Widgets are tools for navigating your view such as a search bar or pagination links. To add a new widget to your View, click on the + Add Widget button and select the widget you want to add.
The Entries Fields section of the View is where you can add information about each of your listings. To add fields click on the + Add Field button and choose a field from the list. Fields correspond to your form fields in Gravity Forms.
Here we’ve added the Featured Image field to the Image block, the Restaurant Name to the Listing Title block, and the Address field to the Details block.
Below this you’ll see a footer section, allowing you to add more information about each listing and then at the bottom are more widget areas.
Configuring the Map View Settings
The GravityView Maps Premium view comes with an array of settings that allow you to customize the look and feel of your map. To access the Map settings, scroll down to the Settings meta box and click on the tab that says “Maps”.
Multiple Address Fields:
The Maps view supports multiple address fields. This allows you to display more than one marker for a single entry. So if you’re building a business directory and a business has more than one location, you can show all of them at once.
To do this, hold down the shift key and select the different Address fields inside the Address Fields box.
Custom Pin Icon
When you create a new Map view, it will show the default Google Maps pin icon. However, you can change this to a different option, or even add your own, custom icon!
The Maps layout also gives you the ability to group nearby markers into clusters. You can do this by checking the box next to where it says “Marker Clustering”. You can then choose the zoom level at which to show individual markers instead.
To change the map type, choose an option from the Map Type dropdown menu. The choices are:
Map Info Boxes
One of the most powerful features of the GravityView Google Maps integration is the ability to add info boxes to map listings. Info boxes allow you to display additional information about an entry when a user clicks on its marker.
To enable info boxes, check the box next to where it says “Show Info Boxes”. Next, fill in the title and content. Here you can use Gravity Forms merge tags to dynamically display field values. You can also use shortcodes, plain text, and HTML!
Now when users click on a map marker, they’ll see this handy box containing the restaurant description and website link.
When you’re done configuring your View, you can embed it on a post or page using the embed shortcode.
Maps and Premium Themes
If you’re using a premium WordPress theme, such as Divi, you’ll need to add your Google Maps API key to the Theme Settings in order for the integration to work.
For instructions on how to do this for Divi, Enford, and Avada, check out this helpful article on our docs site.
Bonus: Styling Your Google Maps in WordPress
If you’d like to style your map, you can add custom CSS styles inside the Custom Map Styles box in the Map Settings.
Alternatively, you can download and install the Snazzy Maps plugin. The plugin comes with hundreds of pre-built templates that allow you to change the style of your Google Maps with just a few clicks.
To get started with Snazzy Maps, first, download and install the plugin. Next, create an account on the Snazzy Maps website and sign up for a free API key.
The plugin is free to use for personal websites and projects. However, if you want to use it for business purposes, you’ll need to purchase a license starting from $10 per month.
Get Started with Our Gravity Forms Google Maps Integration
The GravityView Maps premium view allows you to display Gravity Forms entries as markers on a Google Map.
The Maps view comes with several settings, allowing you to customize the look and feel of your maps on the front end. Upload a custom pin icon, display info boxes, show multiple addresses for the same listing, group markers into clusters, and more!
Styling your maps is also made easy by using the Snazzy Maps WordPress plugin. To get started using Google Maps for Gravity Forms, purchase a GravityView All Access license today.