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-based-on-public-json-apis-or-web-services

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

/wp-content/uploads/2015/08/code1_780290.png


   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

/wp-content/uploads/2015/08/code2_780291.jpg

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.

/wp-content/uploads/2015/08/auto_780215.jpg

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.

To report this post you need to login first.

11 Comments

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

  1. 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…

    Sílvio

    (0) 
  2. 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

    http://<server>/ui5/addresscomplete/proxy/http/maps.googleapis.com/maps/api/geocode/json?

    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?

    (0) 
    1. Kemin Li 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?

      (0) 
  3. Maximilian Seubert

    Hi,

    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/maps.googleapis.com/maps/api/geocode/json?address=” + sTerm + “&sensor=false”

    Error:

    GET https://swudev2.salt-solutions.de/sap/bc/ui5_ui5/sap/zmsb_soloprint/proxy/http/maps.googleapis.com/maps/api/geocode/json?address=berlinnn&sensor=false 404 (NOT FOUND)


    And direct with jsonp is also not working because the Google API don´t like JSONP ๐Ÿ˜‰ .

    (0) 
  4. ไป˜ ๆ–‡ๆณข

    GET https://webidetestingzuitestbinding-pxxxxxx0trial.dispatcher.hanatrial.o…s.googleapis.com/maps/api/geocode/json?address=42%20Sandon%20&sensor=false 404 (Not Found)

    Hi ,  Kemin ,  i get error as below ,   i test it in Web IDE ,  the url  set as  var url = “proxy/http/maps.googleapis.com/maps/api/geocode/json?address=” + sTerm + “&sensor=false”;

    i try to add https://swudev2.salt   , set as https://swudev2.salt /proxy/http/maps.googleapis.com/maps/api/geocode/json?address=” + sTerm + “&sensor=false”

    but it give me another error  net::ERR_NAME_NOT_RESOLVED

    (0) 
  5. Shahid Noolvi

    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

     

    (0) 

Leave a Reply