Skip to Content

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.

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 😉

9 Comments
You must be Logged on to comment or reply to a post.
  • 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

    /
  • 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 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

        /