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 :

• https://github.com/jbesap/ui5-SearchAddressInput

I will updated it as soon as I find new features for this.

Use it, clone it, extend it and … enjoy 😉