API Data Source and Google Autocomplete

Playing about with google API autocomplete. The basic connection seems great but having an issue trying to bind a parameter ‘input’ to a form field value.
If i enter a static value to ‘input’ everything works correctly but if i bind it to a form field value it breaks. Anyone any ideas.

here is the code generated for the API.

    <dmx-api-datasource id="api1" is="dmx-fetch" url="https://maps.googleapis.com/maps/api/place/queryautocomplete/json" dmx-param:inputtype="'textquery'" dmx-param:key="'my_API_key_is_here" dmx-param:input="form3.select1.value"></dmx-api-datasource>

Are you getting an error or does the input value change just doesn’t trigger refresh of the data?

Maybe @patrick can advise

Thanks for quick response @George but i think i need to look more closely at this before troubling you further, there may also be a CORS issue here. Going to switch code to a secure server for further testing

1 Like

OK, firstly may i just clarify, APIs are not my comfort zone
i have bound the API source to a BS table
Everything seems to show perfectly in Wappler and the issue is NOT the binding of the ‘input’ parameter to the form field value as i previously (and mistakenly) thought

However if I try to view in a web page and get the following error in my browser:

Access to XMLHttpRequest at 'https://maps.googleapis.com/maps/api/place/queryautocomplete/json?
from origin 'https://findmystudentdigs.co.uk'
has been blocked by CORS policy: 
No 'Access-Control-Allow-Origin' header is present on the requested resource.

A rummage around google seems to reveal i am not alone with this issue. Certainly does not seem to be a Wappler issue but a Google issue.
I will continue to research this until i find a solution.

1 Like

hmm from what I read Google APIs should support CORS:


but maybe a stronger authorization is required - Google Maps & services require a lot of $$$ recently so they put everything behind bars.

I still am confused why I see correct results in Wappler live view but nothing a browser.

I had the same problem, what headers are returned by the actual API Data Source when you query the schema. Is there an entry in the header called access-control-allow-origin

Sadly nothing.

In Wapplers design view, we don't have any restrictions like CORS, so its all allowed there.

But in browser is a different area - CORS rules there unfortunately

1 Like

There is a nice example that here https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform

I just can’t seem to be able to Wapplerise the thing.

I just got google geocoding to work via server API on Tuesday, maybe I can have a look at this now @ben


Hi @Ben, surprisingly easy for the API side of things, sent the search string as GET parameter (input). Just the api for the moment, will look at app connect side later. Sample is search on city of Leeds Have to ensure you have an up to date API key

{“google_autocomplete_api”:{“status”:200,“headers”:{“0”:“HTTP/1.1 200 OK”,“Content-Type”:“application/json; charset=UTF-8”,“Date”:“Thu, 24 Jan 2019 09:03:15 GMT”,“Expires”:“Thu, 24 Jan 2019 09:03:15 GMT”,“Cache-Control”:“private, max-age=300”,“Vary”:“Accept-Language”,“Content-Encoding”:“gzip”,“Server”:“scaffolding on HTTPServer2”,“X-XSS-Protection”:“1; mode=block”,“X-Frame-Options”:“SAMEORIGIN”,“Server-Timing”:“gfet4t7; dur=13”,“Alt-Svc”:“quic=”:443"; ma=2592000; v=“44,43,39,35"”,“Transfer-Encoding”:“chunked”},“data”:{“predictions”:[{“description”:“Leeds, UK”,“id”:“ce2623b925d445a74cc4901e22ca939e928b8c74”,“matched_substrings”:[{“length”:5,“offset”:0}],“place_id”:“ChIJmb1k2ko-eUgRqdwTAv26rVE”,“reference”:“ChIJmb1k2ko-eUgRqdwTAv26rVE”,“structured_formatting”:{“main_text”:“Leeds”,“main_text_matched_substrings”:[{“length”:5,“offset”:0}],“secondary_text”:“UK”},“terms”:[{“offset”:0,“value”:“Leeds”},{“offset”:7,“value”:“UK”}],“types”:[“locality”,“political”,“geocode”]},{“description”:“Leeds Train Station, New Station Street, Leeds, UK”,“id”:“39ed742c3c5081fc877d24339f278447e7a4a155”,“matched_substrings”:[{“length”:5,“offset”:0}],“place_id”:“ChIJFYU9_x5ceUgRv0eLzGmJ9So”,“reference”:“ChIJFYU9_x5ceUgRv0eLzGmJ9So”,“structured_formatting”:{“main_text”:“Leeds Train Station”,“main_text_matched_substrings”:[{“length”:5,“offset”:0}],“secondary_text”:“New Station Street, Leeds, UK”},“terms”:[{“offset”:0,“value”:“Leeds Train Station”},{“offset”:21,“value”:“New Station Street”},{“offset”:41,“value”:“Leeds”},{“offset”:48,“value”:“UK”}],“types”:[“premise”,“geocode”]},{“description”:“Leeds, AL, USA”,“id”:“ef9cd6a88ff11155a62df917023556dc7cf68ac5”,“matched_substrings”:[{“length”:5,“offset”:0}],“place_id”:“ChIJA7Tw4tQSiYgRBul-rqgQP7s”,“reference”:“ChIJA7Tw4tQSiYgRBul-rqgQP7s”,“structured_formatting”:{“main_text”:“Leeds”,“main_text_matched_substrings”:[{“length”:5,“offset”:0}],“secondary_text”:“AL, USA”},“terms”:[{“offset”:0,“value”:“Leeds”},{“offset”:7,“value”:“AL”},{“offset”:11,“value”:“USA”}],“types”:[“locality”,“political”,“geocode”]},{“description”:“Leeds Bradford Airport (LBA), Whitehouse Lane, Yeadon, Leeds, UK”,“id”:“bc0b4e5477c533cce252d22992e27ed3fb2fbca4”,“matched_substrings”:[{“length”:5,“offset”:0}],“place_id”:“ChIJc4ZWMnZYeUgR8B0rRsU2pwk”,“reference”:“ChIJc4ZWMnZYeUgR8B0rRsU2pwk”,“structured_formatting”:{“main_text”:“Leeds Bradford Airport (LBA)”,“main_text_matched_substrings”:[{“length”:5,“offset”:0}],“secondary_text”:“Whitehouse Lane, Yeadon, Leeds, UK”},“terms”:[{“offset”:0,“value”:“Leeds Bradford Airport (LBA)”},{“offset”:30,“value”:“Whitehouse Lane”},{“offset”:47,“value”:“Yeadon”},{“offset”:55,“value”:“Leeds”},{“offset”:62,“value”:“UK”}],“types”:[“establishment”]},{“description”:“Leeds University, Leeds, UK”,“id”:“f0c68fa695c6aabc314b5bb7fadffe4ee2e6b833”,“matched_substrings”:[{“length”:5,“offset”:0}],“place_id”:“ChIJryWK2gJceUgR-Wrph4RHiNM”,“reference”:“ChIJryWK2gJceUgR-Wrph4RHiNM”,“structured_formatting”:{“main_text”:“Leeds University”,“main_text_matched_substrings”:[{“length”:5,“offset”:0}],“secondary_text”:“Leeds, UK”},“terms”:[{“offset”:0,“value”:“Leeds University”},{“offset”:18,“value”:“Leeds”},{“offset”:25,“value”:“UK”}],“types”:[“establishment”]}],“status”:“OK”}}}

1 Like

A tutorial for google autocomplete like the example posted https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform. I have no problem hard coding it, but cannot seem to get a return like posted by hyperbytes using Wappler. This would be extremely helpful. thanks

No promises but i will see what I can sort

Thanks a million. If I get it I will do the same

is there an example available that shows how to get the google autocomplete working in wappler?

We will soon add a dedicated App Connect Google places auto complete component. So you can use it much easier in Wappler.


thanks for your reply George… any idea when this would be available (days, weeks, or months)? If it’s weeks away, might you have a working code sample you could forward or point me to?