Forum | Appery.io

Hi Guys,

I'm trying to pull Longitude and Latitude data from seperate columns located in a database collection call locations, then convert these into markers on a googlemap. The difficulty I'm having is only returning the results within a certain radius of the current users location.

I have sucessfully created a button to get the location and input into text fields, I have also got a data service called getcords for the locations_Location_list_service but not sure where to go from here.

Any help would be appreciated

Hello Eric,

Could you please clarify, have you read our tutorial: http://devcenter.appery.io/tutorials/... ?

Yes, however this tutorial implies that you have an address but In my situation I have longitude and latitude coordinates with the complexity of introducing a defined radius. I have also read the article on returning customers based on there location and radius defined by the user but was unable to get the 2 to work.

Hi Eric,

Please follow these steps:

1 add Location-list service to the page.

2 invoke this service on page load.

3 open page in "data" mode.

4 open "Event" bottom panel.

5 add "Success" event handler for datasource from 1step.

6 populate it with following code:

pre

//Were "multiGoogleMap" is map component name.
var map = Appery("googlemap_1").options.mapElement.gmap('get', 'map');

 var CreateMarker = function(data){ 
     console.log("add marker with coordinates = " + data.lat + " = " + data.long); 
     var marker = new google.maps.Marker({ 
         position: new google.maps.LatLng(data.lat, data.long), 
         map: map 
     });         
 }; 

 for (var i = 0; i < data&#46;length; i++) 
     &#47;&#47;In this function you should to pass latitude, longitude and text to display in infowindow&#46; 
     CreateMarker({lat: data[i]&#46;Lat, long: data[i]&#46;Lng, location:  "SomeData"}); 

/pre

See details: http://prntscr.com/4l22lt/direct

That's all.

Regards.

Thats great, it worked right away.

Thankyou once again, I think allot of people will find this use full when they have coordinates apposed to address's that needto be converted first.

Hi Yurri,

I have used the above code which works great in the browser and in the testing app however when I try to export to a apk I get 10 syntax errors on the code above:

I have tried to understand where the error's are however everything I alter seems to cause error with something else.

Cheers Eric

Hi Eric,

This is JS compressor errors.

Please provide us your app public link we need to take a look on it.

Regards.

Hi Yurri,

Please find the link below then click on Report Map in the top right, upon clicking on Show Radars, Show Sighting, Show Incidents that is when that javascript is run:

http://appery.io/app/mobile-frame?src...

Kind Regards
Eric

Eric,

Here is correct code for minification:

pre

//Were "multiGoogleMap" is map component name.

 var map = Appery("googlemap_11").options.mapElement.gmap('get', 'map'); 

 var CreateMarker = function(data){ 

     console.log("add marker with coordinates = " + data["lat"] + " = " + data["long"]); 

     var marker = new google.maps.Marker({ 

         position: new google.maps.LatLng(data["lat"], data["long"]), 

         map: map 

     });         

iconFile = 'http://maps.google.com/mapfiles/ms/icons/red-dot.png';
marker.setIcon(iconFile);

 }; 

 for (var i = 0; i < data&#46;length; i++) 

     &#47;&#47;In this function you should to pass latitude, longitude and text to display in infowindow&#46; 

     CreateMarker({"lat": data[i]["Lat"], "long": data[i]["Lng"], location:  "SomeData"}); 

/pre

Regards.

Hi Yurri,

Thats worked exactly as expected, I must say the support team for appery.io is very efficient and really know there stuff. You guys certainly provide excellent support and and will recommend this product to anyone who is designing an app.

Thank you once again.

Regards Eric