Issues with Google map location display off of Appery Backend locations

[Maryna Brodina]

Hello! Working on it.

[Maryna Brodina]

Most likely you set markers when map is not ready (not loaded). Try the following code on page Load event:
prefunction addMarkersAfterMapReady(mapName) {
if (!Appery(mapName).gmap) {
setTimeout(function () {addMarkersAfterMapReady(mapName)}, 100);
} else {
//HERE IS YOUR CODE
}
}
addMarkersAfterMapReady('multiGoogleMap');/pre
Instead //HERE IS YOUR CODE put the code you have now on Load event.

[Cody Blue]

Thank you, this does solve the marker display problem. I appreciate the help and support. However there is variable display issue that still persists. Please see below.

I insert the following code in the placeholder (//HERE IS YOUR CODE). Please note two console.log statements towards the end of the snippet

var locationStrings = localStorage.getItem('locationResponses');
var locationsList = $.parseJSON('[' + locationStrings + ']');
for(var c = 0; c < locationsList.length; c++) {
var locationItem = locationsList[c];
for (var i in locationItem) {
if(i == 'location') {
getCoords.execute({
'data' : {
'address' : locationItem.location,
'sensor' : true
}
});
}
}
}
console.log(locationHelper.aLocations); // first
console.log(locationHelper.aLocations[0]); // second

Code: Select all

      var map = Appery('multiGoogleMap'); 
      map.refresh(); 

The problem is that while first console.log above displays a 4X3 array (please see screen shot in my next reply) as should be the case, the second console.log displays undefined (in its current access of [0] above) and also when tested with any combinations of valid array indices (e.g. [1], [0][1], etc.). This is causing me not being able to access the elements in the array. Please note that the JS object locationHelper is defined exactly as in the tutorial:

http://docs.appery.io/tutorials/addin...

Could you advise on this seemingly anomalous behavior?

Thanks in advance.

[Cody Blue]

[Maryna Brodina]

Hello! locationHelper.aLocations[0] handling is correct and should work. Most likely locationHelper.aLocations is not defined in this place. If you follow tutorial locationHelper.aLocations fills in while mapping of convertAddr service. You see convertAddr is filled in because this is how console.log works - shows the last object value. Please try the following way. Add an alert instead console.log, alert shows current value. You're likely to see empty alert with undefined. You can also add:
prealert(locationHelper&#46;aLocations);
alert(locationHelper&#46;aLocations[0]);/pre
in the end of code in mapping from results to converted. You should see locationHelper.aLocations array is filling in. All these alerts should be after alerts added in code on page Load event.

[Cody Blue]

Thanks again for the feedback. I added alerts to replace console.log (please see snippet below) and also at the end of the code in the mapping to converted in getCoords service. I notice however that the alerts (marked first and second in code below) show up before the alerts in getCoords: and perhaps thats why there is the issue of access before definition which happens only once getCoords is executed. This sequence of alerts happens even if I place the alerts out of the timeout loop (marked third and fourth in code below), or after a later event on page load. The alerts in the mapping (getCoords) work perfectly fine though and show the array getting populated, as you had indicated. However the lack of sequential display of alerts is unexpected and probably has to do something with the timeout.

How might we be able to explain this behavior and solve the issue?

function addMarkersAfterMapReady(mapName) {
if (!Appery(mapName).gmap) {
setTimeout(function () {addMarkersAfterMapReady(mapName)}, 100);
} else {
var locationStrings = localStorage.getItem('locationResponses');
var locationsList = $.parseJSON('[' + locationStrings + ']');
for(var c = 0; c < locationsList.length; c++) {
var locationItem = locationsList[c];
for (var i in locationItem) {
if(i == 'location') {
getCoords.execute({
'data' : {
'address' : locationItem.location,
'sensor' : true
}
});
}
}
}
alert(locationHelper.aLocations); // first
alert(locationHelper.aLocations[0]); // second
var map = Appery('multiGoogleMap');
map.refresh();
}
}

addMarkersAfterMapReady('multiGoogleMap');
alert(locationHelper.aLocations); // third
alert(locationHelper.aLocations[0]); // fourth

[Maryna Brodina]

Hello! It works as it suppose to. Could you clarify what are you trying to get as a result?

[Cody Blue]

Sure. I need to access locationsList array where "first" and "second" are marked, to add further functionality therein. Please let me know if I can provide further clarification. On a related note, shouldn't the alerts from within getCords.execute show up earlier than the ones from "first" and "second" markers in terms of code sequencing?

[Cody Blue]

Sure. I need to access lcationHelper.alocations array where "third", "fourth", "second", and "first" are marked in code above and at subsequent locations in the project, to add further functionality. Please let me know if you need further clarifications. On a related note, shouldn't the alerts from within getCords.execute show up earlier than the ones from "third" and "fourth" ones in terms of code sequencing?

[Maryna Brodina]

Hello! You need to know that success events for getCoords service can be triggered in order different from order you call them - they're not sync. If you to want to run some code or service when all data is recieved here is what you have to do.
Create some global variable (for example totalLocations). To do that create JS asset:
prevar totalLocations;/pre
Before this line
prefor(var c = 0; c < locationsList&#46;length; c++) { /pre set totalLocations pretotalLocations = locationsList&#46;length;/preon getCoords service success event run the following code:
pretotalLocations -= 1;
if (totalLocations === 0) {
&#47;&#47;all data is already in locationHelper
&#47;&#47;invoke your service or call function here&#46;
}/pre