Google Maps Overlay Tiles: JSON base64 ajax call instead of image URL

Question

I've got a Google maps custom overlay setup with Maptypes and Tiles like described here: https://developers.google.com/maps/documentation/javascript/examples/maptype-image

And as long as I use a dummy image creation service everything works perfect, because the GetTileUrl part returns a direct image URL.

But now here's my problem: The final application makes use of an API that needs an AJAX call that returns JSON data with Base64 encoded image. As soon as I use this asynchronously that API will not return data fast enough to fill a variable. If I use it synchronously, it all takes way to much time, freezes up the UI and more of those problems. So my preferred option is to use it asynchronously, but how do I get this to work.

Here's the code:

Ajax call:

function GetPicture(url) {
var _ajaxOptions = {
  critical: false,
  url: url,
  error: getCTerror,
  success: getGetPictureSuccess,
  cache: false
};

I THEN DO AN INIT ON AN AJAX UTIL, WHICH DOES THE SAME AS A NORMAL AJAX CALL, BUT THEN WITH PROPER SERVER LOGGING AND SUCH.

}

function getGetPictureSuccess(response) {
  // Feed the Base64 data to the URL
  the_url = response.BASE64STRING;
}

Overlay:

overlayOptions = {
getTileUrl: function (coord, zoom) {

  // Get the center point of the tile
  var centerpoint = new google.maps.Point((coord.x * tileSize) + (tileSize / 2), ((coord.y + 1) * 256) + (tileSize / 2));

  // Start a new Mercator projection for the x,y object
  var merc = new MercatorProjection();

  // Convert the Mercator object to Lat Long
  var centerLatLng = merc.fromDivPixelToLatLng(centerpoint, zoom);

  // Define the parameters for the Ajax call
  var apiParams = 'GetPicture?RequestorID=' + requestorID + '&Lat=' + centerLatLng.k + '&Lon=' + centerLatLng.B + '&Width=' + tileSize + '&Height=' + tileSize + '&Zoom=' + zoom + '&mapIDs=' + layers + '&includePicture=true&includePOI=true';


  ctGetPicture(apiBaseUrl + apiParams);

  if (!!the_url) {
    return "data:image/png;base64," + the_url;
  }
},
tileSize: new google.maps.Size(tileSize, tileSize),
isPng: true
};

overlayMapType = new google.maps.ImageMapType(overlayOptions);

function mapinit() {
 //Tiles overlays insert
  if (layers.length > 0) {
   map.overlayMapTypes.insertAt(0, overlayMapType);
  }
}

So how do I make this work asynchronously?

Answer 1

I ended up using a REST service that did the call for me. So I just sent a http request to an URL which contained the REST service, have that get the image, just so that the getTileUrl function could think it was getting an URL. Without changing the API of Google (getTileUrl part) I don't think it's possible to do this any other way...