Place photos lets you add high quality photographic content to your web pages.
This page explains the differences between place photos features in the Place
class (new) and PlacesService
(legacy), and provides some code snippets for
comparison.
-
PlacesService(legacy) returns an array of up to 10PlacePhotoobjects as part of thePlaceResultobject for anygetDetails()request if thephotosfield is specified in the request. In the case oftextSearch()andnearbySearch()the first place photo is returned by default if available. - The
Placeclass returns an array of up to 10Photoobjects as part of afetchFields()request if thephotosfield is specified in the request.
The following table lists some of the main differences in the use of place
photos between the Place
class and PlacesService
:
PlacesService
(Legacy) |
Place
(New) |
|---|---|
PlacePhoto
interface |
Photo
class |
PlacePhoto
returns html_attributions
as a string. |
Photo
returns an AuthorAttribution
instance. |
Methods require the use of a callback to handle the results object and google.maps.places.PlacesServiceStatus
response. |
Uses Promises, and works asynchronously. |
Methods require a PlacesServiceStatus
check. |
No required status check, can use standard error handling. Learn more . |
PlacesService
must be instantiated using a map or a
div element. |
Place
can be instantiated wherever needed, without a
reference to a map or page element. |
Code comparison
This section compares code for place photos to illustrate the differences between the Places Service and the Place class. The code snippets show the code required to request place photos on each respective API.
Places service (legacy)
The following snippet shows returning photos using PlacesService
, and
displaying the first photo result on the page. In this example, the place
details request specifies a place ID, along with the name
and photos
fields.
The first photo is then displayed on the page after checking service status.
When instantiating the PlacesService
, a map or a div
element must be
specified; since this example does not feature a map, a div
element is used.
function
getPhotos
()
{
// Construct the Place Details request.
const
request
=
{
placeId
:
"ChIJydSuSkkUkFQRsqhB-cEtYnw"
,
fields
:
[
"name"
,
"photos"
],
};
// Create an instance of PlacesService.
const
attributionDiv
=
document
.
getElementById
(
"attribution-div"
);
const
service
=
new
google
.
maps
.
places
.
PlacesService
(
attributionDiv
);
// Check status and display the first photo in an img element.
service
.
getDetails
(
request
,
(
place
,
status
)
=
>
{
if
(
status
===
google
.
maps
.
places
.
PlacesServiceStatus
.
OK
&&
place
)
{
const
photoImg
=
document
.
getElementById
(
'image-container'
);
photoImg
.
src
=
place
.
photos
[
0
].
getUrl
({
maxHeight
:
400
});
}
});
}
Author attributions in PlacesService
The PlacesService
returns the required author attributions as an html_attributions
string containing a URL pointing to the author's Google profile page. The
following snippet shows retrieving attribution data for the first photo result.
let
attributionUrl
=
place
.
photos
[
0
].
html_attributions
;
Learn more
Place class (new)
The following snippet shows using the fetchFields()
method to return place details including the display name and place photos.
First a new Place
object is instantiated using a place ID, followed by a call
to fetchFields()
where the displayName
and photos
fields are specified.
The first place photo is then displayed on the page. There is no need to check
service status when using the Place
class, as this is handled automatically.
async
function
getPhotos
()
{
// Use a place ID to create a new Place instance.
const
place
=
new
google
.
maps
.
places
.
Place
({
id
:
'ChIJydSuSkkUkFQRsqhB-cEtYnw'
,
// Woodland Park Zoo, Seattle WA
});
// Call fetchFields, passing the needed data fields.
await
place
.
fetchFields
({
fields
:
[
'displayName'
,
'photos'
]
});
console
.
log
(
place
.
displayName
);
console
.
log
(
place
.
photos
[
0
]);
// Add the first photo to an img element.
const
photoImg
=
document
.
getElementById
(
'image-container'
);
photoImg
.
src
=
place
.
photos
[
0
].
getURI
({
maxHeight
:
400
});
}
Author attributions in the Place
class
The Place
class returns author attributions as an AuthorAttribution
instance including the author's name, a URI for the author's Google profile
page, and a URI for the author's profile photo. The following snippet shows
retrieving attribution data for the first photo result.
let
name
=
place
.
photos
[
0
].
authorAttributions
[
0
].
displayName
;
let
attributionUrl
=
place
.
photos
[
0
].
authorAttributions
[
0
].
uri
;
let
photoUrl
=
place
.
photos
[
0
].
authorAttributions
[
0
].
photoUri
;
