Google places Autocomplete on content pages gives error

Ok, still confused. That is included on the main layout page - and it is auto included

They it might be just an error in design view only. Check it in the browser

Unfortunately not, when I open in browser (Docker local) - the input doesn’t work. Then when I return back to the Wappler page, API key again has disappeared. :frowning:

Please tell me how else I can help debug this.

So when you open your site in a browser for preview - what error do you get in devtools?

Some progress - I removed everything and tried again, this time a different script was added to the layout page, so I now have both of these:

<script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
<script src="dmxAppConnect/dmxGooglePlaces/dmxGooglePlaces.js" defer=""></script>

And when I try to use the input in my browser - it at least attempts to do something (note, no error in network tab):
Screen Shot 2020-09-10 at 10.52.13 am

I can triple confirm that the correct API Key is in fact in the ‘API Key’ section in Wappler UI - however I’m getting a lot of authentication errors now:

e.g.
js?libraries=places:78 You must use an API key to authenticate each request to Google Maps Platform APIs. For additional information, please refer to http://g.co/dev/maps-no-account For more information on authentication and Google Maps JavaScript API services please see: https://developers.google.com/maps/documentation/javascript/get-api-key

Have you enabled places API and Google maps javascript api in the Google cloud console?
Have you added the API key to them?

1 Like

Yep, this is in use elsewhere and working fine

The error is returned by Google, not by Wappler. I suggest to check the link which can be found in the browser console next to the error message and follow their troubleshooting docs.

So the API key not storing in the Wappler UI is a google issue?

I am not sure I understand what do you mean. Aren’t we discussing

I.e. doesn’t that mean the API key is there? Or is it missing from the js include?

If the API key is in the code and you see these errors returned by Google in the browser console, then there’s something not correctly setup in the Google cloud console.

Please read the full post Teo when jumping in on single replies. I’ve discovered a number of issues when trying this out. The api key continues to dissappear.

I will however check everything again with Google

I am reading your posts … It’s hard to follow you. Once you say the API key is missing, then you say:

So your issue is that the API key disappears from the js include…

When does it disappear? On save? On page load in Wappler? What if you just add it manually to the include?

If the API key is missing from the js include, then nothing will work.

Issue no.1 -
API Key does not save in the Wappler UI.

  • Easy way to replicate this: Add the API Key then add a ‘type’ the API Key then disappears.
  • Another way to replicate this: Add the API Key and then go and edit any other element on the page. The API Key then disappears.

The API Key I am trying to use is working fine elsewhere. Regardless, I created a new one, ensured that it works for Maps JavaScript API - and tried again. Same issue.

I am not a developer - hence using Wappler. I am not able to effectively debug a feature you have released by articulating the problem is that the key disappears from the js include.

Please explain exactly how I can identify, find and check the js include?

Issue no.2. (Maybe or maybe not related to issue no.1 - but I am no developer)
I have implemented the new feature released today - Google Places Autocomplete. This isn’t working. When dynamic data is selected - the screen whites out. When viewing in browser - page loads, no specific errors are thrown.

Issue n2 is the effect of issue n1… without an API key added to the include it won’t work.

It just needs to be added here in the maps js include…

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_GOES_HERE&libraries=places"></script>
2 Likes

Ok, thank you - let me try that right away

@Teodor so this fixed it, thank you.

So I assume then the bugs are:

  • The API Key is not being stored by Wappler or included in the main js include -
  • The changes to the UI keep removing the key from the autocomplete component in AC?
  • The whiteout still happens with dynamic data - but works fine when rendered in browser.

Will you be providing any additional documentation? With the places autocomplete standard API response you can get the places_id (might be called place_id) without any additional api calls - with this integration it is just returning the text value.

Will we be able to get more from the autocomplete, and if we can, will this be provided in any documentation that is coming?

As a side note - if your audience is primarily non-developers (as I understand it). Sure, there are some very experienced, very smart people on this forum - but please just simplify things a little bit so it’s easier for mere mortals like me to fully understand in the first instance.

1 Like

That’s an issue only affecting content pages with NodeJS, so the API key just doesn’t get added on the main page.
We will improve this in the next update.

As for your other questions, please post a different topic with the questions you are having and the features you are missing so we can add them in the next update.

2 Likes

There still seems to be an issue with this. I’ve converted an input to a Google Places Auto Complete and pasted the API key but the script added to the head section doesn’t include the &libraries=places part. I found this thread trying to work out what the problem was and entered that part manually to get it to almost work. However, the console is showing a response from Google with the results but it’s not showing on the page (the dropdown doesn’t appear at all).

3 posts were split to a new topic: Google autocomplete doesn’t show results