javascriptを使用してhtmlでgoogle place photo apiから写真を表示するにはどうすればよいですか？

Question

ブラウザでこのgoogle place写真のリクエストを行うと、いくつかの木々の素晴らしい写真が表示されます。

https://maps.googleapis.com/maps/api/place/photo?key={put-your-key-here}&photoreference=CoQBdwAAAKtaIUhI41LsoH2TgYqHX1RFwaqEDdGbgsF6PRo8g4oHg6GdN24hw8NevRjKjyuQku3paCsDpP-gDCCUULx0phzahqoHTSHKg09B_NTv6n9Aa1hBOJ-8HnCV2WCxA_jtK5eICAnU324HYLCbK0JIWOkNLUIDLvEaqMKrxLYp_80ZEhAY9wYpjTUcfoJHLRbp4BoOGhTGSt0ozo-SvP1DJMJCOj1y2gDwEA&maxheight=200 

しかし、私が同じURLにPHPリクエストをしたとき、私は戻ってくる応答を理解していません。画像を表示するためにウェブページに挿入できる画像URLではありません。

このphoto_referenceに関連付けられた写真を取得してウェブページに挿入するにはどうすればよいですか？この写真の画像からURLを取得する方法はありますか？<img>タグのsrcを設定するだけですか？

javascript APIを使用しないでください。ここで私が見ているものの例を以下に示します。

$response = $client->request('GET', 'https://maps.googleapis.com/maps/api/place/photo?key={your-key-here}&photoreference=CoQBdwAAAKtaIUhI41LsoH2TgYqHX1RFwaqEDdGbgsF6PRo8g4oHg6GdN24hw8NevRjKjyuQku3paCsDpP-gDCCUULx0phzahqoHTSHKg09B_NTv6n9Aa1hBOJ-8HnCV2WCxA_jtK5eICAnU324HYLCbK0JIWOkNLUIDLvEaqMKrxLYp_80ZEhAY9wYpjTUcfoJHLRbp4BoOGhTGSt0ozo-SvP1DJMJCOj1y2gDwEA&maxheight=200', []); 
var_dump($response); 

// Result: 
object(GuzzleHttp\Psr7\Response)[228] 
    private 'reasonPhrase' => string 'OK' (length=2) 
    private 'statusCode' => int 200 
    private 'headers' => 
    array (size=14) 
    'Access-Control-Expose-Headers' => 
    array (size=1) 
     0 => string 'Content-Length' (length=14) 
    'ETag' => 
    array (size=1) 
     0 => string '"v42c8"' (length=7) 
    'Expires' => 
    array (size=1) 
     0 => string 'Sat, 29 Oct 2016 20:08:08 GMT' (length=29) 
    'Cache-Control' => 
    array (size=1) 
     0 => string 'public, max-age=86400, no-transform' (length=35) 
    'Content-Disposition' => 
    array (size=1) 
     0 => string 'inline;filename="2016-09-25.jpg"' (length=32) 
    'Content-Type' => 
    array (size=1) 
     0 => string 'image/jpeg' (length=10) 
    'Vary' => 
    array (size=1) 
     0 => string 'Origin' (length=6) 
    'Access-Control-Allow-Origin' => 
    array (size=1) 
     0 => string '*' (length=1) 
    'X-Content-Type-Options' => 
    array (size=1) 
     0 => string 'nosniff' (length=7) 
    'Date' => 
    array (size=1) 
     0 => string 'Fri, 28 Oct 2016 20:08:08 GMT' (length=29) 
    'Server' => 
    array (size=1) 
     0 => string 'fife' (length=4) 
    'Content-Length' => 
    array (size=1) 
     0 => string '33691' (length=5) 
    'X-XSS-Protection' => 
    array (size=1) 
     0 => string '1; mode=block' (length=13) 
    'Alt-Svc' => 
    array (size=1) 
     0 => string 'quic=":443"; ma=2592000; v="36,35,34"' (length=37) 
private 'headerNames' => 
array (size=14) 
    'access-control-expose-headers' => string 'Access-Control-Expose-Headers' (length=29) 
    'etag' => string 'ETag' (length=4) 
    'expires' => string 'Expires' (length=7) 
    'cache-control' => string 'Cache-Control' (length=13) 
    'content-disposition' => string 'Content-Disposition' (length=19) 
    'content-type' => string 'Content-Type' (length=12) 
    'vary' => string 'Vary' (length=4) 
    'access-control-allow-origin' => string 'Access-Control-Allow-Origin' (length=27) 
    'x-content-type-options' => string 'X-Content-Type-Options' (length=22) 
    'date' => string 'Date' (length=4) 
    'server' => string 'Server' (length=6) 
    'content-length' => string 'Content-Length' (length=14) 
    'x-xss-protection' => string 'X-XSS-Protection' (length=16) 
    'alt-svc' => string 'Alt-Svc' (length=7) 
    private 'protocol' => string '1.1' (length=3) 
    private 'stream' => 
    object(GuzzleHttp\Psr7\Stream)[226] 
    private 'stream' => resource(17, stream) 
    private 'size' => null 
    private 'seekable' => boolean true 
    private 'readable' => boolean true 
    private 'writable' => boolean true 
    private 'uri' => string 'php://temp' (length=10) 
    private 'customMetadata' => 
    array (size=0) 
     empty 

Answer 1

私が正しく理解していれば：それはあなたが要求を行うためのPHPがつがつ食うライブラリを使用しているようだ

<?php 
    $image = imagecreatefromstring(file_get_contents('https://maps.googleapis.com/maps/api/place/photo?key={PutYourKeyHere}&photoreference=CoQBdwAAAKtaIUhI41LsoH2TgYqHX1RFwaqEDdGbgsF6PRo8g4oHg6GdN24hw8NevRjKjyuQku3paCsDpP-gDCCUULx0phzahqoHTSHKg09B_NTv6n9Aa1hBOJ-8HnCV2WCxA_jtK5eICAnU324HYLCbK0JIWOkNLUIDLvEaqMKrxLYp_80ZEhAY9wYpjTUcfoJHLRbp4BoOGhTGSt0ozo-SvP1DJMJCOj1y2gDwEA&maxheight=200')); 
    header('Content-Type: image/png'); 
    imagepng($image); 
?> 

Answer 2

。 Guzz Clientオブジェクトのrequest関数は、オブジェクトを返します。それは、応答の本体を返す関数呼び出しgetBodyを持っています。次のコードは動作するはずです：

$response = $client->request('GET', 'https://maps.googleapis.com/maps/api/place/photo?key={your-key-here}&photoreference=CoQBdwAAAKtaIUhI41LsoH2TgYqHX1RFwaqEDdGbgsF6PRo8g4oHg6GdN24hw8NevRjKjyuQku3paCsDpP-gDCCUULx0phzahqoHTSHKg09B_NTv6n9Aa1hBOJ-8HnCV2WCxA_jtK5eICAnU324HYLCbK0JIWOkNLUIDLvEaqMKrxLYp_80ZEhAY9wYpjTUcfoJHLRbp4BoOGhTGSt0ozo-SvP1DJMJCOj1y2gDwEA&maxheight=200', []); 

echo $response->getBody();