Skip to Content
Author's profile photo Kemin Li

Autocomplete formatted address via Google Places API

Formatted addresses which are validated by Google or Veda database provide more accurate customer address information to users. If addresses of millions users or customers in an IT databases are unformatted or not uniformed, the address mess will make IT business users difficult to make statistics and retrieve valuable information and increase their administration effort. Furthermore google formatted address contains Geocode –latitude and longitude which can identify exact location and show the location in the google maps. Therefore when users are typing address information on an UI5 web page, it is better that we populate suggested address list from Google Places API to the input field and let the user choose right formatted address.

How to achieve this in SAPUI5?

Technically there are two ways in SAP UI5 to achieve this function:

    1. Via SAP NetWeaver gateway. When a user is typing address at the input field, a OData call is generated and this trigger Http client service class to call Google Places API in the NetWeaver gateway, then retrieve the formatted address list, then send the OData from SAP Net Weaver gateway to UI5 page and display them in the address input field

    2. Call Google Place API directly via Javascripts Ajax, After the Json file containing formatted address is received from Google API, these addresses will be displayed in the address input field.

In this blog I will explain how to use the second way to fulfill auto complete address function.

How to call Google Place API directly via Javascripts Ajax

I referred to below UI5 blog to know how to call open API via Javacripts Ajam

In the case, the URL which will be used to call Google Places API is as below:

var url = “proxy/http/” + sTerm + “&sensor=false

Walk Through

I created a UI5 project at Eclipse and followed below steps

   1. At an XML view, eg businesspartner.view.xml, create a address input field with suggest items and add a event listener function ”onAddressTyped’” to this field


   2. At the function ”onAddressTyped’” of Controller Javascript, eg businesspartner.controller.js,

    1. call google place API via UI5 javascripts and return a Json file with formatted addresses
    2. Set the Json file into OData Model
    3. Bind formatted addresses in OData Model with suggest items of the address input field


If I run the UI5 program on the test server and type more than 8 charactor at address input field, I can get suggested address list from Google Places API.


Then users can choose a formatted address which he/she want to type in. I hope this can help you to call google place API and build a function with formatted address information.

Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Silvio Miranda
      Silvio Miranda

      Hi Kemin Li.. I liked your post.. could you post your code snipets from this project? begginers like me need more code to help us.. 🙂 ..

      Best regards...


      Author's profile photo Kemin Li
      Kemin Li
      Blog Post Author

      Hi Silvio, Thank you for your comments. Please find code in the url below:

      addresscomplete/WebContent at master · keminli/addresscomplete · GitHub

      Author's profile photo Silvio Miranda
      Silvio Miranda

      Thank you!!! I´ll try to understand the code... 

      Author's profile photo Sai Vellanki
      Sai Vellanki

      Hi Kemin,

      Good one, Thanks for sharing! 🙂


      Sai Vellanki.

      Author's profile photo Silvio Miranda
      Silvio Miranda

      When I execute the routine and type some address no popup with sugestions appear.. when I debug the code I see the error

      : Failed to load resource: the server respondes with a status of 404 )Not Found


      My web server is in an intranet... and I saw that I must use proxy... but is not working? any of you have any idea about whats wrong?

      Author's profile photo Kemin Li
      Kemin Li
      Blog Post Author

      Silvio, Which web browser are you using to run it, IE, Chrome or Firefox? I guess maybe this is because of some setting in certain browser. Could you change to another browser  to run it?

      Author's profile photo Silvio Miranda
      Silvio Miranda

      I´m using Chrome.. I´ll try using IE and Firefox... thanks for your help...

      Author's profile photo Former Member
      Former Member


      how must I modify the URL (or the Server) that it is working? I tried all but nothing helped.

      Current URL:

      var url = "proxy/http/" + sTerm + "&sensor=false"


      GET 404 (NOT FOUND)

      And direct with jsonp is also not working because the Google API don´t like JSONP 😉 .

      Author's profile photo Kemin Li
      Kemin Li
      Blog Post Author

      hi, the odata call should only have proxy/http/

      please check how you get https://swudev2.salt prefix.

      Author's profile photo 付 文波
      付 文波

      GET https://webidetestingzuitestbinding-pxxxxxx0trial.dispatcher.hanatrial.o… 404 (Not Found)

      Hi ,  Kemin ,  i get error as below ,   i test it in Web IDE ,  the url  set as  var url = "proxy/http/" + sTerm + "&sensor=false";

      i try to add https://swudev2.salt   , set as https://swudev2.salt /proxy/http/" + sTerm + "&sensor=false"

      but it give me another error  net::ERR_NAME_NOT_RESOLVED

      Author's profile photo Former Member
      Former Member

      Getting Error : Uncaught TypeError: Cannot read property 'getBinding' of null

      Filter is not working.

      aFilters.push(new sap.ui.model.Filter("formatted_address",sap.ui.model.FilterOperator.Contains, ""));
      oEvent.getSource().getBinding("suggestionItems").filter(aFilters);  --> Error in this line


      Author's profile photo Former Member
      Former Member

      Hi, oEvent is not same as the oEvent of the parent and thus the Input field wont be accessible in the callback function.


      I tried using jquery, accessed the view and set the model to the view. Something like this


      Also, the purpose of the filter here is to bind the data to the suggestionItems. So I bound it in this way.

      Hope this helps. 🙂