Skip to Content
Author's profile photo Joseph BERTHE

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 😉

Assigned Tags

      11 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Pierre Dominique
      Pierre Dominique

      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

      Author's profile photo Joseph BERTHE
      Joseph BERTHE
      Blog Post Author

      Hey,

      I didn’t know this repo, thanks, I will probably do it.

      Cheers,

      Joseph

      Author's profile photo Harshal Narkhede
      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

      Author's profile photo Joseph BERTHE
      Joseph BERTHE
      Blog 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

      Author's profile photo Harshal Narkhede
      Harshal Narkhede

      HI Joseph,

      Thanks for reply , issue got resolved added plugin for CORS.

      Regards,

      Harshal

      Author's profile photo Joseph BERTHE
      Joseph BERTHE
      Blog Post Author

      Good 🙂

      Author's profile photo Abhinay Dogiparthi
      Abhinay Dogiparthi

      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.

       

      Author's profile photo Joseph BERTHE
      Joseph BERTHE
      Blog Post Author

      Hi,

      As I can see on your screenshot, you use http for Google API, try using HTTPS.

      Regards,

      Joseph

      Author's profile photo Abhinay Dogiparthi
      Abhinay Dogiparthi

      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

      Author's profile photo Sooraj NK
      Sooraj NK

      Can we get geo coordinates in this API?

      Author's profile photo Patrick Oelpmann
      Patrick Oelpmann

      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.