Autocomplete formatted address via Google Places API

[kemi]

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

http://scn.sap.com/community/developer-center/front-end/blog/2013/08/02/creating-sapui5-applications...

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

var url = "proxy/http/maps.googleapis.com/maps/api/geocode/json?address=" + 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.