[Google Maps Library] Google place photo

Back to Forums

Ruby Jimenez

Solved

Question

Forge

Hi,

I'm trying to display the associated photo from Google Place Text Search API.

I used the photo_reference to retrieve the actual photo through Google Place photo api call.

Then I get the binary text of the image which is the expected output. My problem is, I'm having a hard time displaying the actual image. I did two approach;

1. I converted the binary text to binary data and saved it to temporary table. Then I reference the image widget to the binary field of temporary table, but it's not showing any image.

2. I also tried this approach from this thread;

https://www.outsystems.com/forums/discussion/34170/html-tag-to-display-image-base-64/

where I use an HTML widget and pass this HTML tag

SyntaxEditor Code Snippet

"<img style='width:60%' src='data:image/png;base64,"+ ImageContent +"'/>"

The ImageContent holds the binary text result from google place photo API. I used to convert the ImageContent to Base64, but it didn't show any image. But with that syntax, it's displaying the binar content in the image element instead of the actual image.

Does anyone here tried using Google Place Photo? How did you display it on your web page? I hope somebody here can help me on this one.

Thanks,

Ruby

16 Jun 2018

José Costa

Solution

Hi Ruby,

Besides what Frederico said, if you want to get the photo using a REST service (which is a good idea since you will not be putting the APIKEY in the javascript of your mobile screen), you should:

Do as you have done to get the response from the REST service and then:

- Set the Response Format of the Method to Binary Data:

- Set the Data Type of the Response variable to Binary Data also:

- Now you can just set the image on the screen like this:

Where "Photo" is the variable that receives the output of the REST service.

Tell us if this works out for you.

Cheers,

José

PS: If you are calling several REST services in a client action, consider encapsulating all the calls in a Server Actions whose output is the Binary Data that you need

See solution in context

18 Jun 2018

2 replies

Last reply 18 Jun 2018

Show thread

Hide thread

Ruby Jimenez

José Costa wrote:

Hi Ruby,

Besides what Frederico said, if you want to get the photo using a REST service (which is a good idea since you will not be putting the APIKEY in the javascript of your mobile screen), you should:

Do as you have done to get the response from the REST service and then:

- Set the Response Format of the Method to Binary Data:

- Set the Data Type of the Response variable to Binary Data also:

- Now you can just set the image on the screen like this:

Where "Photo" is the variable that receives the output of the REST service.

Tell us if this works out for you.

Cheers,

José

PS: If you are calling several REST services in a client action, consider encapsulating all the calls in a Server Actions whose output is the Binary Data that you need

What Image widget did you use? Is this the widget for the mobile app?

Because I don't see Binary Data type in the image widget that I'm using.

I only got Static, which I should place a static photo. External which requires a URL, and a Database.

Thanks for the response.

Ruby

18 Jun 2018

Ruby Jimenez

José Costa wrote:

Hi Ruby,

Besides what Frederico said, if you want to get the photo using a REST service (which is a good idea since you will not be putting the APIKEY in the javascript of your mobile screen), you should:

Do as you have done to get the response from the REST service and then:

- Set the Response Format of the Method to Binary Data:

- Set the Data Type of the Response variable to Binary Data also:

- Now you can just set the image on the screen like this:

Where "Photo" is the variable that receives the output of the REST service.

Tell us if this works out for you.

Cheers,

José

PS: If you are calling several REST services in a client action, consider encapsulating all the calls in a Server Actions whose output is the Binary Data that you need

I have this work.. I'm developing a web version so I set the Type to Database since Binary Data is not available in the web version. Though I have to store the image binary data to a temp table as mentioned here.

https://success.outsystems.com/Documentation/10/Developing_an_Application/Design_UI/Images/Display_an_Image

Unless there is a way to directly set the image content to binary data just like the way it can be set in mobile version.

18 Jun 2018

Frederico Sousa

Champion

Hello!

From my tests it seems you still need to use that reference to do do a http Request to https://maps.googleapis.com/maps/api/place/photo?maxwidth=YOUR_WIDTH&photoreference=YOUR_PHOTO_REFERENCe&key=YOUR_API_KEY

and this redirects to the actual photo.

Example: I do a request for OutSystems in Proença-a-nova in https://maps.googleapis.com/maps/api/place/findplacefromtext/json?input=outsystems&inputtype=textquery&fields=photos%2Cformatted_address%2Cname%2Copening_hours%2Crating&locationbias=circle%3A2000%4039.7528003%2C-7.9238451&key=AIzaSyBRyhI-6-WJgy_-uTnfog7aJV0ntPG0TrU

It returns

"photos" : [
            {
               "height" : 2268,
               "html_attributions" : [
                  "\u003ca href=\"https://maps.google.com/maps/contrib/113202928073475129698/photos\"\u003eEmily Zimny\u003c/a\u003e"
               ],
               "photo_reference" : "CmRaAAAAfxSORBfVmhZcERd-9eC5X1x1pKQgbmunjoYdGp4dYADIqC0AXVBCyeDNTHSL6NaG7-UiaqZ8b3BI4qZkFQKpNWTMdxIoRbpHzy-W_fntVxalx1MFNd3xO27KF3pkjYvCEhCd--QtZ-S087Sw5Ja_2O3MGhTr2mPMgeY8M3aP1z4gKPjmyfxolg",
               "width" : 4032
            }

then you take this info and do a request to

https://maps.googleapis.com/maps/api/place/photo?maxwidth=960&photoreference=CmRaAAAA3cXtaUIisBd7HRv2Lf_ncLvmN2JZIbyJykYJotMMUGJQH8WzoJe1vuqiBCH0CR77Zn4LPewu4NtmnZQL_2OWS2GgXyUm71rKqf5YLkyExux8ala1MR2xLTIb5R-afeG8EhBq0ncjbMh3YRQRE_W90DUJGhRaDbILzcbtyIXKGZ3MVMFpMnlgRA&key=AIzaSyBRyhI-6-WJgy_-uTnfog7aJV0ntPG0TrU

and you get your photo.
https://lh3.googleusercontent.com/p/AF1QipNO5TLiCPrLpAuBf9NM7szkDW0jC-Su99U9DCuo=s1600-w960

This API key is a test one ofc.

18 Jun 2018

José Costa

Solution

Hi Ruby,

Besides what Frederico said, if you want to get the photo using a REST service (which is a good idea since you will not be putting the APIKEY in the javascript of your mobile screen), you should:

Do as you have done to get the response from the REST service and then:

- Set the Response Format of the Method to Binary Data:

- Set the Data Type of the Response variable to Binary Data also:

- Now you can just set the image on the screen like this:

Where "Photo" is the variable that receives the output of the REST service.

Tell us if this works out for you.

Cheers,

José

PS: If you are calling several REST services in a client action, consider encapsulating all the calls in a Server Actions whose output is the Binary Data that you need

18 Jun 2018

2 replies

Last reply 18 Jun 2018

Show thread

Hide thread

Ruby Jimenez

José Costa wrote:

Hi Ruby,

Besides what Frederico said, if you want to get the photo using a REST service (which is a good idea since you will not be putting the APIKEY in the javascript of your mobile screen), you should:

Do as you have done to get the response from the REST service and then:

- Set the Response Format of the Method to Binary Data:

- Set the Data Type of the Response variable to Binary Data also:

- Now you can just set the image on the screen like this:

Where "Photo" is the variable that receives the output of the REST service.

Tell us if this works out for you.

Cheers,

José

PS: If you are calling several REST services in a client action, consider encapsulating all the calls in a Server Actions whose output is the Binary Data that you need

What Image widget did you use? Is this the widget for the mobile app?

Because I don't see Binary Data type in the image widget that I'm using.

I only got Static, which I should place a static photo. External which requires a URL, and a Database.

Thanks for the response.

Ruby

18 Jun 2018

Ruby Jimenez

José Costa wrote:

Hi Ruby,

Besides what Frederico said, if you want to get the photo using a REST service (which is a good idea since you will not be putting the APIKEY in the javascript of your mobile screen), you should:

Do as you have done to get the response from the REST service and then:

- Set the Response Format of the Method to Binary Data:

- Set the Data Type of the Response variable to Binary Data also:

- Now you can just set the image on the screen like this:

Where "Photo" is the variable that receives the output of the REST service.

Tell us if this works out for you.

Cheers,

José

PS: If you are calling several REST services in a client action, consider encapsulating all the calls in a Server Actions whose output is the Binary Data that you need

https://success.outsystems.com/Documentation/10/Developing_an_Application/Design_UI/Images/Display_an_Image

Unless there is a way to directly set the image content to binary data just like the way it can be set in mobile version.

18 Jun 2018

Frederico Sousa

Champion

hum.. maybe yours is web and his is mobile? I actually don't remember

18 Jun 2018

2 replies

Last reply 18 Jun 2018

Show thread

Hide thread

Ruby Jimenez

Frederico Sousa wrote:

Unless im very mistaken he used the web version and yours is mobile, you can use my component

https://www.outsystems.com/forge/component/3834/showimagefrombinary/ to do it in mobile

My app is a web version and I don't see the same value in the Type property.

18 Jun 2018

Frederico Sousa

Champion

Ruby Jimenez wrote:

Frederico Sousa wrote:

Unless im very mistaken he used the web version and yours is mobile, you can use my component

https://www.outsystems.com/forge/component/3834/showimagefrombinary/ to do it in mobile

My app is a web version and I don't see the same value in the Type property.

I was too late editing my answer, i checked my mobile app and it has binary data so its the other way around :P

18 Jun 2018

Frederico Sousa

Champion

if you want a quick fix i can give you this JS to put a binary data in an image in web.

"<script type='text/javascript'>
osjs(document).ready(function() {
osjs('#" + EncodeJavaScript(image.Id) + "').attr('src', 'data:"+EncodeJavaScript(MimeType)+";base64,"+EncodeJavaScript(BinaryToBase64(BinaryData))+"');
   });
</script>"

I should add the web version to my forge version actually, I'll do it tomorrow if you want it and can wait, if you urgently need it i'll do it in the next half hour

18 Jun 2018

1 reply

19 Jun 2018

Show thread

Hide thread

Ruby Jimenez

Frederico Sousa wrote:

if you want a quick fix i can give you this JS to put a binary data in an image in web.

"<script type='text/javascript'>
osjs(document).ready(function() {
osjs('#" + EncodeJavaScript(image.Id) + "').attr('src', 'data:"+EncodeJavaScript(MimeType)+";base64,"+EncodeJavaScript(BinaryToBase64(BinaryData))+"');
   });
</script>"

I should add the web version to my forge version actually, I'll do it tomorrow if you want it and can wait, if you urgently need it i'll do it in the next half hour

Thanks for sharing this info.. what I did earlier is working fine, so that can wait until tomorrow..

Thanks,

Ruby

19 Jun 2018

Frederico Sousa

Champion

Hey, the web version to show an image from a binary data it's here: https://www.outsystems.com/forge/Component_Overview.aspx?ProjectId=3936

Enjoy, let me know if it doesn't fit what you need (or if it does :P)

19 Jun 2018

1 reply

19 Jun 2018

Show thread

Hide thread

Ruby Jimenez

Frederico Sousa wrote:

This one work as well and I don't need to store the image in temp table.

Thanks for this.

19 Jun 2018

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.

See the full guidelines