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/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,
- call google place API via UI5 javascripts and return a Json file with formatted addresses
- Set the Json file into OData Model
- 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.
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
Hi Silvio, Thank you for your comments. Please find code in the url below:
addresscomplete/WebContent at master · keminli/addresscomplete · GitHub
Thank you!!! I´ll try to understand the code...
Hi Kemin,
Good one, Thanks for sharing! 🙂
Regards,
Sai Vellanki.
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?
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?
I´m using Chrome.. I´ll try using IE and Firefox... thanks for your help...
Hi,
how must I modify the URL (or the Server) that it is working? I tried all but nothing helped.
Current URL:
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 😉 .
hi, the odata call should only have proxy/http/maps.googleapis.com/maps/api/geocode/jso....
please check how you get https://swudev2.salt prefix.
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
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
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
$(".view1").control()[0].getParent().byId("idAddress").setModel(oModel1);
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. 🙂