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.
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.
Adding the Address & Maps Block
In the blocks tab, navigate to Input and drag the Address & Maps Block into your heyflow
Enable the integration and activate Autocomplete with your Google Maps API key, as described below.
Adjust the Autocomplete settings, such as up to 15 countries to autocomplete address and the language of the autocomplete results
If you want, activate Show Google Map and choose your map type (satellite vs. default street map)
Add a system label to make sure you are processing the data in a meaningful way.
Just publish your heyflow and you’re good to go!
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.
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.
❗ Important: You can only use one API key per account.
1. 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.
2. 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
3. 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 default Heyflow 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.
4. 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're only able to map the complete address.
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
This happens 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.
Edit Options
Address Field
Address Field
Autocomplete: When enabled, users are shown suggestions below the field as they type.
Restrict autocomplete results: Select up to 15 countries where address suggestions will automatically be provided.
Language for autocomplete results: Select the desired language, in which the autocomplete results are shown to the users.
Sensitive: If activated, the values are not saved in our database (more information here).
Autofocus: Sets the mouse focus on the input field so that the user can start typing immediately.
Required: If activated, your users must make a selection before they can continue clicking in the flow.
Map
Map
Show 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.
Map Type: Select from the two map types (satellite vs. default street map) to individualize how the Google Map is shown.
Spacing
Spacing
Width: Here you can adjust the maximum spread of the block and choose between S, M, L and maximum width.
Top, Bottom, Left, Right: You can use these options to set the distance to all sides. To do this, either use the slider or specify the exact number of pixels.
Appearance
Appearance
Visibility: Here you can choose whether the block is only displayed in the mobile or desktop version or whether it is hidden completely.
Background color: You can select a colour to be used as the background for the block.
Floating label: The label initially appears within the field, and when the user interacts with it, the label "floats" above the field and makes room for the user to enter a value.
With info: Add additional information below the input field, e.g. to indicate when a field is optional.
Decorators
Decorators
Prefix text: Specify an extra text field before the input.
Prefix icon: Specify an extra field with an icon before the input.
Suffix text: Specify a text field after the input.
Suffix icon: Specify an extra field with an icon after the input.
Validation
Validation
Trigger on: Select after which action of the user:in the validation should take place and the result should be displayed.
Error message: Specify the error message text that is displayed if an incorrect entry is made.
Labels & Variables
Labels & Variables
System label: Specify a system label for the block.
Variable: See Variable.
Content: The prefilled value of the field. The user can change the value if the block has not been deactivated via the settings.