Place reviews lets you add user reviews and ratings to your web pages. This page
explains the differences between place reviews as used in the Place
class
(new) and PlacesService
(legacy), and provides some code snippets for
comparison.
-
PlacesService(legacy) returns an array ofPlaceReviewinstances as part of thePlaceResultobject for anygetDetails()request if thereviewsfield is specified in the request. -
Place(new) returns an array ofReviewinstances as part of afetchFields()request if thereviewsfield is specified in the request.
The following table lists some of the main differences in the use of place
reviews between the Place
class and PlacesService
:
PlacesService
(Legacy) |
Place
(New) |
|---|---|
PlaceReview
interface |
Review
class |
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. |
PlaceReview
returns attribution data for the review using
the author_name
, author_url
, and profile_photo_url
fields. |
Review
returns attribution data for the review using
an AuthorAttribution
instance. |
Code comparison
This section compares code for text search methods to illustrate the differences
between Place reviews in the legacy PlacesService
and the newer Place
class.
Places service (legacy)
The following snippet calls getDetails()
to request place details including
reviews, and displays the first review result in an infowindow.
const
request
=
{
placeId
:
"ChIJpyiwa4Zw44kRBQSGWKv4wgA"
,
// Faneuil Hall Marketplace, Boston, MA
fields
:
[
"name"
,
"formatted_address"
,
"geometry"
,
"reviews"
],
};
const
service
=
new
google
.
maps
.
places
.
PlacesService
(
map
);
service
.
getDetails
(
request
,
(
place
,
status
)
=
>
{
if
(
status
===
google
.
maps
.
places
.
PlacesServiceStatus
.
OK
&&
place
&&
place
.
geometry
&&
place
.
geometry
.
location
)
{
// If there are any reviews display the first one.
if
(
place
.
reviews
&&
place
.
reviews
.
length
>
0
)
{
// Get info for the first review.
let
reviewRating
=
place
.
reviews
[
0
].
rating
;
let
reviewText
=
place
.
reviews
[
0
].
text
;
let
authorName
=
place
.
reviews
[
0
].
author_name
;
let
authorUri
=
place
.
reviews
[
0
].
author_url
;
// Format the review using HTML.
contentString
=
`
<div id="title"><b>
${
place
.
name
}
< /b></div>
<div id="address">
${
place
.
formatted_address
}
< /div
> <a href="
${
authorUri
}
" target="_blank">Author:
${
authorName
}
< /a
> <div id="rating">Rating:
${
reviewRating
}
stars</div>
<div id="rating"><p>Review:
${
reviewText
}
< /p></div>`
;
}
else
{
contentString
=
`No reviews were found for
${
place
.
name
}
`
;
}
const
infowindow
=
new
google
.
maps
.
InfoWindow
({
content
:
contentString
,
ariaLabel
:
place
.
displayName
,
});
// Add a marker.
const
marker
=
new
google
.
maps
.
Marker
({
map
,
position
:
place
.
geometry
.
location
,
});
// Show the info window.
infowindow
.
open
({
anchor
:
marker
,
map
,
});
}
});
Place class (new)
The following snippet calls fetchFields()
method to request place details including reviews, and displays the first review
result in an infowindow.
// Use a place ID to create a new Place instance.
const
place
=
new
google
.
maps
.
places
.
Place
({
id
:
"ChIJpyiwa4Zw44kRBQSGWKv4wgA"
,
// Faneuil Hall Marketplace, Boston, MA
});
// Call fetchFields, passing 'reviews' and other needed fields.
await
place
.
fetchFields
({
fields
:
[
"displayName"
,
"formattedAddress"
,
"location"
,
"reviews"
],
});
// If there are any reviews display the first one.
if
(
place
.
reviews
&&
place
.
reviews
.
length
>
0
)
{
// Get info for the first review.
let
reviewRating
=
place
.
reviews
[
0
].
rating
;
let
reviewText
=
place
.
reviews
[
0
].
text
;
let
authorName
=
place
.
reviews
[
0
].
authorAttribution
.
displayName
;
let
authorUri
=
place
.
reviews
[
0
].
authorAttribution
.
uri
;
// Format the review using HTML.
contentString
=
`
<div id="title"><b>
${
place
.
displayName
}
< /b></div>
<div id="address">
${
place
.
formattedAddress
}
< /div
> <a href="
${
authorUri
}
" target="_blank">Author:
${
authorName
}
< /a
> <div id="rating">Rating:
${
reviewRating
}
stars</div>
<div id="rating"><p>Review:
${
reviewText
}
< /p></div>`
;
}
else
{
contentString
=
`No reviews were found for
${
place
.
displayName
}
`
;
}
// Create an infowindow to display the review.
infoWindow
=
new
google
.
maps
.
InfoWindow
({
content
:
contentString
,
ariaLabel
:
place
.
displayName
,
});
// Add a marker.
const
marker
=
new
google
.
maps
.
marker
.
AdvancedMarkerElement
({
map
,
position
:
place
.
location
,
title
:
place
.
displayName
,
});
// Show the info window.
infoWindow
.
open
({
anchor
:
marker
,
map
,
});
