Page 1 of 1

map.refresh asynch side effect - clicking button twice

Posted: Fri Oct 19, 2012 7:21 am
by Haim

I'm building an app to display business locations on a Google map. Like the example (http://help.gotiggr.com/getting-start...) - I'm offering a choice of two buttons - one to find businesses around a type address location and one to use the phone's physical location as the location to find local businesses.

The issue now occurs with the first button (i.e. use a typed address to find businesses).

Here's the basic structure of my events:

mobilebutton1 (the button that should read the "location" text field and use it as the address to center the map and find businesses (most of the code is directly from the Tiggzi example code - until after the map.refresh call):

// ********************* beginning of code **************************
var location = Tiggr ('location');
if (location.val() == '') {
alert ('Please enter a location.');
return;
}
var map = Tiggr('googlemap1');
map.options['address'] = location.val();

map.refresh();

// set local storage variables so I can use this in my database call to find businesses within some radius
localStorage.setItem('myLatitude',JSON.stringify(map.gmap.getCenter().lat()));
localStorage.setItem('myLongitude',JSON.stringify(map.gmap.getCenter().lng()));

// execute service to get the local business information now that we've set location by address.
GetLocalBusinesses.execute({});
// ******************************** end of code ********************************

The problem I see is that after the map.refresh() call, the map is not immediately updated (I think it's an asynchronous call) - so I can't rely on the next few lines of localStorage.setItem to properly set the lat and lng by the maps new center (and therefore, the GetLocalBusinesses call is still showing the previous location.

If I click this button a second time... everything is ok and shows the new location and associated businesses.

Therefore, it makes sense that this is the asynchronous side effect of the map.refresh call.

How would I best wait until the map.refresh is finished before getting the new map center and business information (based on the new map center)?


map.refresh asynch side effect - clicking button twice

Posted: Fri Oct 19, 2012 9:45 am
by Maryna Brodina

Hello!

map.refresh() calls the Google maps API where is method geocode and it's really asynchronous. For asynchronous function there is a parameter "callback" which can be called after map is refreshed, but it's not supported in Tiggzi. You should call method map.geocoder.geocode, send there location and function which will save latitude and longitude into the local storage. Here is an example:

this.geocoder.geocode({ 'address': this.options.address},function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
_that.options.latitude=results[0].geometry.location.lat();
_that.options.longitude=results[0].geometry.location.lng();
that.gmap.set("center",new google.maps.LatLng(that.options.latitude,_that.options.longitude));
_that.renderMarkers();
_that.options.mapElement.gmap('refresh');
} else {
console.log("Geocode was not successful for the following reason: " + status);
}
});

$t.TiggziMapComponent refresh