🔗 Link to plugin page: https://zeroqode.com/plugin/google-places-autocomplete-1544612805685x644407669572501500

Demo to preview the plugin:

🔗

Live Demo: https://zeroqode-demo-13.bubbleapps.io/google_places

🔗

Bubble Editor: https://bubble.io/page?type=page&name=google_places&id=zeroqode-demo-13&tab=tabs-1&version=live

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/).

🔗

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/help-guides/integrations/api/the-api-connector/api-guides/google-translate/how-to-setup-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 Bubble Map and Input elements.

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:

1. Put the Google Autocomplete element on the page.

2. (IMPORTANT) Put the Bubble's map element on the page in order to return values.

3. (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.

4.(OPTIONAL) Place Type, just choosing the type of searching content. It can be the following:

5. (OPTIONAL) Results Language, language for the results: and many more languages.

6. (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

Fastest Google Places Autocomplete Plugin