Altering external variable from Google Maps' StreetViewService.getPanorama({},callback) method

Question

I am running into trouble with this piece of code since I'm not sure how to fix it. I already asked this in the chats but couldn't figure out myself after some answers. I want to get Panorama from StreetViewService using the method from the Google Maps javascript API from a StreetViewService getPanorama() method. The method receives a literal with the coordinates and a radius, and a callback function that receives 2 parameters: data and status. in that callback you check wether the service returns some images for street view or not, in which case you do one thing or another.

It seems the callback is executed asynchronously or the getPanorama method, executing some kind of ajax behind the scenes.

I'm pasting the code below, but first I explain my intentions. I need to return from one method I made inside a literal that is inside a self made library wether the the request has valid images for that requested coordinates or not by setting a variable to true or false and then at the end returning that value. However, even if I set the variable to true inside that callback anonymous function, when the variable returns, it always has it's initial value without it not being changed.

Here the code. Not everything, just the essential code. Then my intention is to used the boolean returned to know if I have to switch one button active for some kind of job or not or do some things or not depending of if it returned true or false, Change some style etc as well. I'd appreciate if you could change my code in a way it could be done. I was told about a callback solution or wrapping it into a promise. However I don't know how to do it. I used promisses in jquery but not in vanilla javascript. I'd like to see how the callback solution could be made as well with this code.

//Library not show for shortenning the example.
streetView: { //This is inside a library
  valid_request: false,
  event_key: null,
  panorama: null,

  setStreetView: function(coords, element) {
    libMapa.streetView.valid_request = false; // Initialize the value again.

    let sv_service = new google.maps.StreetViewService();
    var latlng = coords;

    sv_service.getPanorama({ // This is a method from Google Map Javascript API.
      location: latlng,
      radius: 50
    }, function(data, status) {
      if (status === google.maps.StreetViewStatus.OK) {

        if (!libMapa.streetView.panorama) {
          libMapa.streetView.panorama = new google.maps.StreetViewPanorama(element);
          libMapa.streetView.panorama.setEnableCloseButton(true);
        }
        libMapa.streetView.panorama.setPano(null);
        libMapa.streetView.panorama.setPano(data.location.pano);
        libMapa.streetView.panorama.setVisible(true);

        libMapa.streetView.valid_request = true;

      } else {
        alert("No images for this place");
        // Otherwise variable stays as FALSE.
      }
    });
    return libMapa.streetView.valid_request;
  }
}

/****************************************/
//OUTSIDE THE LIBRARY IN INDEX.HTML

var sv_valid = libMapa.streetView.setStreetView(coords, div_mapa);
//sv_valid still shows false even if it should return true.
if (sv_valid) {
  // "pressed" is to control a button as if it was a switch by activatinc and deactivating it.
  pressed = false; // It always ends up being false even when it should return true.
  element.style.cursor = "default";
  libMapa.mapa.unByKey(libMapa.streetView.event_key);
}

Answer 1

Use a callback to do some action or modify some variable after the AJAX call to getPanorama() (and by proxy, setStreetView()) is complete.

Modify setStreetView() to accept a callback parameter and pass it along to getPanorama().

streetView {

    // streetView variables etc.

    setStreetView: function(coords, element, callback) {

        // get ready for the AJAX call etc.

        sv_service.getPanorama({
            // parameter object
        }, function(data, status){
            // The getPanorama() callback.
            // Do stuff with the data/status here,
            // then call the callback function that you passed in to setStreetView.
            // You can send data along (e.g. the result of the AJAX call) to the callback.
            callback(someResult);
        });
    }
}

// somewhere else, where you're calling streetView.setStreetView()
var someVar = "foo";
streetView.setStreetView(someCoords, someElement, function(eventualResult){
    someVar = eventualResult;
});

Here's a small example: https://jsfiddle.net/_jered/pgftxgf3/

I also highly suggest you do some research on AJAX, asynchronous JavaScript, and callbacks.