List service has to be invoked twice to show all geopoints

[Yurii Orishchuk]

Hi Ben,

I've been able to reproduce this problem.

We need some time to investigate this issue.

Currently i applied a workaround to your project. Please check it.

Regards.

[Ben Walker]

Yurii

Thanks for the workaround - works nicely.

However, having different but similar issue now.

1. When I invoke the list service (via button click) all the markers display.

2. I then delete one of the markers from the DB directly.

3. I refresh the map using (this is the only way I know how to remove the markers from the map):

   var myOptions = {
   zoom :10,
   center: new google.maps.LatLng(37.63, -122.424),
   };

   var map = new google.maps.Map($('div[dsid="googlemap1"]').get(0), myOptions);
   Appery("googlemap1").gmap = map;

4. Invoke the list service again. HOWEVER all the markers still list (even the one I deleted).

   If I repeat steps 3. and 4. again, the list service only lists the markers still in the DB.

   I don't know why I have to repeat steps 3. and 4. twice, in order to only list the markers in the DB?

   I think it may be a timing issue (like my earlier problem)?

   Thanks

[Ben Walker]

Alternatively, if you could help me with a better way to remove the markers, that would be great!

[Bruce Stuart]

I've worked a lot with the google map API and with the maps here in Appery.

Check out this post - and see if helps you understand a bit more about how to remove a marker from a map (more correctly though - you tell the marker - that it no longer belongs to or should follow the map - you remove the markers knowledge of the map it is attached to...) here's the post - and I also have more code examples if you need them:

https://getsatisfaction.com/apperyio/...

[Ben Walker]

Thanks Bruce. I'm still having some trouble:

Code to place marker:

var map = Apperyio('googlemap1').gmap;
markerArray = [];

// Add a marker to the map and push to the array.
function addMarker(location) {
var marker = new google.maps.Marker({
position: location,
map: map
});
markerArray.push(marker);
console.log(markerArray);
}

var haightAshbury = new google.maps.LatLng(37.7699298, -122.4469157);

addMarker(haightAshbury);

Then, code to remove marker:

for (var i = 0; i < markerArray.length; i++) {
markerArray.map = null;
console.log(markerArray);
}

Apperyio('googlemap1').refresh();

But it doesn't work! The map refreshes, but the marker is still there.

[Ben Walker]

Thanks, that helped. Can now create and delete markers using global array.

Now for the next part - taking geopoint data from a DB and using that to create markers...

No idea how to do that!

[Bruce Stuart]

in your success event ... where you read the data from the database....the inbound parameter is 'data' ---- that's an JSON array of data elements from your database.

It's always good practice - whenever you do something in an Appery UI event that's more than 2-3 lines - to put the 'working' code in a separate Javascript asset.

So -- in your success event for the datasource:

fPutMarkersOnMap( data, othenameofyourgooglemap ); // call the function..

In your own Javascript ( let me know if you don't know how to create this...)

function fPutMarkersOnMap( data, omap ){
// objective of function - put markers on map - for geopoints that are loaded in my DB....

var nLength = data.length;
var i;
var nlongindex = 0;
var nlatindex = 1;
var nlong ;
var nlat;
aofmarkers = []; // this should be your public array

if (nLenght === 0){

// No data came back from your service call - perhaps log or alert the user??
alert('no markers to place on map for: ' + somedataconditionetc.);
}
else // process the markers from the data...
{
for (i=0; i < nlength; i++) {
nlong = data.yourfieldnamewithgeopointdata[ nlongindex];
nlat = data.yourfieldnamewithgeopointdata[nlatindex];
omarker = {} // insert code here to create the new marker with the nlong and nlat coordinates ... see google API ... see link I'm providing below...you have the map to attach it to as one of the inbound coordinates to this function correct?
/// you already have a publicly visible array of markers correct?
aofmarkers.push( omarker ) ;
} .. end the for loop
console.log( 'placed :' + aofmarkers.length + " markers on the map .. " )
} // end the if statement
// any other dubgging or other information you want to put here - like perhaps omap.refresh() , etc.

} // end the function

That code is likely not bullet proof - but it illustrates the concept ? Also - you can easily set a degugger break point to this function - when it's not 'virtually' created - and it's outside of the Appery UI events. Set a breakpoint at the aofmarkers statement - and walk this one through 1 line at a time during execution - to make sure we've got the variable names, etc. declared correctly.... and you 'know' what's in 'data' --- you might want to rename data to adata for this function -- since it's a javascript array - object. I believe that the names --- should help you understad the datatype of any variable...

Hope this helps!
Bruce

[Bruce Stuart]

oh - and I almost forgot - be sure to keep this by your side when working with google maps ---- it's so very helpful - everyone should have one:

https://developers.google.com/maps/do...

lol - so rarely say that.

[Bruce Stuart]

Ben,

Did any of this help? Have a great weekend,

Bruce