The Map Address field adds an interactive map to your form where visitors can search for an address, click on the map, or drag a pin to select a precise location. This is far more user-friendly than a plain text address field because visitors can see exactly where their pin is placed, correct mistakes visually, and provide location data that is accurate down to the exact building or street corner.
Traditional address fields rely on visitors typing accurately and completely. Map fields give you a formatted address, latitude, longitude, and a visual confirmation that the location is correct. This is essential for any business where knowing the exact location matters.
When to Use the Map Address Field
| Use case | Why the map is better than a text address |
|---|---|
| Delivery forms | Customers pinpoint their exact door, not just a street name |
| Service area forms | Plumbers, cleaners, and movers see exactly where they need to go |
| Event registration | Attendees mark their starting location for logistics planning |
| Real estate | Visitors select properties or neighborhoods visually |
| Insurance claims | Claimants mark the exact incident location |
| Food delivery | Drivers get coordinates, not ambiguous address text |
Setup Walkthrough
- Go to Fillin Forge > Settings (the Maps (Address Picker) card).
- Choose your map provider:
– Yandex Maps — a strong alternative, especially for sites focused on Russia, CIS countries, or Turkey. Requires a Yandex JavaScript API key to render the map. Typed-address lookup should use a Yandex Geocoder API key; live suggestions use a separate Yandex Geosuggest API key when you have one.
- Enter the key fields shown for the selected provider. Google shows a single Google Maps API Key field. Yandex shows Yandex JS API Key, Yandex Geocoder API Key, and optional Yandex Geosuggest API Key fields. Fillin Forge stores the Google key and Yandex JS key separately; switching providers hides the unused fields without replacing or deleting their saved values.
- Click Save Settings.
Getting a Google Maps API Key
- Go to the Google Cloud Console (console.cloud.google.com).
- Create a new project (or select an existing one).
- Enable the Maps JavaScript API and Places API for the project.
- Go to Credentials and click Create Credentials > API Key.
- Copy the generated key and paste it into Fillin Forge settings.
- Optionally, restrict the key to your domain for security.
Adding a Map Field to Your Form
- Open your form in the builder.
- Drag the Address (Map) field into your form.
- The builder has no setting for the map center or zoom. The map opens on a fixed default point (Tashkent, zoom 13) until the visitor searches for an address or clicks the map.
- Save the form.
What Visitors See and Do
- An interactive map appears in the form with a search bar above it.
- Visitors type an address in the search bar and the map zooms to that location with a pin.
- On Yandex forms, visitors can type an address and press Enter or click Submit to resolve it through the Fillin Forge Geocoder proxy when a Yandex Geocoder API key is configured, even when live suggestions are unavailable. The suggestions panel stays below the address input, closes after blur, and does not change the map container height. The field waits for an explicit action before showing a validation error, and clearing the input clears stale suggestions, coordinates, formatted address data, and errors.
- Alternatively, they can click anywhere on the map to drop a pin.
- The pin is draggable, so visitors can fine-tune the exact location.
- Below the map, the formatted address, latitude, and longitude are displayed automatically.
- If the provider cannot resolve an address, Fillin Forge shows a field-level error and asks the visitor to choose a suggestion, press Enter, or click the map. This prevents raw unresolved text from being saved as a real map location.
What You Receive in the Submission
| Data point | Example |
|---|---|
| Full formatted address | 123 Main Street, Chicago, IL 60601, USA |
| Latitude | 41.8781 |
| Longitude | -87.6298 |
| Additional metadata | Country, state, postal code (from map provider) |
Fillin Forge stores the map payload internally as structured data, but user-facing surfaces show readable text. The submission modal, email notifications, Telegram/Slack/Discord/webhook payloads, Google Sheets rows, HubSpot mappings, CSV exports, and PDF exports display the address and coordinates instead of raw JSON.
Real-world example: You are a cleaning service. Your booking form includes a Map Address field. Customers search for their home address, and the pin lands on their building. They can drag it to their exact entrance if needed. When your crew receives the booking, they get a precise location they can plug into their navigation app, not a vague address like “near the park.”> Tip: The map opens on a fixed default point (Tashkent, zoom 13) and the builder has no setting to move it. Visitors search for their address, and the map moves to the result.
> Good to know: The Map Address field is a Free field type. If you prefer not to set up a map provider key, the standard Address field provides text inputs for street, city, state, and ZIP but without a map or coordinate data.
Common Mistakes to Avoid
- Forgetting to restrict your Google Maps API key to your domain. An unrestricted key can be used by anyone and rack up charges on your Google account.
- Mixing map keys. The Google Maps key and Yandex JavaScript key are separate fields. For Yandex, the JavaScript API key renders the map, the Geocoder API key powers typed address lookup through WordPress, and the optional Geosuggest key powers live suggestions. If Google Places is forbidden, fix the key permissions instead of accepting typed text without coordinates.
- Using the map field when a simple address field would suffice. If you do not need coordinates or visual confirmation, the standard Address field is simpler and works without an API key.
[Screenshot: A form showing the Map Address field with an interactive Google Map, a search bar above it, a draggable pin on a specific location, and the formatted address displayed below the map]
—