How to Add Interactive Address Maps to Gravity Forms

1. Set Up Address and Map Fields
   1. Step 1: Enable Address Autocomplete
   2. Step 2: Add a Map Field
2. Can I Customize the Map Field?
   1. Heads up:
   2. Set a Default Starting Location
   3. Change the Default Zoom
   4. Add an Info Window to the Marker
3. Time to Drop Some Pins

Type a few letters in the Address field, get suggestions, click, and… address autocompletes. Yup, that’s the GP Address Autocomplete doing its magic. But what if your users need to see it to believe it?

Meet its co-pilot: the Map field.

It adds a map to your form that automatically pins the location when an address is entered or changed. Nothing beats confirmation like seeing a pinned address with your own two eyes—instantly, too. 📍

Set Up Address and Map Fields

We need two things to bring this map-marking duo to life: an Address field and a Map field.

Step 1: Enable Address Autocomplete

Before we can drop any pins, you’ll need a standard Address field in your form with Address Autocomplete enabled. If you need a hand setting this up, our full setup guide will walk you through it.

Step 2: Add a Map Field

Let’s summon its co-pilot.

1. Open your form (or edit an existing one).
2. Under Advanced Fields › add a Map field.
3. Click the Map field to open its settings.
4. Click the Attached Address Field setting › select the Address field (where Address Autocomplete is enabled)
5. Save your form.

That’s it! When users enter or update an address, the map will instantly center and drop a marker right on the exact location.

Can I Customize the Map Field?

You bet! While it works perfectly as is, you’ve also got options to change how the Map field looks and behaves.

Here are three ways to customize the Map field: 

Set a Default Starting Location

Instead of showing a generic world view, start your map centered on your city, region, or business area.

How to use: Change the lat (latitude) and lng (longitude) values to your chosen location.

gform.addFilter('gpaa_map_options', function(mapOptions, formId, fieldId) {
    mapOptions.center = {
        lat: 40.7128, 
        lng: -74.0060 
    };
    return mapOptions;
});

Change the Default Zoom

Control how close or far the starting view is. Say you run a delivery service in a specific neighborhood, you might set a higher zoom level so customers can immediately see street-level details.

How to use: Adjust zoom value.

• Lower numbers = wider view (i.e. 10 for a city view)
• Higher numbers = closer view  (i.e. 15 for a neighborhood view)

gform.addFilter('gpaa_map_options', function(mapOptions, formId, fieldId) {
    mapOptions.zoom = 15; 
    return mapOptions;
});

Add an Info Window to the Marker

When the marker pins a location, you can add a helpful popup with custom text like “Your delivery address.” It adds a small touch of helpful context.

How to use: Replace text here with your custom message.

gform.addAction('gpaa_marker_set', function(params) {
    const { map, marker } = params;
    
    var infoWindow = new google.maps.InfoWindow({
        content: 'text here',
    });
    
    infoWindow.open({
        anchor: marker,
        map: map,
    });
});

These are just a few ways to tweak the Map field.

If you wanna dive deeper, it’ll require a little more than copy/paste. But if you’re up for it, our documentation has plenty of more tweaks to explore.

Time to Drop Some Pins

Which of your forms will plot the next Address field? 🎯