Plugins
Templates

Fastest Google Places Autocomplete Plugin

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

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.

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

Settings for Google Map and Google Geocode APIs

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

Contact Data Price per Call

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-data

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.

Atmosphere Dta Price per Call

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

  1. Full Address (Text)

  2. Place Icon (Text)

  3. Place Name (Text)

  4. Position Lat & Long (List of numbers)

  5. Place ID (Text)

  6. Place Photo (Text)

  7. Website (Text)

Update 09.10.19 Changelog:

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)

Actions

  1. Get place details A Google Autocomplete - retrieve place details using action in the workflow

  2. Reset A Google Autocomplete - reset the values of the element via action in the workflow

Plugin Events:

  1. 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. Fill the API Key input in the plugins tab (optional).

  2. Put the Google Autocomplete element on the page.

  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)

Demo to preview the settings