Places UI Kit: A ready-to-use library that provides room for customization and low-code development. Try it out, and share your input on your UI Kit experience.

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

Fetch fields

If you have an existing Place object or place ID, 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, adds a marker to the map, and logs some data to the console.

[フレーム]

TypeScript

asyncfunctiongetPlaceDetails(){
const{Place}=(awaitgoogle.maps.importLibrary(
'places'
))asgoogle.maps.PlacesLibrary;
const{AdvancedMarkerElement}=(awaitgoogle.maps.importLibrary(
'marker'
))asgoogle.maps.MarkerLibrary;
// 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}=(awaitgoogle.maps.importLibrary('places'));
const{AdvancedMarkerElement}=(awaitgoogle.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