Get a Maps Demo Key: Try out select Maps JavaScript API and Places UI Kit features at no cost with a Maps Demo Key—no billing information required.

Place Details (New)

Spark icon

Page Summary

You can fetch detailed information about a place using its Place ID and the Place.fetchFields() method.
Specify the desired place data fields (e.g., displayName, formattedAddress) when calling fetchFields().
Access the fetched data through the returned Place object.
Alternatively, the Place Overview component offers a pre-built UI to display place details.
Configure and embed the Place Overview component using the provided configurator for seamless integration.

Select platform: Android iOS JavaScript Web Service

European Economic Area (EEA) developers

Place object

The Place object, which contains information about a place, is dynamically returned by Text Search, Nearby Search, and Place Autocomplete. You can also create a Place object from a place ID or resource name (the resource name is the place ID prefixed with places/). The following snippet shows creating a Place object using a place ID:

// Use a place ID to create a new Place instance.
constplace=newPlace({
id:'ChIJyYB_SZVU2YARR-I1Jjf08F0',// San Diego Zoo
});

You can also create a Place object from a place resource name:

// Use a place resource name to create a new Place instance.
constplace=newPlace({
resourceName:'places/ChIJyYB_SZVU2YARR-I1JRF08F0',// San Diego Zoo
});

For more information, see PlaceOptions.

Fetch fields

If you have an existing Place object, or a place ID or resource name, use the Place.fetchFields() method to get details about that place. Provide a comma-separated list of place data fields to return; specify field names in camel case. Use the returned Place object to get data for the requested fields.

The following example uses a place ID to create a new Place, calls Place.fetchFields() requesting the displayName and formattedAddress fields, and adds a marker to the map.

[フレーム]

TypeScript

asyncfunctiongetPlaceDetails(){
const[{Place},{AdvancedMarkerElement}]=awaitPromise.all([
google.maps.importLibrary('places'),
google.maps.importLibrary('marker'),
]);
// Use place ID to create a new Place instance.
constplace=newPlace({
id:'ChIJyYB_SZVU2YARR-I1Jjf08F0',// San Diego Zoo
});
// Call fetchFields, passing the desired data fields.
awaitplace.fetchFields({
fields:[
'displayName',
'formattedAddress',
'location',
'googleMapsURI',
],
});
// Add an Advanced Marker
constmarker=newAdvancedMarkerElement({
map:innerMap,
position:place.location,
title:place.displayName,
});
// Assemble the info window content.
constcontent=document.createElement('div');
constaddress=document.createElement('div');
constplaceId=document.createElement('div');
address.textContent=place.formattedAddress||'';
placeId.textContent=place.id;
content.append(placeId,address);
if(place.googleMapsURI){
constlink=document.createElement('a');
link.href=place.googleMapsURI;
link.target='_blank';
link.textContent='View Details on Google Maps';
content.appendChild(link);
}
// Display an info window.
infoWindow.setHeaderContent(place.displayName);
infoWindow.setContent(content);
infoWindow.open({
anchor:marker,
});
}index.ts

JavaScript

asyncfunctiongetPlaceDetails(){
const[{Place},{AdvancedMarkerElement}]=awaitPromise.all([
google.maps.importLibrary('places'),
google.maps.importLibrary('marker'),
]);
// Use place ID to create a new Place instance.
constplace=newPlace({
id:'ChIJyYB_SZVU2YARR-I1Jjf08F0',// San Diego Zoo
});
// Call fetchFields, passing the desired data fields.
awaitplace.fetchFields({
fields:[
'displayName',
'formattedAddress',
'location',
'googleMapsURI',
],
});
// Add an Advanced Marker
constmarker=newAdvancedMarkerElement({
map:innerMap,
position:place.location,
title:place.displayName,
});
// Assemble the info window content.
constcontent=document.createElement('div');
constaddress=document.createElement('div');
constplaceId=document.createElement('div');
address.textContent=place.formattedAddress||'';
placeId.textContent=place.id;
content.append(placeId,address);
if(place.googleMapsURI){
constlink=document.createElement('a');
link.href=place.googleMapsURI;
link.target='_blank';
link.textContent='View Details on Google Maps';
content.appendChild(link);
}
// Display an info window.
infoWindow.setHeaderContent(place.displayName);
infoWindow.setContent(content);
infoWindow.open({
anchor:marker,
});
}index.js

Note that Map and Place have been declared prior to this function:

const{Map}=awaitgoogle.maps.importLibrary("maps");
const{Place}=awaitgoogle.maps.importLibrary("places");

See the complete example