Google places Autocomplete on content pages gives error

Thank you Wappler!

1 Like

@Teodor and @George thank you so much for the update. I’ve been waiting for this one.

Unfortunately, it doesn’t seem to be working.

The moment I ad a Google Autocomplete - the page doesn’t work in dynamic mode - complete whiteout.
The API Key won’t save, when I do any other action it dissappears.
This is the error within Wappler

Note I have saved the library on the main layout page. Do I need to do anything else, or should I consider this a bug and add this in the bug section?

Can you explain what server model are you using and where/what/how did you add exactly?

Yep, sure!

NodeJS, Mac, Docker.

I went to a content page with a form, clicked on the location form input (originally just text) then converted to Google Places AutoComplete. Add API Key. Choose Region.
Choosing Region removes the API Key. So I add the key again.

Screen white’s out entirely unless I remove the dynamic.
Go to layout page, save the auto-insert. Refresh both pages. Same issue.

Note: I did this on two different pages, and I also manually added Google Places Autocomplete from App Connect - no difference. Noting you cannot add GP Autocomplete element within a form, so have to convert an input.

Aha seems the main google include is not auto added on your main page.

Will check it out.

For now just add it to a separate page and just copy the google maps include to your main page.

Hey George,

Can you clarify please?

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

this is auto included on the layout page - do you want me to include this also on the content page?

Yes that one - it should also include your API key (do not post it here)

Just make sure it is included in your main layout page.

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.