Google Places APi фото

Я пытаюсь отобразить изображение с помощью php для своего веб-сайта, который будет динамически отображать изображения прямо из API Google Адресов (ссылка https://developers.google.com/places/web-service/photos?hl=en)
Источник изображения выглядит следующим образом:

https://maps.googleapis.com/maps/api/place/photo?maxwidth=400&photoreference=CnRtAAAATLZNl354RwP_9UKbQ_5Psy40texXePv4oAlgP4qNEkdIrkyse7rPXYGd9D_Uj1rVsQdWT4oRz4QrYAJNpFX7rzqqMlZw2h2E2y5IKMUZ7ouD_SlcHxYq1yL4KbKUv3qtWgTK0A6QbGh87GB3sscrHRIQiG2RrmU_jF4tENr9wGS_YxoUSSDrYjWmrNfeEHSGSc3FyhNLlBU&key=API_KEY

Если вы перейдете по этому URL через браузер, он отобразит изображение, и это уже не тот URL, который вы видите.

Моя проблема в том, что при просмотре источника страницы это именно тот URL-адрес источника изображения, который вы видите, что плохо, потому что мой ключ затем публикуется. Как правильно отображать изображения, сохраняя при этом мой ключ закрытым? Я искал API и в Интернете для этого, но безрезультатно. Я видел некоторые хитрости с использованием file_get_contents и file_put_contents, но мой веб-хостинг не позволяет этого. Наконец, сохранение изображений противоречит правилам API, поэтому это не вариант.

Любые советы будут оценены. Заранее спасибо.

1

Решение

Вы можете отправить HEAD-запрос на конкретный URL-адрес и извлечь содержимое Location-header:

<?php

$context  = stream_context_create(array('http' =>array('method'=>'HEAD')));
$fp = fopen('desiredPlacesApiImgUrl', 'rb', false, $context);
$meta = stream_get_meta_data($fp);

if(isset($meta['wrapper_data'])){
$location=preg_grep('@^\s*Location:@',$meta['wrapper_data']);

if(count($location)){
$imgUrl=trim(preg_replace('@^Location:@i','',reset($location)));
die($imgUrl);//the desired img-url
}

}
fclose($fp);

?>

Но когда file_get_contents я не могу войти на ваш сервер fopen также не допускается для внешних URL.

Другой вариант: используйте Maps-Javascript-API, запросите место, и ответ должен содержать желаемый URL (без использования ключа).


Демо-версия:

function loadPlacePhotos() {
var photos = document.querySelectorAll('img[data-place]'),
service = new google.maps.places
.PlacesService(document.createElement('div'));
for (var i = 0; i < photos.length; ++i) {
(function(photo) {
service.getDetails({
placeId: photo.getAttribute('data-place')
}, function(r) {
if (r.photos.length) {
google.maps.event.addDomListener(photo, 'click', function() {
photo.setAttribute('src', r.photos[0].getUrl({
maxHeight: 100
}));
photo.style.visibility = 'visible';
if (r.photos.length > 1) {
r.photos.push(r.photos.shift());
photo.setAttribute('title', 'click to see next photo');
photo.style.cursor = 'pointer';
} else {
google.maps.event.clearListeners(photo, 'click');
}
});
google.maps.event.trigger(photo, 'click');
}
});


}(photos[i]));
}
}
body::before {
content: url(https://maps.gstatic.com/mapfiles/api-3/images/powered-by-google-on-white2.png);
}
img[data-place] {
visibility: hidden;
display: block;
}
<ul>
<li>
Google: Mountain View
<img data-place="ChIJj61dQgK6j4AR4GeTYWZsKWw" />
</li>
<li>
Google: Sydney
<img data-place="ChIJN1t_tDeuEmsRUsoyG83frY4" />
</li>
<li>
Google: Berlin
<img data-place="ChIJReW1rcRRqEcRaY3CuKBdqZE" />
</li>
</ul>
<script defer src="https://maps.googleapis.com/maps/api/js?v=3&libraries=places&callback=loadPlacePhotos"></script>
1

Другие решения

Других решений пока нет …

По вопросам рекламы [email protected]