Hi All,
Kinda stuck with inserting Photo images from ACS Places to individual annotation on leftView. I have some places /locations with a photo assigned to them. When these annotations are loaded into the map and once a user selects a locations an annotation label pops up with the title,subtitle and a photo.
I have managed to display photo images in annotations but they are all showing the same images and each locations has its own photo
please find my code below:
function showMapLocations(){ //Ti.App.fireEvent('show_indicator'); //latitudefast = Titanium.App.Properties.getDouble('latitude'); //longitudefast = Titanium.App.Properties.getDouble('longitude'); //Ti.API.info(atLoc.longitude); Cloud.Places.query({ page: 1, per_page: 40, where: { lnglat: { '$nearSphere': [atLoc.longitude, atLoc.latitude], '$maxDistance': 0.00050518 }, } }, function (e) { if (e.success) { var annotations = []; if (e.places.length == 0) { alert("no lounges found"); } else { var annotations = []; var big_img = Titanium.UI.createImageView({ width:25, height:25, }); for (var i = 0, l = e.places.length; i < l; i++) { //Ti.API.info(e.places[i].photo.urls[0].square_75); //big_img.image = e.places[i].photo.urls[0].square_75; PlaceID = e.places[i].id; showMapPhoto(PlaceID); Ti.API.info(PlaceID); showMapPhoto(function(id){ Ti.API.info('photo'+id); big_img.image = id; }); Ti.API.info('image'+PlaceImage); var location = Titanium.Map.createAnnotation({ latitude:e.places[i].latitude, longitude:e.places[i].longitude, animate:false, title:e.places[i].name, subtitle:e.places[i].address, image:'images/pin.png', leftView: big_img //myid:id }); Ti.API.info(e.places[i].name); annotations.push(location); } //table.setData(data); //annotations.push(location); } mapview.setAnnotations(annotations); //Ti.App.fireEvent('hide_indicator'); } else { error(e); //alert(e); } }); } function showMapPhoto(callback){ Cloud.Places.show({ place_id: PlaceID }, function (e) { if (e.success) { var place = e.places[0]; Photo = place.photo.urls.square_75; callback(Photo); //Ti.API.info(Photo); //cb(Photo); } else { alert('Error:\\n' + ((e.error && e.message) || JSON.stringify(e))); } }); }
1 Answer
Accepted Answer
showMapPhoto is an asynchronous call; you need to wait until the callback is complete before moving on to the next element.
i might also suggest that you store the URL as a custom field on the place to minimize API calls... remember you have a cap on the number of API calls you can make
Your Answer
Think you can help? Login to answer this question!