Place Details

Fetch fields

If you have an existingPlaceobject or place ID, use thePlace.fetchFields method to get details about that place. Provide a comma-separated list of place data fieldsto return; specify field names in camel case. Use the returnedPlaceobject to get data for the requested fields.

The following example uses a place ID to create a newPlace,callsPlace.fetchFields requesting thedisplayNameandformattedAddressfields, adds a marker to the map, and logs some data to the console.

async function getPlaceDetails(Place) {
const { AdvancedMarkerElement } = await google.maps.importLibrary( "marker" ) as google.maps.MarkerLibrary;
// Use place ID to create a new Place instance.
const place = new Place({
id: 'ChIJN5Nz71W3j4ARhx5bwpTQEGg',
requestedLanguage: 'en', // optional
});

// Call fetchFields, passing the desired 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 AdvancedMarkerElement({
map,
position: place.location,
title: place.displayName,
});
}
index.ts

async function getPlaceDetails(Place) {
const { AdvancedMarkerElement } = await google.maps.importLibrary( "marker" );
// Use place ID to create a new Place instance.
const place = new Place({
id: "ChIJN5Nz71W3j4ARhx5bwpTQEGg",
requestedLanguage: "en", // optional
});

// Call fetchFields, passing the desired 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 AdvancedMarkerElement({
map,
position: place.location,
title: place.displayName,
});
}
index.js

Use the Place Overview component

Note:This sample uses an open source library. See the READMEfor support and feedback related to the library.

The Place Overview component displays detailed information about millions of businesses, including opening hours, star reviews, and photos, plus directions and other actions in a premade UI in 5 sizes and formats. It is part of the Extended Component Library, from Google Maps Platform, a set of web components that helps developers build better maps and location features faster.

Place Overview configurator

Use the configurator to create embeddable code for a custom Place Overview component, then export it to be used with popular frameworks like React and Angular or no framework at all.

Get Started

To get started, load the Extended Component library with npm.

For best performance, use a package manager and import only the components you need. This package is listed on npm as @googlemaps/extended-component-library.Install it with:

npm i @googlemaps/extended-component-library;

Then import any components you use in your application.

import '@googlemaps/extended-component-library/place_overview.js';

After loading the npm library, get an API Keyfrom the Cloud Console.

<gmpx-api-loader key= "YOUR_API_KEY"solution-channel=" GMP_DOCS_placeoverview_v1 "></gmpx-api-loader>

Use the Place Overview component tag with aPlace IDof your choice. This one is a placeholder for a Google office in Auckland.

<gmpx-place-overview place= "ChIJVVVVnvlHDW0Rwyod-_ddhAw" ></gmpx-place-overview>

There are five size variations of the Place Overview component. The default component uses anx-largesize variation. In order to get other size variations, add and modify thesizeattribute.

<!-- Try setting the size attribute to "x-small", "small", "medium", "large", or "x-large" -->
<gmpx-place-overview place= "ChIJVVVVnvlHDW0Rwyod-_ddhAw" size= "small" ></gmpx-place-overview>

For more details, check out GitHubor npm.To see components used in sample code, check out the examplespage on GitHub.