This guide explains how to configure a Formyoula form to use the Google Maps Place Search API. Based on the City and Postal Code entered by the user, the form will return a list of nearby locations in both an API Table and a Google Map.
- INITIAL SETUP:
- Drag and drop two “Text”, an “API Table”, and a “Google Map Search” field onto your form.
- Rename the fields as needed.
- CONFIGURING THE “API TABLE” FIELD:
- Click the pencil icon of the “API Table” field.
- Set up the field as shown below:
- API URL- https://maps.googleapis.com/maps/api/place/textsearch/json
- Enable Proxy - Yes
- API Response Array Key- results
- Enable Reload On Merge Field Change- Yes
- Add Custom Table Columns:
- name || Name
- formatted_address || Address
- Add Body Params:
- query || Car dealership,{{a945-43bc-5e1f}},{{f5a1-a787-8da6}}
- key || *****************(YOUR_GOOGLE_API_KEY)
- Note:
- Here,
{{a945-43bc-5e1f}}is the field ID of the Text field labelled “City”, - and,
{{f5a1-a787-8da6}}is the field ID of the Text field labelled “Postal Code”.
- CONFIGURING THE “GOOGLE MAP SEARCH” FIELD:
- Click the pencil icon of the “Google Map Search” field.
- Set up the field as shown below:
- Location:
{{a945-43bc-5e1f}},{{f5a1-a787-8da6}} - Search Value: Car dealership
- Google Maps API Key: **********(YOUR_GOOGLE_API_KEY)
- Note:
- Here,
{{a945-43bc-5e1f}}is the field ID of the Text field labelled “City”, - and,
{{f5a1-a787-8da6}}is the field ID of the Text field labelled “Postal Code”.
- Test Your Form:
- Try your form.
- Enter a City and Postal Code.
- The API Table displays matching location results with names and addresses.
- The Google Map Search shows those locations as map markers.
Note: You can create a Google Maps API Key using your Gmail account - https://developers.google.com/maps/documentation/javascript/get-api-key
For any questions, please contact us - [email protected] or the Formyoula in-app chat 🙂