Access the Codeless for Autocomplete Google Places API elsewhere in Codeless

Hi, when I use the autocomplete component I can access a few Codeless blocks for using the Google API. I don’t seem able to access these blocks unless my page has an autocomplete field on it though.

Is there a way to access these blocks without the autocomplete? For instance, I have the Google Place IDs stored in my database. Sometimes I want to call the block for Get Place Details even though it’s not related to the autocomplete input field.

Thanks!

Also, I’ve been trying different ways to deploy Get Place Details, even in an autocomplete block, but without triggering Get Place Details on a change event:

I am getting the following error:
bundle.js:79 Uncaught (in promise) Google Maps library was not initialized

Is there something specific about when an On Change Event occurs that initializes the library? Or possibly related to whether the block is used inside a Form?

Hello @James_Hereford

Now you cannot use Predictions logic without the presence of the Autocomplete component on the page. The presence of the Autocomplete component on the page makes it clear that we need to download Google tools.

You can use a workaround like this: Add the component on the page and hide it. The use the “Get Autocomplete Predictions” or the “Get Search Box Predictions”. These blocks are not associated with the component. With their help you can get a prediction directly using input.

Regads

Thanks Victor. I figured that would be the workaround and attempted that. I received the error that I mentioned when trying to use Get Place Details.

In this case though I have the Place ID already and need to get Place Details for that specific ID. I don’t think auto complete or search box predictions will help with this directly. Can you advise on the error I am seeing (posted in reply to the original thread)?

Thanks!

@James_Hereford

This example work fine for me

Thanks Victor. As mentioned up above though - I need it to work without a click. I am getting an error when I have it in an On Before Mount or an on Mount event handler. Can you confirm your example is working there as well?

I think there may be an order of operations issue occurring as I am getting some signs that it is attempting to run the operation and fails with the error code mentioned, and then later it attempts again and works.

For additional context, these fields also exist in a hidden block that is shown when a user click a button to edit profile.
App ID: 552EA923-D13D-8DAB-FFF1-BBC86963EF00
Page: template_UserProfile
containerEditProfile
cellEditAddress

Hello @James_Hereford ,

yes it should work in your case after clicking on the “Edit Profile” button, in “On Before Mount” or an “on Mount” handlers.

Regards,
Sergey

Thanks Sergey. I am still getting the same error though. The behavior I observe is that the first time I click edit profile it throws the error and fails to populate formatted address. After that error though, it does load the API. Then if I cancel, then hit edit profile a second time, it will successfully load formstted_address into the field. I can’t quite figure out the order of operations so that it will load on the first try.

Hello @James_Hereford

Does your autocomplete component have some display logic? Like - he showed up only after clicking on “edit profile”. If so, I believe the root of the issue will be here. Try to show autocomplete on the scene, and only after that populate it. Also will be helpful to get some debug information(order of mount and when places are requested) and console logs.

What could highly speed up the solution to your problem, is a minimal reproducible example - create a separate page with a minimum logic, and we will take a look into it.

Thanks Dima. Vlad and I were able to work around this one in such a way that I don’t have to call the Get Place Details in advance any longer. We’re storing the data in the DB after the first time it’s pulled so that I can access there.

I appreciate the help!