Google API Autocomplete with SAPUI5
Introduction
One of my client ask me to integrate Google API inside SAP UI5 to validate addresses. There is lot of blog post related this subject, then I decided to merge all those information into one extended UI control that anybody can reuse in their own project.
Description
Prerequisite
- Of course what you need before all is to get Google API Key for the Google Maps autocomplete
- Then be sure you can handle CORS issue by using
- a proxy (for production purpose)
- destination in SAP Cloud platform
- CORS plug-in for Chrome or Firefox (development purpose)
How-To
- Create a project from a template provided by SAP Web IDE
- Create a folder named utils (the name is personal, you can use another one)
- Upload the SearchAddressInput.js from GitHub and put it inside utils folder
- In the manifest, add utils/SearchAddressInput.js as a new resources
- In the view controller, add references to the library : <my.project.namespace>.utils.SearchAddressInput
- Finaly add the object to the page
var oCtrl = new SearchAddressInput({
GoogleAPI: "AIzaSyBFXRi1HKVSrjL_Qy932KyMWXr3-M1x4rU"
});
this.getView().byId("idMaPage").addContent(oCtrl);
CORS Issue
To avoid the CORS issue, you can use the property ProxyPattern to bypass this issue. In practice, you can put anything you want because I concatenate the ProxyPattern with the rest of the Google URL:
<ProxyPattern>/maps/api/place/autocomplete/json
Example:
- For SAP Web IDE
- ProxyPattern = “/GoogleDestination“
- Do not forget to modify your neo-app.json
Conclusion
All the code and the extention are available into Gihub :
I will updated it as soon as I find new features for this.
Use it, clone it, extend it and … enjoy 😉
Hi Joseph,
Nice blog, thanks for sharing!
Have you heard of UI5Lab (https://github.com/UI5Lab)? Maybe you could add this custom control to the repo?
Cheers,
Pierre
Hey,
I didn’t know this repo, thanks, I will probably do it.
Cheers,
Joseph
HI Joseph,
Nice Blog .
i am getting below error can you please help me.
I have also registered with New API key but still facing error.
Thanks in advance.
Harshal
Hello,
You have a CORS issue, look at your first error in the console : No 'Access-Control-Allow-Origin'.
The request is not send so the UI Control doesn't react as normal.
Correct the CORS issue 😉
Regards,
Joseph
HI Joseph,
Thanks for reply , issue got resolved added plugin for CORS.
Regards,
Harshal
Good 🙂
Hi Joseph Berthe ,
Awesome blog 🙂
Can you please help me in configuring the destination where according to your blog modifying the neo.app.json .
I tried all the URL's by creating the new destinations and modifying the neo.app.json .
But the URL's http://maps.googleapis.com(HTTPS IS not even getting established) is giving the status code 302:FOUND when i click on Check Connection .
But when running the UI5 app locally adding this URL( "https://cors-anywhere.herokuapp.com") is pulling the search results but when i remove it and trying to configure in SAP web ide destinations it is not working 🙁
Please let me know where i am doing wrong.
Hi,
As I can see on your screenshot, you use http for Google API, try using HTTPS.
Regards,
Joseph
Hi Joseph,
I actually solved it by adding the link as shown in the below screenshot.
Not sure if this is the right approach but it works and not giving any CORS issue
But is it possible if the whole logic of Google Map API for Autocomplete can be implemented without an API key or is there any alternate option to get the autocomplete addresses in SAP UI5 Application.
Thanks,
Abhinay Dogiparthi
Can we get geo coordinates in this API?
Hi I am new to SAPUI5 and try to use this autocomplete function. But when I do all the described steps I get many error messages.
It seems like I get this cors error like others but I dont know how to fix it. I am working with the WEB IDE for the developement.
Thanks for help in advance.