[Google Maps Mobile] Google place photo

[Google Maps Mobile] Google place photo

  
Forge Component
(13)
Published on 11 Oct by Labs
13 votes
Published on 11 Oct by Labs

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

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.

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 


Solution

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

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

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.

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

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.

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

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

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)

Frederico Sousa wrote:

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)

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



Thanks for this.