Google Autocomplete Bugs - API Key still not saving, and 'Uncaught ReferenceError: google is not defined' - NODEJS

Wappler General Bugs
#1

======== TEMPLATE BUG FORM ========

Wappler Version : 3.4.0
Operating System : MAC
Project: NodeJS, MySql 8. Docker. AWS.

Expected behavior

What do you think should happen?

’Uncaught ReferenceError: google is not defined’
I should be able to simply choose a text input and click ‘Make Google Places Autocomplete’ and for this then to work as you would expect.

API Key not saving:
I should simply be able to add the API Key to the UI in Wappler and for it to save. It doesn’t, so I have to manually add my private key to the header script.

Actual behavior

’Uncaught ReferenceError: google is not defined’
If I have my page on the dynamic view, the moment I convert an input to a Google Places Autocomplete - the page blanks to white and I get this error in Wappler UI:

Screen Shot 2020-10-21 at 2.00.14 pm
Screen Shot 2020-10-21 at 2.00.14 pm1174×58 3.41 KB

I have the correct JS links in the Layout Header. These are working with Google Autocompletes I have working already from a previous version of Wappler.

How to reproduce

’Uncaught ReferenceError: google is not defined’
Click on a text input
Convert to Google Places Autocomplete
Ensure dynamic data view is turned on.
View Wappler warnings.

1 Like
Error when trying to run JS from a Flow (on success of form) - "Uncaught (in promise) TypeError: Cannot read property ‘apply’ of undefined"
#2

The Uncaught ReferenceError: google is not defined error appears when there is some script include missing from your page, in your case probably the Google API include
As for API key not saving, @Georgewill check this.

#3
#4

@Teodor as per the post - all the includes are there. The Google AC works on other pages with the same layout o that is not the issue.

#5

Are you 100% sure both of these are on the layout page:

<script src="https://maps.googleapis.com/maps/api/js?key=apikeygoeshere&amp;libraries=places"></script>

<script src="dmxAppConnect/dmxGooglePlaces/dmxGooglePlaces.js" defer=""></script>

and not just the first one?

#6

yes. 100%! I can screnshot for you if necessary.

#7

I think i was able to recreate this issue. We will fix this for the next update.

2 Likes
#8

Thank you :slight_smile:

#9

Just stumbled upon this as well. Can reproduce the issue as described above.

1 Like
#10

I can confirm this is still happening. Node.js apps are unable to use the Google Places Autocomplete or Maps.

I have tried creating a new app just to test it and get the same result.

As soon as google maps/places is added to the page the view inside Wappler goes blank. Load the page in a browser and it gives the google javascript error: NoApiKeys

I have definitely saved the API keys inside of Wappler (though they are never there when I reload the page). And can confirm the API keys are working on a non Wappler site.

Still unable to use design view with dynamic data when Google Autocomplete is on page
#11

You can make it work in the short term by placing your key in the includes on the page, but my screen still whites out when in Wappler if I try to use dynamic view with any page with Google AutoComplete.

#12

Just tried it and that gets the api working but you are right, still whites out the screen making visual editing impossible on any page with google map/places on it.

Thanks for the tip!

#13

this was all resolved in recent Wappler updates

#14
#15