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

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.

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