Wie zeige ich ein Foto von Google Place Photo API in HTML mit Javascript?

Question

Wenn ich diese Google Place Foto-Anfrage in meinem Browser mache, sehe ich ein schönes Bild von einigen Bäumen.

Aber wenn ich eine PHP-Anfrage an die gleiche URL, verstehe ich nicht die Antwort, die ich zurück bekomme. Es ist keine Bild-URL, die ich in meine Webseite einfügen kann, um das Bild anzuzeigen.

Wie kann ich das Foto im Zusammenhang mit dieser photo_reference und fügen Sie ihn in meiner Web-Seite zu bekommen? Gibt es eine Möglichkeit, die URL aus dem Bild für dieses Foto zu bekommen, so kann ich nur die src für ein <img> Tag setzen?

Keine Verwendung des Javascript api bitte. Hier ist ein Beispiel dafür, was ich sehe:

$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

Wenn ich richtig verstehe:

<?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

Es scheint, dass Sie die PHP-Guzzle-Bibliothek verwenden, um die Anfrage zu machen. Die Anforderungsfunktion des Guzzle-Client-Objekts gibt ein Objekt zurück. Es hat einen Funktionsaufruf getBody, der den Hauptteil der Antwort zurückgibt. Der folgende Code sollte funktionieren:

$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();