Google Street View JS APIv3 retry request if street data found ZERO_RESULTS

Question

When I get panorama for marker within 50 meter max radius then sometimes it finds no panorama but if I'd set about 60+ meter radius then it would have worked.

So I'd like to auto make another request for street data with +10 meters radius and if nothing was found up to 100 meters total then stop completely.

I know how to loop it in procedural JS with for or while whatever, but I don't know OOP JS so I am not sure where/how to fire request again based on function response.

Basically code looks like

marker1.addListener('click', function(event) {
    popup1.open(map, marker1);
    sv.getPanorama({location: event.latLng, radius: 50}, processSVData);

});

...

function processSVData(data, status) {
        if (status === google.maps.StreetViewStatus.OK) {
            panorama.setPano(data.location.pano);
            panorama.setPov({
                heading: 270,
                pitch: 0
            });
            panorama.setVisible(true);

        } else if (status === google.maps.StreetViewStatus.ZERO_RESULTS) {
            alert(status + " need to retry with radius +10 merters but how?");
        } else {
            alert(status + " cant do nothing about it bye");
        }
    }

Here's full example marker B has street view data at 50 meters when marker A does not. JSFiddle

Answer 1

Assuming that there is no conflict elsewhere in the program with the panorama queries calling too quickly (going over query limit), then a possible solution would be to use a function with a timeout to handle the query.

function getPanorama(args){
  setTimeout(function(){
    sv.getPanorama(args, function(data, status){processSVData(data, status, args); 
    //need to pass args to callback to properly increment
  }, query_limit_delay);
}

and in processSVData:

function processSVData(data, status, args){
  //code
  } else if (status === google.maps.StreetViewStatus.ZERO_RESULTS) {
    if(args.radius < 100){
      args.radius += 10; //increase radius by 10 meters
      getPanorama(args);
    }
  }
  //code
}

Basically, this 1) calls the getPanorama function. Once the delay (to not go over the query limit) has passed, it sends the returned data to the callback. If there are ZERO_RESULTS, the radius from the previous query is increased by 10, and the process repeats. However, if the data shows up, the data is handled and the loop exits.

One initiates a query by calling something like:

marker1.addListener('click', function(event) {
  popup1.open(map, marker1);
  getPanorama({location: event.latLng, radius: 50});
});

Good luck on your application!