I've been working on integrating two APIs – Instagram and Google Maps.
While I've managed to get everything functioning smoothly, there's an issue with displaying "up to 20 pictures" around a specific location. I'm unsure why this inconsistency is occurring.
Depending on the distance specified in the query, sometimes I receive up to 12 pictures, other times 13, and occasionally only 3. For example, without using any distance parameter, I can see up to 12 pictures; setting the distance to 1000 yields about 8 pictures, but increasing it to 2000 or more results in only 1-3 images at most.
If anyone has insight on how I can address this problem, I'd appreciate your input. Below is an excerpt of the code responsible for this functionality. Despite knowing that there are over 20 pictures available in the area, they aren't all displayed. For instance, a picture I posted yesterday isn't showing, and currently, only 10 posts are visible from that location.
function retrieveData() {
return $.ajax({
url: "https://api.instagram.com/v1/media/search?lat=59.24642059999999&lng=18.0613027&distance=1000&access_token=MY_ACCESS_TOKEN_CODE",
dataType: 'jsonp',
cache: false });
}
var dataPromise = retrieveData();
dataPromise.done(function(data) {
for (var i = 0; i < 20; i++) {
$(".myLocation").append("<li><img src='" + data.data[i].images.thumbnail.url + "'></img>"
+ "<p class='thumblikes'><img src='img/likeicon.png'></img>" + data.data[i].likes.count + "</p>"
+ "</li>");
Thank you for your assistance!