What format does the Google Places Photos API return the image in?

4
votes

Have a look at this API: https://maps.googleapis.com/maps/api/place/photo?maxwidth=400&photoreference=CnRtAAAATLZNl354RwP_9UKbQ_5Psy40texXePv4oAlgP4qNEkdIrkyse7rPXYGd9D_Uj1rVsQdWT4oRz4QrYAJNpFX7rzqqMlZw2h2E2y5IKMUZ7ouD_SlcHxYq1yL4KbKUv3qtWgTK0A6QbGh87GB3sscrHRIQiG2RrmU_jF4tENr9wGS_YxoUSSDrYjWmrNfeEHSGSc3FyhNLlBU&key=AddYourOwnKeyHere

When you invoke it using Postman, or in a browser, it returns an image which is rendered beautifully. Now, from inside an app, when I use $http or jQuery to call this API, what is returned is LOTS of "garbage". Can anyone explain what this garbage is? Is it base64 encoded binary data corresponding to the image? I need this information so that I can display this image in my app.. Neither img ng-src="{{photo}}" nor img data-ng-src="{{photo}}" worked. I also tried explicitly specifying base64 in the img tag, didn't work.

Thanks!

2
jqueryangularjsimagegoogle-places-apigoogle-photos
You tried <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA..." />? – Huey
Yea I did, Just to give you an idea of what this "garbage" looks like. Here is the first 5% of what a typical image looks like, ����JFIF��*ExifII*1Google��@ICC_PROFILE0ADBEmntrRGB XYZ �acspAPPLnone���-ADBE cprt�2desc0kwtpt�bkpt�rTRC�gTRC�bTRC�rXYZ�gXYZbXYZtextCopyright 1999 Adobe Systems IncorporateddescAdobe RGB – Ajinkya Kher
works fine in this demo passing in url to ng-src. Must be something else wrong. Try using $sce.trustAsUrl() – charlietfl

2 Answers

5
votes

That URL returns the binary file of the image, e.g. a JPEG file. You can use that URL as the src of an <img> tag directly.

0
votes

if i look at view source of page that returned from google api, it's api return image directly.

goog image api

And exactly, it's return image/png content-type on Response Headers.

This is API code example with C# Web Api 2:

public HttpResponseMessage Get(int? id){

        var path = HostingEnvironment.MapPath("~");
        path = Path.Combine(path, "Static", "robot.png");

        HttpResponseMessage response = new HttpResponseMessage();
        var fileStream = new FileStream(path, FileMode.Open);
        var streamContent = new StreamContent(fileStream);

        response.Content = streamContent;

        response.Content.Headers.ContentType = new MediaTypeHeaderValue("image/png");

        return response;
}

and tadaaa... API is working:)enter image description here