Hi guys,
I am trying to develop google maps application that calculates the distance between two locations i.e., current location and my site location .
Address of site location is provided by odata service and current location is calculated using google maps api's.
my table binding is as follows:
var listAsTable = new sap.m.List("lt",{
headerDesign: "Plain",
columns: [
new sap.m.Column({
width: "0.5em",
header: new sap.m.Label({text: "Store Name",design: sap.m.LabelDesign.Bold})
}),
new sap.m.Column({
width: "0.5em",
header: new sap.m.Label({text: "City",design: sap.m.LabelDesign.Bold})
}),
new sap.m.Column({
width: "0.5em",
header: new sap.m.Label({text: "Address",design: sap.m.LabelDesign.Bold})
}),
new sap.m.Column({
width: "0.5em",
header: new sap.m.Label({text: "Quantity",design: sap.m.LabelDesign.Bold})
}),
],
items: {
path: "/SiteStockAddrCollection",
template: new sap.m.ColumnListItem({
cells: [
new sap.m.ObjectIdentifier({
title: "{SiteDesc}"
}),
new sap.m.Text("text1",{
text: "{SiteCity}"
}),
new sap.m.Text("text",{
text:{
path:"SiteFullAdd",
formatter:function(oVal){
return oController.gettext(oVal);
}
}
}),
new sap.m.Text({
text: "{Stock}"
}),
],
type:sap.m.ListType.Active,
press:function(oEvent)
{
}),
}
});
my gettext() function in controller is :
gettext:function (oEvent){
flag=true;
var dist=0;
vargeocoder;
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(successFunction, errorFunction);
}
//Get the latitude and the longitude;
function successFunction(position) {
var lat = position.coords.latitude;
var lng = position.coords.longitude;
codeLatLng(lat, lng);
};
function errorFunction(){
flag=false;
alert("Geocoder failed");
};
function initialize() {
geocoder = new google.maps.Geocoder();
};
function codeLatLng(lat, lng) {
var latlng = new google.maps.LatLng(lat, lng);
new google.maps.Geocoder().geocode({'latLng': latlng}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[1]) {
var add=results[0].formatted_address;
calcRoute(add ,oEvent,function(dist){
flag=false;
dist=dist;
});
} else {
flag=false;
alert("No results found");
};
} else {
flag=false;
alert("Geocoder failed due to: " + status);
};
});
} ;
function calcRoute(departureCity,destinationCity,callback) {
var directionsService = new google.maps.DirectionsService();
vardirectionsDisplay = new google.maps.DirectionsRenderer();
var request = {
origin:departureCity,
destination:destinationCity,
travelMode: google.maps.TravelMode.DRIVING,
};
directionsService.route(request, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
dist=result.routes[0].legs[0].distance.text;
// I have to set this " dist " to my table control i.e., if i uncomment following lines it wont work
// var oArticleLable=sap.ui.getCore().byId("text1");
//var stre=oArticleLable.;
}
else{
flag=false;
alert('Direction was not successful for the following reason: ' + status);
}
});
} ;
// while(flag){
//
// }
/* function v(){
varintvl = setInterval(function() {
alert(dist);
if (dist !=0) {
var oArticleLable2=sap.ui.getCore().byId("text");
oArticleLable2.setText(dist);
clearInterval(intvl);
//console.log(dist);
}
}, 1000);}*/
// As google API's are asynchronous the dist value at this point is 0 so this column of the table is blank
return dist;
}
As Google map API's are asynchronous returning the value is not an option .I also tried using while loop,that freezes mu UI.
This kind of table binding, is it possible in SAPUI5????
My output is:
Frank Welz , Ajain VivekVenkatesh IlangoJohn Patterson DJ Adams could you please help me out with this issue