Skip to Content

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.

https://gyazo.com/ee62119acfd4756ac81063c3fb025ff6

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 😉

To report this post you need to login first.

6 Comments

You must be Logged on to comment or reply to a post.

  1. Harshal Narkhede

    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

    (0) 
    1. Joseph BERTHE Post author

      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

      (1) 

Leave a Reply