Introduction
This is a client-side version of Google Places Autocomplete service because it runs in the client's browser instead of a Bubble server and also for that reason it retrieves the user's accurate location (not Bubble server).
Prerequisites
Setting the Google API Key (https://cloud.google.com/maps-platform/places/) is rather optional than obliged. Adding the Google API keys will enable the data synchronization with your Google account - so it's additional functionality and you can ignore this setting.
Note: You may need to enable Directions, Places API in Google Cloud Platform.
After the Google Timezone update (May 2020), all users have to set up the Geolocation in the Settings > General tab: https://manual.bubble.io/working-with-data/setting-up-google-api-keys
Tip: How to add an ID attribute to HTML elements
https://forum.zeroqode.com/t/how-to-add-id-attribute-to-html-elements/469
Important: The plugin works only with the Input element.
Element proprieties
Note: The plugin requires the Bubble's map element on the page in order to return values. When using Map element please refer to bubble's manual - https://manual.bubble.io/working-with-data/setting-up-google-api-keys
Please check the documentation for information on how the price for Autocomplete session is performed: https://developers.google.com/maps/billing/gmp-billing#contact-data.
The plugin contains GoogleAutocomplete visual element which should be used on page.
Propriety fields:
Input ID - id attribute of the element
Place Type - search of the places types, (i.e all, geocode, address)
Results Language - language of the results
Country - Country restrictions for results prediction (All or specific country)
Countries - Select many countries separated by comma i.e: Albania, Angola (max 5 countries) OPTIONAL
Latitude - latitude coordinates OPTIONAL
Longitude - longitude coordinates OPTIONAL
Radius - the distance in meter within which to return place result OPTIONAL
Contact Data - checkbox to enable to get SKUs Data for each Places request. Fields in the Contact category result in an additional charge. The Contact Data SKU is triggered when any of these fields are requested:
formatted_phone_number, international_phone_number, opening_hours, website. The Price for Contact Data is according to Google Pricing.
Note: Charges for Contact Data are based on Google Pricing. Please check the documentation for more details: https://developers.google.com/maps/billing/gmp-billing#contact-dat
Atmosphere data - checkbox to enable to get SKUs Data for each Places request. Fields in the Atmosphere category result in an additional charge.
The Atmosphere Data SKU is triggered when any of these fields are requested:
price_level, rating, review, user_ratings_total. The Price for Atmosphere Data is according to Google Pricing.
Note: Charges for Atmosphere Data are based on Google Pricing. Please check the documentation for more details: https://developers.google.com/maps/billing/gmp-billing#atmosphere-data
Plugin States and Actions
States
- Full Address (Text)
- Place Icon (Text)
- Place Name (Text)
- Position Lat & Long (List of numbers)
- Place ID (Text)
- Place Photo (Text)
- Website (Text)
Update 09.10.19 Changelog: Added new state fields:
- Phone Number: (number)
- International Phone Number: (number)
- Opening Hours List: (text)
- Is Open Now: (yes/no)
- Rating: (number)
- User Rating Total: (number)
Actions
- Get place details A Google Autocomplete - retrieve place details using action in the workflow
- Reset A Google Autocomplete - reset the values of the element via action in the workflow
Plugin Events
- A google autocomplete NewPosition
Installation and usage
As a start, you need to install the plugin. After installing the last version, just follow the next steps:
- Fill the API Key input in the plugins tab (optional).
2. Put the Google Autocomplete element on the page.
3. (IMPORTANT) Put the Bubble's map element on the page in order to return values.
4. (IMPORTANT) Input ID must be filled also. For this, you need to add an input element on the same page, give it an ID, after that you can use the ID in the Google Autocomplete element.
5.(OPTIONAL) Place Type, just choosing the type of searching content. It can be the following:
6. (OPTIONAL) Results Language, language for the results:
and many more languages.
7. (OPTIONAL) Country, the country where to search for results:
and many more countries, about 246.
Countries parameter can be only a bubble list of text, for example, from the Bubble database, extracted using the “Do A Search” method.
Latitude, Longitude, Radius can be used for an area of search.
Changelogs
Update: 09/10/2019 -
- Added new state fields:
1.Phone Number: (number)
2.International Phone Number: (number)
3.Opening Hours List: (text)
4.Is Open Now: (yes/no)
5.Rating: (number)
6.User Rating Total: (number)
Update: 19/01/2021 –
- Fixed issue with a focus to null.
Update: 9/04/2021 -
- Added the ability to enable/disable some details about the place
Update 29/04/2021 -
- Added new states to display all details of a place (Basic Data)
Update 27/05/2022 - Version: 1.23.0.
- Removed outdated statutes that caused the error message.
Update: 03/07/2022 - Version: 1.26.0.
- Added waiting for page loading
Update: 13/09/2023 - Version 1.36.0
- Minor updates
Update: 15/01/2024 - Version 1.39.0
- Minor fixes
Update: 26/01/2024 - Version 1.42.0
- Added element resizing functionality
Update: 06/02/2024 - Version 1.43.0
- Minor fixes
Update: 13/03/2024 - Version 1.44.0
- Added “focus on reset” field