The Places API can return detailed information about a specific place. This page
explains the differences between place details as used in the Place
class
(new) and PlacesService
(legacy), and provides some code snippets for
comparison. The following table lists some of the main differences in the use of
place details between the Place
class and PlacesService
:
PlacesService
(Legacy) |
Place
(New) |
|---|---|
getDetails()
|
fetchFields()
|
PlaceDetailsRequest
|
FetchFieldsRequest
|
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 . |
| Place data fields are formatted using snake case. | Place data fields are formatted using camel case. |
| Limited to a fixed set of place types and place data fields . | Provides an expanded selection of regularly updated place types and place data fields . |
Code comparison
This section compares two similar pieces of code to illustrate the differences between the Places Service and the Place class. The code snippets show the code required on each respective API to make a place details request, and then use the resulting place data to add a marker to the map.
Places Service (Legacy)
The following condensed code snippet shows making a place details request using PlacesService
. The request uses a callback, and includes a required
conditional check on PlacesServiceStatus
. The needed place data fields are
specified in the request body.
function
getPlaceDetails
()
{
// Instantiate the Places Service.
const
service
=
new
google
.
maps
.
places
.
PlacesService
(
map
);
// Make a request using the Place ID.
const
request
=
{
placeId
:
"ChIJN1t_tDeuEmsRUsoyG83frY4"
,
fields
:
[
"name"
,
"formatted_address"
,
"place_id"
,
"geometry"
],
};
// Request place details.
service
.
getDetails
(
request
,
(
place
,
status
)
=
>
{
// Check whether PlacesServiceStatus is OK.
if
(
status
===
google
.
maps
.
places
.
PlacesServiceStatus
.
OK
&&
place
&&
place
.
geometry
&&
place
.
geometry
.
location
)
{
// Log the result.
console
.
log
(
place
.
name
);
console
.
log
(
place
.
formatted_address
);
// Add a marker for the place.
const
marker
=
new
google
.
maps
.
Marker
({
map
,
position
:
place
.
geometry
.
location
,
title
:
place
.
name
,
});
}
});
}
Learn more
- See the complete code example
- Place Details documentation
-
getDetailsreference
Place class (New)
The following condensed code snippet shows making a place details request using
the Place
class. The request is asynchronous, and does not include a status
check (standard error handling can be used). A place ID is used to create a new Place
instance, which is used to make the request ( fetchFields()
). The
needed place data fields are not passed until fetchFields()
is called, which
lends greater flexibility. Because the fetchFields()
method uses the await
operator it can only be used inside an async
function.
async
function
getPlaceDetails
()
{
// Use place ID to create a new Place instance.
const
place
=
new
google
.
maps
.
places
.
Place
({
id
:
"ChIJN5Nz71W3j4ARhx5bwpTQEGg"
,
requestedLanguage
:
"en"
,
// optional
});
// Call fetchFields, passing the needed data fields.
await
place
.
fetchFields
({
fields
:
[
"displayName"
,
"formattedAddress"
,
"location"
],
});
// Log the result.
console
.
log
(
place
.
displayName
);
console
.
log
(
place
.
formattedAddress
);
// Add an Advanced Marker.
const
marker
=
new
google
.
maps
.
marker
.
AdvancedMarkerElement
({
map
,
position
:
place
.
location
,
title
:
place
.
displayName
,
});
}
