⭐ Available in the following bundle: Conversion Bundle (incl. in Growth, Scale)
⭐ Available on the following plans: Pro, Agency, Business
👀 Not sure which plan you're on? Check your subscription here.
Our Address & Maps Block improves address collection in your flow, making it easier for your visitors to insert their address data. It includes the following features:
Autocomplete addresses via Google Maps: When users type their addresses, this feature shows autocomplete options in a dropdown and facilitates the user input. The integration is set up to securely connect to Google every time it needs information, like when showing autocomplete suggestions or the map. To do this, it sends a special access key with each request, kind of like showing a pass to get in.
Accept full address only: If this checkbox is enabled, your visitors won't be able to proceed to the next step in the flow unless a full address (i.e., street, zip code, city, state) is typed in the field. Please note that the Autocomplete option needs to be already enabled for you to be able to see the full-address option checkbox.
Display addresses on a Google Map: You can add a Google Map to the flow displaying the visitor’s address, which will appear once users have selected a valid address.
Update the Content
After clicking on a building block, you’ll find the Content section on the right. This is where you add and edit the block’s main elements.
Set a label to describe the field, and add a placeholder to guide users on what to enter. Use helper text to provide additional context, and define an error message that appears when the input is invalid.
Change the Settings
After clicking on a building block, you’ll find the Settings section on the right. This is where you can customize the block’s options, appearance, and behavior to tailor it perfectly to your flow.
Modules
Google Maps
Enable Map & Autocomplete to let users search for addresses with autocomplete and display the selected location on Google Maps. You can also choose to show just the map, or only use autocomplete without displaying a map.
General
Enable Sensitive to prevent storing entered values in our database (more information here). Use Autofocus to automatically place the cursor in the input field so users can start typing right away. Mark the field as Required if a selection must be made before continuing in the flow.
Appearance
Control the visibility by choosing whether the block appears only on mobile, desktop, or is hidden entirely. Set a background color to match your design and adjust the label behavior by selecting between static, dynamic, or compact, depending on how you want the label to appear within the block.
Spacing
Control the block’s layout by adjusting its width (S, M, L, or maximum) and setting the block's padding from the top, bottom, left, and right.
Decorations
Use a prefix text or prefix icon to display additional information before the input. Likewise, add a suffix text or suffix icon to show helpful context or symbols after the input field.
Validation
Use Trigger on to choose after which user action the validation should run and the result should be shown, such as after typing, selecting, or clicking.
Labels & Variables
System Labels define how your data is stored and organized, while Variables let you reference and display that data dynamically throughout your flow. Set a system label to identify the block internally. Use the variable to reference the input elsewhere. Under Content, define a prefilled value that users can change, unless the block has been deactivated in the settings.
Design your Block
After clicking on a building block, you’ll find the Design section on the right. You can quickly apply a preset style tailored to that block type. Also, customize colors, fonts, and spacing to match your flow.
When you apply a design to one block type, it automatically updates all blocks of that type across your flow. This keeps your design consistent, clean, and easy to maintain without styling each block manually.
🔎 Learn more in our full guide: Design Presets for Blocks
Also see Heyflow's other design options to individualize your flow and building blocks even more:
Connecting your API
Before you can share your flow with your audience, you need to connect your Google API key. Your Google API key makes sure that your Address & Maps Block is connected to your account, and only requests made through your block will be billed to your account.
❗ Important: You can only use one API key per account.
For the setup, an active Google Cloud Project account is necessary. You can create one here. Afterward, follow these steps:
Edit or remove an API key (if needed)
🔎 If you want to learn more about Google's pricing models and API costs, click here.
1. Create a Google Cloud Project
After signing in or creating an account, you are at the welcome dashboard. Please follow the next steps to create your own project:
Click on Select a project top left.
As you just created your account, you first need to set an organization. Select the organization resource in which you want to create a project on the drop-down menu. If you want to find out how to set up an organization, click here.
Click on New project top right.
In the window that appears, enter your project name and select a billing account. Make sure your project name only contains letters, numbers, single quotes, hyphens, spaces, or exclamation points, and must be between 4 and 30 characters.
If you still need to set up your billing account, check out this page and follow the steps. Make sure to include a payment method which can be billed in your local currency.
Your organization is already previously set. That means you only need to set up your location. Enter the parent organization or folder resource in the Location box. That resource will be the hierarchical parent of the new project. If No organization is an option, you can select it to create your new project as the top level of its own resource hierarchy.
Click Create and your new project is ready to go!
💡 You can find more information about creating a project here.
2. Enable the Places and Maps APIs
To get started with your Google API, you need to first enable it. You need to enable both the Places API (New) (make sure it's the new version) and the Maps JavaScript API.
3. Create your API key
To generate an API key, follow these steps:
Go to your Google Cloud platform and head to the project you would like to connect your flow to.
Click on the navigation icon in the top left corner, go to APIs & Services and then to Credentials
Click on the “Create credentials” button and select API key
A pop-up window with your new API key will open.
In the list view, you can click the edit icon to rename your API key and set its restrictions
4. Restrict your API key
Restricting your API key is optional, but highly recommend because it prevents unintended or malicious usage of your project.
To set up application restrictions, you simply need to add the domains connected to your flows or where your flows are embedded as application restriction under websites.
If you're using our Heyflow default domain, make sure to add the correct domain as a referrer to enable the restriction.
❗ Important: The autocomplete and the map do not work on the preview when the API key is restricted. It only works on the restricted websites.
5. Edit or remove an API key
If you want to remove or edit your API key, go to your account and integrations. When clicking on Google Maps and manage accounts, you can easily remove the account.
Addresses in Responses
When a response is submitted including data from the Address & Maps block, per default you'll get the information about the complete address, but also see the data per category, such as country, city, street and much more.
When sending your responses to one of our integrations, e.g. HubSpot, you can also map the complete address or certain categories, like country, state, city etc.
Troubleshooting
No suggestions are displayed when I enter an address
The URL where your flow is accessible must match exactly with the one registered in Google. If your flow can be reached via a subdomain, make sure to enter that subdomain — the root domain is not sufficient.
For example, the presence or absence of 'www' can affect accessibility; therefore, if you intend for both 'www.example.com' and 'example.com' to function, ensure each is properly configured.
If the flow is embedded in your website, provide the exact URL of the website where it’s embedded. Also, always provide the complete domain, including 'https://'.
💡 Tip: To avoid typos, we recommend copying the URL directly from your browser's address bar.
💡 Tip: If your setup requires more than one subdomain, you can use wildcards to encompass multiple subdomains. For instance, 'https://*.example.com' will cover all subdomains under 'example.com'. This approach simplifies domain management and ensures consistent access across various subdomains.
Addresses without ZIP codes are shown in my results
An address can be shown without or with an incomplete ZIP code, when locations without house numbers or specific landmarks (e.g., "The White House") are queried. However, this issue usually doesn’t occur with address queries that include house numbers.
Autocomplete pulls its data directly from Google Maps, where some locations are listed twice: one as an official entry and the other as user-generated content. If the user-generated entry doesn’t include a ZIP code, it won’t be (fully) displayed in your response.
Address is broken down into its components in my responses
If the Autocomplete option is selected, the expected behavior is that the address typed in by your users is split into its basic components (i.e., street, zip code, city, state) in your Responses.
Sometimes users type in their address manually and do not click on the one suggested by the autocomplete function. In that case, you will only see the entire address in one row in your responses, but not the breakdown.